My attempt to align my search bar with the "Art Store" text on the same vertical level has been unsuccessful so far.
<div id="logoRow" >
<h1>Art Store</h1>
<form class="searchBar">
<div class="input-group locationSearch">
<input type="text" class="form-control" placeholder="Search" name="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
This is how my "Art Store" text and search bar look by default, without any additional CSS style: https://i.sstatic.net/NkyMN.png
However, when I apply custom CSS styles as shown below:
.searchBar {
width: 250px;
padding: 10px;
margin-right: 50px;
}
https://i.sstatic.net/ePQ58.png I intend to have the search bar aligned at the same vertical position as the "Art Store" text on the right side. Unfortunately, using float: right causes the search bar to shift down into the bottom navbar instead of staying at the desired level. See example: https://i.sstatic.net/cQDQR.png This outcome is not what I desire. I'm puzzled by this behavior since it persists even when setting the position property to relative. Any assistance in resolving this issue would be highly appreciated. Here's a bit more code for context (including the bottom navbar):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chapter5</title>
<!-- Custom styles for this template -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="assign3.css" rel="stylesheet">
</head>
<body>
<header>
<div id="topHeaderRow" >
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Welcome to Art Store, Login or Create a new Account</a>
</div>
<ul class="nav navbar-nav moveRight">
<li><a href="#">My Account</a></li>
<li><a href="#">Wish List</a></li>
<li><a href="#">Shopping Cart</a></li>
<li><a href="#">Checkout</a></li>
</ul>
</div>
</nav>
</div>
<!-- end topHeaderRow -->
<div id="logoRow" >
<h1>Art Store</h1>
<form class="searchBar">
<div class="input-group locationSearch">
<input type="text" class="form-control" placeholder="Search" name="search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
<!-- end logoRow -->
<div id="mainNavigationRow" >
<nav class="navbar navbar-default">
<ul class="nav navbar-nav mynavbar">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Art Works</a></li>
<li><a href="#">Artists</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Specials
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Special 1</a></li>
<li><a href="#">Special 2</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</nav>
</div>