How To Move and Align the Navigation Menu On A WordPress Site Using PlatformPro and CSS

I’m redesigning the Marvelous Engine site and the first thing I wanted to do was move the menu from underneath the banner and aligned to the left of the screen and place it above the banner and aligned to the right.

Before: The navigation menu as it was before the redesign –underneath and to the left side of the “Site Branding” (banner) area.

I use PageLines.com PlatformPro as a framework on top of WordPress to rapidly design, develop, and deploy websites.

Moving the Menu From Underneath the Banner to On Top of the Banner

The first part, moving the menu from underneath the banner to over it, was easy enough. Here’s how I did it:

1. WordPress Dashboard–>PlatformPro
2. Clicking on the “Template Setup” tab in PlaformPro’s sub-menu.
3. Selecting “Site Header” in the “Selected Template Area” drop-down menu.
4. Dragging and dropping the “Navigation” tile so that it would be above the “Site Branding” (this is where the banner is) tile in the “Displayed Site Header Sections” column.
5. Scrolling to the bottom of the “Template Setup” page and clicking the “Save Options” button.
6. Reloading the edited page to ensure that menu was above the banner.

Aligning the Menu from the Left Side to the Right Side

Next, I used FireBug to look over the different parts of the navigation menu. I kept getting main_nav and nav_row as elements but it wasn’t until after a few Google searches and looking over some forums that I found primary_nav needed to be changed as well.

In the end I pasted the following lines into the CSS styling sheet found in Dashboard–>PlatformPro and then clicking on “Custom Code” in PlatformPro’s secondary menu.

#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;}


A quick scroll to the bottom of the page to “Save Options” and another equally quick page refresh gave me the following result.

The navigation menu now; over and to the right side of the banner.