WordPress: Center navigation for PlatformPro framework
PlatformPro’s WordPress framework comes standard with flush-left navigation. We wanted the menu to be centered. We’re working with PlatformPro’s child theme, PlatformBase.
WordPress version: 3.1.2
PlatformPro version: 1.3.5
PlatformBase version: 1.3.2
Add the following CSS to PlatformBase’s “base.css” file:
#nav_row ul{padding-bottom:10px !important;float:none !important;text-align:center;}
#primary-nav li{float:none !important;display:inline !important;}
#primary-nav a{float:none !important;display:inline !important;}
http://www.pagelines.com/forum/topic/5906 (must be logged in)
This works and centers the navigation, however it also centers the drop down menus as well. As a result, this makes the items unreadable and crammed up when they drop down. Anyway to center just the navigation without centring the drop down menu as well?
Thanks.
Hi Shane,
The drop-down menus in PlatformPro would be a different set of CSS for getting them to not center. But I never had to figure it out so I don’t have an answer. Sorry. Also, I no longer work with PlatformPro, and have upgraded to PageLines Framework 2.0.
I see you also asked this question in the PageLines forum. Hopefully someone will be able to give you an answer there. That’s where I would have asked, as well:)
Hi Shane, don’t know if you ever got this answered or not, but for those working on an old version of PageLines PlatformBase ( I inherited a job from another web designer in my case), I found a solution…
In addition to the lines of CSS in the article above (which worked great, thanks), also add the following:
#nav_row ul.sub-menu {padding-bottom:10px !important;float:none !important;text-align:left;}
#nav_row ul.sub-menu li{float:none !important;display:block!important;}
#nav_row ul.sub-menu a{float:none !important;display:block!important;}
That stops the ul.sub-menu elements from inheriting the text-align:center and display:inline attributes.
The site I am working on has PlatformBase 1.4.1 as it’s theme. I added the lines to the style.css for a quick fix, although a better solution would be to implement it as a child theme, which I will do once my tinkering work is complete.