Jump to content
Sign in to follow this  
rpacker

Centering Secondary Navigation

Recommended Posts

rpacker

I have successfully centered the primary navigation menu but haven't yet had any luck with the secondary navigation. Here is the URL: http://www.postrealityshow.com/99-survival-ads/ And the custom code I am using: #nav ul{padding-bottom:10px !important;float:none !important;text-align:center;} .navigation_wrap li{float:none !important;display:inline !important;} .navigation_wrap a{float:none !important;display:inline !important;} .icons{text-align:center !important;width:100% !important;top:65px;} #nav {font-size: 1.2em;} #secondnav ul{padding-bottom:10px !important;float:none !important;text-align:center;} .navigation_wrap li{float:none !important;display:inline !important;} .navigation_wrap a{float:none !important;display:inline !important;} .icons{text-align:center !important;width:100% !important;top:65px;} #secondnav {font-size: 1.0em;} Thanks!


Randall Packer

Multimedia Artist & Educator

http://www.randallpacker.com

Share this post


Link to post
Share on other sites
catrina
Replace this: [code]#secondnav ul{padding-bottom:10px !important;float:none !important;text-align:center;}[/code] ...with this: [code]#secondnav ul{padding-bottom:10px !important;float:none !important;text-align:center; margin: 0 auto !important;}[/code]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
rpacker
I just tried your suggested script and it didn't work. Here is the page again: http://www.postrealityshow.com/99-survival-ads/

Randall Packer

Multimedia Artist & Educator

http://www.randallpacker.com

Share this post


Link to post
Share on other sites
Jenny
You just need to add some padding to the left to get it centered. Something like: [code]padding-left: 240px;[/code] will work.

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
rpacker
Although it moved the menu over, that doesn't solve the problem, because I have several different secondary menus of differing length, so nudging the items over to the left won't center them all: http://www.postrealityshow.com/who-am-i/ (three menu items) http://www.postrealityshow.com/who-am-i/ (two menu items) Isn't there a way to do a true center alignment? Thanks.

Randall Packer

Multimedia Artist & Educator

http://www.randallpacker.com

Share this post


Link to post
Share on other sites
Rob
Hi, The solution simple_mama offered is [u]THE[/u] only solution for aligning secondary nav. If it doesn't work then you probably need to adjust the number or, commit the CSS to specific pages based on the width of the secondary menu found on each. If you need further customization, I'd suggest engaging one of our pros for this, though they're likely to explain the exact same thing simple_mama provided. There is no 'center' command that works on the secondary nav. This is standard throughout Wordpress sites.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Jenny
As an extension, you can apply changes to certain pages by using the page-id css element. So for the who am I page you can use [code].page-id-52 #secondnav ul { //your css code }[/code]

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
rpacker
Brilliant! That worked great. I don't have that many pages, it's just that I have a few different secondary menus, and identifying them is the perfect solution.

Randall Packer

Multimedia Artist & Educator

http://www.randallpacker.com

Share this post


Link to post
Share on other sites
rpacker
One more question, is there a way to group pages together as a range so I don't have to duplicate so many lines of code? Something like: .page-id-52, 53, 54 #secondnav ul {padding-left: 75px; padding-bottom:10px !important;float:none !important;text-align:center; margin: 0 auto !important; }

Randall Packer

Multimedia Artist & Educator

http://www.randallpacker.com

Share this post


Link to post
Share on other sites
Rob
Per this: http://codex.wordpress.org/Function_Reference/body_class I would say no. But you could try .page-id-52,.page-id-53,.page-id-54 ... then, as you add new pages, just inject them at the end of the list before the curly bracket, preceded by a , - it could work.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×