-
Posts
-
Is there anyway to center (justify) the Header Menu?
A fairly standard way of centering a “block” element is to give it a pixel or percent width. THEN give it auto-margins on both side.
I’m not at my work computer, so from memory:
.container-class{
width: 50%;
margin-right: auto;
margin-left: auto;
}The key point is that for auto-margins to work the container needs an established width.
Thanks Leo.
I pasted the code into the Dragonfly style.css but it did not change the header menu. I cleared the cache and refreshed the browser just in case.
.container-class isn’t the name of the class in Dragonfly, just a made up name Leo used for an example. I tried this code on your site (in the javascript console) and it produced a nice effect (assuming I understand which menu you wanted to change)
.navbar {
width: 95%;
margin-right: auto;
margin-left: auto;
}I first tried 75% but the menu wrapped which didn’t look good
Thanks JS, but I must be doing something wrong. I pasted the code into Dragonfly style.css and nothing again.
I’m trying to center the Home…. -Categories – New Images – Contact – About – L Photography menu.I left the code there so you can see it is in place.
I was trying to duplicate what you said you did and was able to get into the safari javascript console to view the code but I can’t figure out how to view the page with any changes to the code within the console.
Centering that container works with the .navbar CSS class and the defined width plus auto margins left and right. But the problem is that it’s not the container that needs centering but the content inside the container. I have the exact same problem with the thumbnails in the ‘Featured/Latest Images’ widget and can’t figure out how to solve it.
Ok, thanks for the ideas. I’ve removed the code. Hopefully someone can figure it out.
I didn’t really solve the problem.
Actually, a simple tag inside the Nav Bar would solve it but it would have to be placed inside the HTML/PHP file which would be over written with future updates.
A workaround the issue is to give your navigation elements a fixed width which could be calculated by ‘Side width divided by number of navigation elements’.
To make your example work you’d have to place this into your CSS file:
.nav {
width: 153px;
}
or
.nav {
width: 14.2%;
}
It still wouldn’t center the nav elements but at least they look centered.
You could of course also give every single nav element a different width to avoid text overflow.@redneck wrote:
I didn’t really solve the problem.
Actually, a simple tag inside the Nav Bar would solve it but it would have to be placed inside the HTML/PHP file which would be over written with future updates.
A workaround the issue is to give your navigation elements a fixed width which could be calculated by ‘Side width divided by number of navigation elements’.
To make your example work you’d have to place this into your CSS file:
.nav {
width: 153px;
}
or
.nav {
width: 14.2%;
}
It still wouldn’t center the nav elements but at least they look centered.
You could of course also give every single nav element a different width to avoid text overflow.I really like the way you laid out your site, what child theme are you using?
I? I’m using the Dragonfly United, Template Home: Top-Widget / Content->Widget / 3 CTAs.
Sorry, was out the whole day. Thanks for trying but neither worked, the menus just bunched up on the left.
I actually tried it on your website (with Google Chrome Inspector) and it did work. I could see the changes in real time.
Interesting. I’m using Mac Safari 7.0 and saw no changes. Ideas?
You must be logged in to reply to this topic.