Problems aligning navigation bar

Hi, I am having a few problems aligning the navigation bar on my new website which I haven’t had before. Basically I want the end result to look like this:

And it looks like this:

AS you can see theres some pritty big problems, I did have another method which also was faulty and I started over and got this. Ignore things like the font, etc. I am trying to get the image to display correctly and the text to have a margin on the right.

Here is the CSS:

.navigationbar {
width: 100%;
height: 11%;
background-color: #202020;
padding-top: 0px;
display: table;
table-layout: fixed;
}

.logo {
    margin-left: 20%;
    height: 85%;
    width: 19.3%;
    margin-top: 8px;
    display: table-cell;
    vertical-align: middle
    /* line up with other siblings */
}

.navigationbar ul {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
    /* now lined up with logo */
}

.navigationbar li {
    display: inline-block;
    padding: 0 10px;
    vertical-align: middle;
    /* line up the list items */
}

.navigationbar li a {
    text-decoration: none;
    display: block;
    color: #FFFFFF;
}

And the HTML (just incase):

<div class="navigationbar">

    <img src="images/Logo.png" alt="Logo" class="logo">

    <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">About Me</a>
        </li>
        <li><a href="#">Portfolio</a>
        </li>
        <li><a href="#">Contact Me</a>
        </li>
    </ul>

</div>

Thanks!

One of the few cases I’d use inline-block for this (for the horizontal centering) rather than table/table-cell :slight_smile: .

http://codepen.io/ryanreese09/pen/VLKVqe

Better than what I could do, I tried the inline-block method before and I couldn’t get it to work, so I tried the other method.

But how can I have margins, so a 20% one on the left and right, rather than just centering it?

That sounds like centering to me ;).
Why do you want that? What does that offer, that my solution does not? Perhaps I don’t fully understand your requirements. I don’t see why you’d want htat.

The problem, if I set 20% left/right padding on .navigationbar, is that the items will wrap MUCH sooner than you’d want, due to less width (the same would happen if I set margins on the inner elements).

Do you just want them spaced out more?

I think that’s basically what I want, with more space in between the logo and the menu. If it is centered, its not really properly aligned, if you get what I mean?

In Ryans example just give a right margin to the logo and it will create a bigger gap. The whole thing will still stay centred.

I am having a few problems with keeping the whole thing stay on the same line when you are on a smaller device. I am trying to set % to it so that when the window is minimized it all stays on the same line and looks the same, but I need someway of setting a margin to the right of it because otherwise when you minimize it all that happens is the right side of the navigation bar collapses.

you can see that when you minimize the window and make the width smaller, the margin on the right collapses at a much faster rate than on the left?

See the Pen xGEmwG by Toby Hall (@TobyHall2000) on CodePen.

That’s when you make a media query to then stack it :slight_smile: .

It’s not collapsing on the right faster. It just is going overtop of hte margin. It’s overflowing. You just notice it more because content will reach there first (obviously content won’t shift to the left).

You should avoid this margin setting idea you have.

That’s because you are not using Ryans method. Your left and right margins eat up the space and the nav wraps. You don’t want any margins at the sides at all.

If you used ryans code and applied a right margin to the logo it would be much better.

Here’s another alternative (that has a more logical structure).

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
    .navigationbar {
    	background-color: #202020;
    	padding: 1rem;
    }
    nav {
    	display:table;
    	margin:auto
    }
    .tc{
    	display:table-cell;
    	vertical-align:middle;
    }
    .logo {
    	width:25%;
    }
.logo img {max-width:100%;height:auto}
    .navigationbar li {
    	display: inline-block;
    	padding: 0 10px;
    	vertical-align: middle;
    }
    .navigationbar li a {
    	text-decoration: none;
    	display: block;
    	color: #FFFFFF;
    	font-family: AgencyHB;
    	font-size: 24px;
    }
    @media screen and (max-width:740px){
    	.logo{width:auto}	
    }
    </style>
    </head>
    
    <body>
    <div class="navigationbar">
    		<nav>
    				<div class="logo tc"><img src="images/Logo.png" alt="Logo"> </div>
    				<ul class="menu tc">
    						<li><a href="#">Home</a> </li>
    						<li><a href="#">About Me</a> </li>
    						<li><a href="#">Portfolio</a> </li>
    						<li><a href="#">Contact Me</a> </li>
    				</ul>
    		</nav>
    </div>
    </body>
    </html>

I slightly edited it, and left out the text-aligned:center;, probably why it wasn’t working. facepalm

Now that it all works (thank you, ryan and paul), and you both used/mentioned media queries, could you quickly let me know if I can make it so that when it is on a small screen it displays a hamburger with a dropdown and the logo to the left of it, then when the screen is expanded (usually as it would be on a desktop) it goes back to the normal menu?

Oh and I mean by using media queries. Would I just have both images/headings there constantly but on a smaller screen, just hide the headings in the media query and unhide the hamburger?

Sorry for asking so many questions!

Here’s an example of a hamburger menu using the check box hack so that a click will open the menu.

Usually though you would use JS to trigger the opening of the mobile menu rather than the checkbox hack.

Also note that media queries are IE9+ and if you want ie8 support you will need a media query polyfill such as respond.js.

Here’s an old example using js but is also a drop down menu so is more complex.

The basis of both is that you hide the hamburger menu on wide screens and then you show the hamburger on small screens but hide and re-style the nav for smaller screens. It needs a click to open the menu which is more easily done with JS. Most of the complicated code in my examples is animating the hamburger menu with css but of course you could forego that and just an image.

Which is best to use?

Btw I have 0 knowledge of javascript whatsoever, all I know is how to write a single line. But I will learn it if I need to now.

Does anyone actually use IE? Especially that far back?

Do people use IE? Yes, of course. IE8? Not really. It’s very low. Around 1% low. It depends on your market though. A website targeting developers probably has a lower IE8-10 usage than a website targeting retirement plans. In general, I don’t think you should support IE8 unless your usage stats tell you otherwise.

I thought everyone who knew how to change their browsers had, cause you know. There are about 5 ones all better.

But I guess it makes sense if you are targeting something like retirement plans.

You have to remember that large sections of the population - including some too young to be thinking about retirement - grew up before computer skills were routinely taught in schools, and have therefore learned piecemeal as they’ve gone along. These folk only learn what they need to know for work or whatever. If the works computer uses IE, then when they get a home computer, they’ll also use IE, because nobody has ever explained how/why to change. (And quite often, if you ask which browser they use, they’ll look uncertain and reply “Er … Windows?”)

1 Like

It is all going to change though when windows 10 comes out, I think.

I seem to have forgotten the last thread I made where I got mixed up between browsers and search engines as well…

It depends on tyour target audience and your view on semantics :slight_smile:

If as mentioned you only want modern browsers then the checkbox hack is a good way to do it as there is no reliance on JS but it does bend semantics a little as form elements should really be used for forms rather than to action clicks. However, it is being commonly used these days for that effect so I’m guessing that eventually it will become acceptable.

My impression is that the largest number of “old browser” users are those

  • in poorer “third world” countries (more a matter of supply instead of cost these days?)
  • accessing the web from an intranet where the older browser is needed in order to be able to work with legacy applications

i.e. It’s not always a matter of “just haven’t upgraded yet”

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