Shop Menu

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)

, , , , ,

3 Responses to WordPress: Center navigation for PlatformPro framework

  1. Shane February 9, 2012 at 6:46 am #

    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.

    • Reid Walley February 9, 2012 at 4:08 pm #

      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:)

  2. George Burnett October 25, 2012 at 6:45 am #

    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.

Leave a Reply

css.php