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:
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;
}
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).
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?
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?
That’s when you make a media query to then stack it .
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).
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?
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.
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.
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?”)
It depends on tyour target audience and your view on semantics
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.