The two examples aren't actually centered when I try it though. The right side is kind of stuck to the logo and it moves when I resize the window.
Does anyone know how to center a logo in the middle of a nav bar? I'd like the nav bar to fill the page like in the picture.
Thank you in advance for your help.
I assume you're using an unordered list (ul and li's)? If so, what I've done in the past is just have the logo as one of the list items with its own class (like "logo" for example).
Thanks. That's what I'm doing, sort of. I applied the class as a logo and then had the logo as a background image. All the nav is spaced out well and the logo is centered within it, but what I keep running into is the whole nav itself not being perfectly centered. I'd show you my code but I'm not sure how to put that in here. If I paste in my code (if you could tell me how) will it help you to help me? I want to learn from whatever mistake I'm making so I know how to do this in the future.
From an SEO standpoint there is nothing wrong with putting the logo in a list item as its still readable by Google and other search engines, however a screen reader would have a field trip with it since they read the source from top to bottom, left to right.
Since the logo would be in a list item a screen reader would go
Yes but isn't that correct? I mean it is in the middle so screenreaders would read it correctly based on the layout. Sighted users would see Home/Stats first too.
Additionally - you've also got the alt-tags available if the image is physical rather than a CSS background (I always make them an actual image for this purpose rather than css background). So you could have "Michigan Logo, we do blah blah blah".
Thanks for all your comments. I wasn't thinking about SEO...and probabyl should. Some students in my class are trying to figure this centered logo situation out and haven't gotten it yet. This is the closest I came and it's a pretty pathetic attempt. Any ideas?
@Miela84 - for your logo "a" element make sure you add title="description goes here" somewhere for screen readers. Otherwise they won't be able to experience that there is a logo there.
Thanks HugoGiraudel, but I'm wondering, when I re-size the window the whole nav area isn't centered. That's the problem I've been having. It's shifted more to the left. Am I missing something?
Thanks for that Andy, I'll make sure I'll add it next time.
Miela, re: your sizing/alignment issue - all of the LI (list items) are currently floated left, so they're stacking, all you need to do is work out how big your container is and then add padding to each to fill evenly and that bad boy will be ready for dinner.
@andy_unleash as long as the logo comes before the navigation elements itself it would make more sense to the user using the screen reader, take the following for example:
For users using a screen read this makes sense as a site logo should always come before the main navigation to introduction the users position on the screen more formally, however something like the below would confuse the user.
The reason why is that screen readers look at the markup in the page not the layout itself as its impossible for a screen reader to understand what goes where and how a user interacts with it where are the DOM tree is a more solid structure for it to work with when presenting the content to the user.
No I mean I get that they read code down/dom tree. But isn't that semantically correct if the logo is not the first thing a sighted user would experience?
I get where you're coming from with the formal intro and a logo commonly being the very first item however. Perhaps a display: none; element in it's place? Visibility would still read it but to sighted users it would be hidden.
I get where you're coming from with the formal intro and a logo commonly being the very first item however. Perhaps a display: none; element in it's place? Visibility would still read it but to sighted users it would be hidden.
Using display: none doesn't work with screen readers as elements using this property get ignored, if you wanted your logo hidden for those who are sighted you would use visibility: hidden and absolutely position it off the left side of the screen.
Thanks wolfcry911. Thanks for the comments about the break and the clearing of the floats. You're right. I didn't need it there. I still get a little confused about floats sometimes.
Hey Miela84, add this to the bottom of your css and play with the width of the window. Just use this s you can show it off in class hehehe. Really nice if you want to develop for mobile devices.
@media only screen and (min-width: 0px) and (max-width: 1000px) {
#header{
height: 160px;
margin-top:140px;
}
#header a.logo {
margin: -70px 0 0 -108px;
}
#header ul{
width:300px;
padding-top:80px;
}
#header ul li:nth-of-type(4) {
margin-left:0px;
}
}
Hi, I'm trying to do an assignment for my class and I'm stuck on this logo being centered within navigation. I've been working on getting this right for hours and it's driving me crazy. I searched the forums and found this: http://css-tricks.com/forums/discussion/18095/how-to-make-header-nav-divided-by-logo/p1
The two examples aren't actually centered when I try it though. The right side is kind of stuck to the logo and it moves when I resize the window.
Does anyone know how to center a logo in the middle of a nav bar? I'd like the nav bar to fill the page like in the picture. Thank you in advance for your help.
I assume you're using an unordered list (ul and li's)? If so, what I've done in the past is just have the logo as one of the list items with its own class (like "logo" for example).
You know what, Andy, I don't think I've ever thought to do that before - pretty smart!
Thanks. That's what I'm doing, sort of. I applied the class as a logo and then had the logo as a background image. All the nav is spaced out well and the logo is centered within it, but what I keep running into is the whole nav itself not being perfectly centered. I'd show you my code but I'm not sure how to put that in here. If I paste in my code (if you could tell me how) will it help you to help me? I want to learn from whatever mistake I'm making so I know how to do this in the future.
Thanks!
You can put your HMTL & CSS in Codepen.io and let us have a look.
@thedoc - I'm sure some SEO expert would say it's madness or something, but at the end of the day - it works and means cleaner code.
From an SEO standpoint there is nothing wrong with putting the logo in a list item as its still readable by Google and other search engines, however a screen reader would have a field trip with it since they read the source from top to bottom, left to right.
Since the logo would be in a list item a screen reader would go
etc...
Yes but isn't that correct? I mean it is in the middle so screenreaders would read it correctly based on the layout. Sighted users would see Home/Stats first too.
Additionally - you've also got the alt-tags available if the image is physical rather than a CSS background (I always make them an actual image for this purpose rather than css background). So you could have "Michigan Logo, we do blah blah blah".
Thanks for all your comments. I wasn't thinking about SEO...and probabyl should. Some students in my class are trying to figure this centered logo situation out and haven't gotten it yet. This is the closest I came and it's a pretty pathetic attempt. Any ideas?
http://codepen.io/anon/full/mrDed
probably*
There you go : http://jsfiddle.net/P7PNj/1/.
@Miela84 - for your logo "a" element make sure you add title="description goes here" somewhere for screen readers. Otherwise they won't be able to experience that there is a logo there.
Thanks HugoGiraudel, but I'm wondering, when I re-size the window the whole nav area isn't centered. That's the problem I've been having. It's shifted more to the left. Am I missing something? Thanks for that Andy, I'll make sure I'll add it next time.
Miela, re: your sizing/alignment issue - all of the LI (list items) are currently floated left, so they're stacking, all you need to do is work out how big your container is and then add padding to each to fill evenly and that bad boy will be ready for dinner.
There : http://jsfiddle.net/P7PNj/2/.
Having the same header layout, that is pretty smart. Although I dislike not having it inside an h1.
@andy_unleash as long as the logo comes before the navigation elements itself it would make more sense to the user using the screen reader, take the following for example:
For users using a screen read this makes sense as a site logo should always come before the main navigation to introduction the users position on the screen more formally, however something like the below would confuse the user.
The reason why is that screen readers look at the markup in the page not the layout itself as its impossible for a screen reader to understand what goes where and how a user interacts with it where are the DOM tree is a more solid structure for it to work with when presenting the content to the user.
Hope I didn't misunderstand your reply.
No I mean I get that they read code down/dom tree. But isn't that semantically correct if the logo is not the first thing a sighted user would experience?
I get where you're coming from with the formal intro and a logo commonly being the very first item however. Perhaps a display: none; element in it's place? Visibility would still read it but to sighted users it would be hidden.
Thanks! I think I got it!! http://jsfiddle.net/P7PNj/6/
oops sorry this was before I refreshed to see other comments
http://codepen.io/anon/pen/HyLdg
Using
display: nonedoesn't work with screen readers as elements using this property get ignored, if you wanted your logo hidden for those who are sighted you would usevisibility: hiddenand absolutely position it off the left side of the screen.Thanks wolfcry911. Thanks for the comments about the break and the clearing of the floats. You're right. I didn't need it there. I still get a little confused about floats sometimes.
Hey Miela84, add this to the bottom of your css and play with the width of the window. Just use this s you can show it off in class hehehe. Really nice if you want to develop for mobile devices.
Just add insert into this part of css #header ul li a.logo { this: background-position: center;
I have a similar menu I need help in. This is what I'm working with. Can u help me please. http://www.stephentemple.com/events/index.jpg
This is how I have it setup in html
Here is my css
body { background-color: #3d1c0f; background-image:url(../images/body_bg.jpg); background-position:top center; background-repeat: no-repeat; background-size: 100%; }
container { width:980px; margin: 0 auto;
}
header {width:980px; height: 260px; }
logo { display: block; width: 370px; height: 290px; background:url(../images/logo.png) no-repeat; position:relative; float: left; margin-left: 300px;}
nav {width: 980px; Height: 43px; position: absolute;}
nav ul { list-style: none; }
nav li {display: inline;}
nav a { float: left; display: block; margin-right: 40px; }
wrapper { display: block; width: 980px; height: 850px; background: #fff; margin-top: 30px; border: 1px solid #000;
}
Please make a Codepen.