I am creating a website with Bootstrap which contains header information above the menu in the full-size version. When the browser's size is made smaller, I currently have the logo with the gray bar that contains the "hamburger" icon under this logo. Instead, I want to simply place the icon alone (without the gray bar) in line with the logo. How do I make this happen? I have included an image showing how it looks at this time as well as the code that sets this portion up. Also, the menu itself appears to be too wide and too tall. If someone could please help me figure this out, it would be a HUGE help.
<header> <div class="container"> <div class="row"> <div id="logo" class="col-md-4 col-sm-12"><img src="images/logoSm.png" width="300px" height="82px" /></div> <div id="address" class="col-md-4 hidden-xs"> Residential, Commercial and<br /> Industrial Wiring<br /> 5 Robin Street<br /> Waterford, CT 06385<br /> 860-447-0809 </div> <div id="ctmap" class="col-md-4 hidden-sm hidden-xs"><img src="images/NLCounty-sm.png" /></div> </div> </div> <nav role="navigation" class="navbar navbar-default nav-container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collection of nav links and other content for toggling --> <div id="navbarCollapse" class="collapse navbar-collapse nav-container"> <ul class="nav nav-pills nav-justified"> <li><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li class="active"><a href="#">Contact Us</a></li> </ul> </div> </nav> </header>
Also, when the browser is in the full size, the menu itself appears to be a little too tall and wide as the selected (active) item shows below. How would I fix this issue?
Would it be possible to set it up so that when displaying the full menu, it has a white background (thus eliminating the appearance of the height/width, then change it back to the gray for the button when condensed?