There are a couple of issues with my navigation bar menu
- The text background color does not align with the navigation bar background, leaving some empty spaces around it
- Whenever I click on the menu, instead of opening the drop-down menu outside the navigation bar, it opens within the nav bar and stretches the navbar background color
Check this image for reference Another image for more context
body{
padding-top: 20px;
}
#navbar{
/*background color*/
background-color:#498AA2;
size:100% !important;
background-position:inherit;
}
/*change color top menu*/
#text{
background-color:#C11D1F;
color:#FFFFFF;
background-position:center;
}<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/main.css" />
<meta name="viewport" content="width=device-width, initial-scale=1,user-scaleable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" id="navbar">
<div class="container">
<a href="index.php" class="navbar-brand" id="text">my site</a>
<ul class="nav navbar-nav">
<!-- drop down menu-->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" id="text">Men<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tshirt</a></li>
<li><a href="#">pants</a></li>
<li><a href="#">shoes</a></li>
<li><a href="#">accessories</a></li>
</ul>
</li>
</ul>
</div>