Need help modifying my nav bar

So I spent a lot of time getting this nave bar to work, but as I’m nearing the end of my website, I’m trying to go back and clean things up in the code, and also make things look nicer on the site. The nav bar is pretty plain and I’d really like to make it look a little nicer. A few specific things I’ve been trying to do but haven’t been able to figure out are how to move the buttons slightly closer together, and I’d also like to put a thin blue border along the bottom of the nav bar. I haven’t been able to figure either of these things out though. Any other suggestions are welcome as well.

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <link type="text/css" href="/css/LayoutStyleSheet.css" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HomePage - My ASP.NET Application</title>
    <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css" />

</head>
<body id="layoutBody">

<nav class="navbar navbar-inverse navbar-static-top marginBottom-0">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <div id="spacerDiv">
            <a class="navbar-left"><img id="logo" src="/Images/SC2_MyLink_Logo.png" alt="Browser does not support image."/></a>
        </div>
    </div>
    <div class="collapse navbar-collapse" id="navbar-collapse-1">
        <ul id="navigationbar" class="nav navbar-nav">
            <li id="homebutton" class="dropdown"><a href="/">Home</a></li>
            <li class="menubuttons dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Our Company<b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="/OurCompany">Our History</a></li>
                    <li><a href="/OurCompany/Facilities">Facilities</a></li>
                </ul>
            </li>
            <li class="menubuttons dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Employee Services<b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li class="dropdown dropdown-submenu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Forms</a>
                        <ul class="dropdown-menu">
                            <li><a href="/FormsHandlers/HRForms">HR Forms</a></li>
                            <li><a href="/FormsHandlers/CorporateForms">Corporate Forms</a></li>
                            <li><a href="/FormsHandlers/EmployeeBenefitsForms">Employee Benefits</a></li>
                            <li><a href="/FormsHandlers/AccidentForms">Accident Forms</a></li>
                            <li><a href="/FormsHandlers/PayrollForms">Payroll Forms</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Pay Stubs</a></li>
                    <li><a href="/FormsHandlers/FAQ">FAQ</a></li>
                </ul>
            </li>
            <li class=" menubuttons dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Support Services<b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#">ISS Support</a></li>
                    <li><a href="#">Purchase Requests</a></li>
                    <li><a href="#">Maint. Support</a></li>
                </ul>
            </li>
        </ul>
        <form id="searchbar" method="get">
            <input type="text" id="search" placeholder="Search..." maxlength="50" autocomplete="off" onmousedown="active();" onblur="inactive();">
            <input type="submit" id="searchbutton" value="Go!"/>
        </form>
    </div><!-- /.navbar-collapse -->
</nav>

CSS:

#layoutBody {
    background: #353c3e;
    color: white;
    margin: 0%;
    padding: 0%;
    font-family: 'Oswald', sans-serif;
}

#homebutton {
    margin-top: 15%;
    margin-right: 3%;
    padding-right: 0%;
}

#navigationbar {
    height: 12em;
    width: 60%;
}

.marginBottom-0 {
    margin-bottom: 0;
}

.menubuttons {
    margin-top: 15%;
    padding: 0;
    margin-left: 12%;
    margin-right: 0;
}

.dropdown-submenu {
    position: relative;
}
    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -6px;
        margin-left: -1px;
        -webkit-border-radius: 0 6px 6px 6px;
        -moz-border-radius: 0 6px 6px 6px;
        border-radius: 0 6px 6px 6px;
    }

    .dropdown-submenu > a:after {
        display: block;
        content: " ";
        float: right;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        border-left-color: #cccccc;
        margin-top: 5px;
        margin-right: -10px;
    }

    .dropdown-submenu:hover > a:after {
        border-left-color: #555;
    }

    .dropdown-submenu.pull-left {
        float: none;
    }

        .dropdown-submenu.pull-left > .dropdown-menu {
            left: -100%;
            margin-left: 10px;
            -webkit-border-radius: 6px 0 6px 6px;
            -moz-border-radius: 6px 0 6px 6px;
            border-radius: 6px 0 6px 6px;
        }

#searchbar {
    float: right;
    margin-top: 9.75%;
    margin-right: 1%;

}

#logo {
    position: relative;
    height: 10em;
    width: auto;
    padding: 0;
    margin-top: 15px;
}

#spacerDiv {
    height: 8em;
    width: 22em;

}

Image for reference:

Hi,

If you want the items closer together then in your current format you should reduce the width on the navbar and that will automatically bring them closer together. However your current approach is a little flawed in a number of ways because reducing the width will change the margin-top percentage and the navbar will move upwards (just as it does when you narrow/ the window).

Vertical percentage margins are based on the width of the containing block and are essentially useless for lining things up consistently especially when you have a fixed space to work with. It looks to me as though you should place your logo in the flow and then simply start the navbar under it without the need for any exorbitant margins.

If you want your nav exactly centred then you will need to account for the search bar on the right because at the moment the centering is offset by the width of the search box. Either absolutely place the search box so it doesn’t interrupt the flow of the document and then the nav can be exactly central. You will of course need to ensure that the searchbar then never overlaps the navbar but media queries or padding on the navbar should accommodate that.

You will virtually never need to place elements using vertical margins with percentages. (It’s not useful except in some weird convoluted demos.)

Hope that gives you some ideas. :slight_smile:

(If you need more specific help then it would be helpful if you could set up a codepen demo of the header and nav section only so that we can work with the real content and more easily offer code suggestions. Codepen allows you to add boostrap css and js files easily from a quick selection dropmenu.)

Ok, I’m saving all the code I have in a notepad file, and then started from scratch. I’ve got everything put into HTML, now I just need to go through the CSS to fix the layout. One question I have, towards the beginning of the code I have a div with the class navbar-header, then inside that div I have an <a> tag with class navbar-brand, and it has an image of our company logo. When I run the page, the logo is too big, but also the div (which is colored for reference) goes well beyond the edge of the image as well. Do I need to resize the div, the image, or both? And what would be the best way to resize them?

I did find this on w3schools:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
    width: 100%;
    height: auto;
}
</style>
</head>
<body>

<img src="img_chania.jpg" width="460" height="345">
<p>Resize the browser window to see how the image will scale.</p>

</body>
</html>

This makes me think I should size it in html, and then to make it responsive set the width to 100% and the height to auto. However, I think I’ve been told in the past not to set height and width in html. Advice?

Hi,

Without a demo its hard to tell what you want but usually to scale an image you would set the image to width:100% and the height to auto. Of course that means the width of the image will be controlled by the parent so you would need to set the parent up correctly otherwise the image will be either full-width or even zero width if the parent is floated.

If this is for a main logo the usually you would set the width of the parent to the initial size you want the image displayed when at full screen width. If you then resize the window smaller and at some point you will need the image to grow smaller you add a media query and change the parent of the image to a percentage width or perhaps a smaller pixel width that fits better. It all depends on the layout and on what happens next.

There are many variations of the above and it all depends on how everything else is laid out. If you can put up a codepen demo you will get answers much quicker as people won’t have to self-build your layouts in order to test and see what you have.:slight_smile:

1 Like

I tried creating a codepen demo but for some reason it didn’t look anything like what I have. I couldn’t seem to get it to match up even remotely close.

Ok so I’ve got my parent sized correctly, and I’m trying to do the media query. I’ve never done that before so I had to look it up, and I though this should work, but it isn’t doing anything. Is there something I’m missing?

@media screen and (max-width:1024px){
    #logo.responsive {width: 200px;}
}

@media screen and (min-width:1025px){
    #logo.responsive{width: 300px;}
}

#logo.responsive{height: auto;}

Assuming logo is the parent then you could just do this.


.responsive {width: 300px;}
.responsive img{width:100%;height:auto;}

@media screen and (max-width:1024px){
    .responsive {width: 200px;}
}

Don’t use ids for css selectors because it adds too much weight. Just keep to classes.

Oh I misread you’re earlier post. #logo is the image itself, I changed it now so the parent is the one doing the resizing. Question though, my image doesn’t seem to care about the size of the parent? If I don’t have #logo keeping it at the size I want, it just goes back to the original size, well outside the bounds of the parent.

That’s because you probably already styled it using #logo so that means you have to keep using #logo or change all other instances of the id usage.

It’s pretty easy as you just add the required files from settings (bootstrap3.css and jquery followed by bootstrap3.js).

Here’s an example using the nav code you posted earlier (it took about 2 mins to do this).

You can fork that pen and then add your updated code etc and we can see what you are working with now.

You will have to link to the real images or use placeholder images as I did. It’s important to have the images (or suitable placeholders) in place otherwise we can’t see what its supposed to look like.

Yea I took #logo out entirely and that was what was causing the image to go much larger.

See the Pen Bootstrap example by Ethan Forbes (@ethancodes) on CodePen.

Done, put a placeholder in.

Can you see my problem @PaulOB?

Are you putting the nav underneath the image or not?

If the nav is going under the image then you don’t need to float the logo section.

What is going in the space to the right of the image?

How big do you want the initial image?

This is exactly what it should look like when it’s done. The only thing I did to make it look like this was add an id=logo directly to the image, and then add the height:120px and width: auto to the css. The problem is getting it to resize when it needs to.

I’ve updated my codepen to get you on the right track again.

Fork it and play with it. It’s very rough but should give you the idea of how to move things around easily.

I’m offline until tomorrow so someone else will have to chime in :slight_smile:

I’m not sure you’re using the right code. I completely rebuilt the navbar because the old one was such a mess and had a lot of extra stuff in there that wasn’t necessary. So the code in my codepen is the right code. However, what you have at least shows me what I should be doing and I will try it out and see what I can make of it.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.