Want to move "hamburger" icon when on smaller devices


#1

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?

Chris Cote


#2

Can you put your code in a pen? Some people might like that to visualize what you mean. Also, I think I want to do what you want to do too. Just maybe :slightly_smiling:. I am building a website too. Here is a pen for that( I didn't really update it much. I always thought that the position where the brach logo is located is weird.


#3

I have one set up here
However, I wasn't able to figure out how to upload the images I'm using, but you can get the gist of what I'm trying to do if you minimize your screen to the smallest view.

Chris


#4

You can post your images onto http://imgur.com/ and uploading an image. Right click on what you see when your photo pops up and click copy image address or something. Use that url for <img src="">. Also, do you mean that you can't see what seems like a smaller image when the browser window is smaller?