Jump to content


Main Navigation - Tabbed Navigation

Main Nav Tabbed Navigation

  • Please log in to reply
1 reply to this topic

#1 broniors



  • Members
  • 7 posts
  • Country: Country Flag

Posted 24 October 2012 - 04:56 AM

I am trying to change my main navigation so that it appears with spaces between the items - like a tabbed navigation.

I am sure that there is a way to do it with the CSS I am just not being very successful finding it


#2 Danny


    Is Awesome!

  • Moderators
  • 16385 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 24 October 2012 - 08:05 AM


I have visited your site and noticed that you're using Platform Pro but have posted in the PageLines Framework. Therefore, I have moved your topic to the correct forum.

Regarding your issue.

I have provided you with a the CSS to get you started however, please keep in mind that we are unable to provide direct web design support for advanced customization needs and encourage you to seek out a PageLines Pro if needed. (include link to PageLines Pro) http://www.pagelines.com/pros/

Also, achieving this isn't going to be easy as you will need to style your drop down menu(s), if you're going to using them that is.

// Removes the border bottom
#site .main_nav { 
  border: 0 none;

//Removes the background to the ul li
.main_nav ul li, .main_nav ul li:hover { 
  background: transparent;

//Adds spacing, background, border and radius to the menu item(s)
#site .main-nav li a { 
  background: #F7F7F7; 
  border-radius: 4px;
  border: 1px solid #E1E1E1;
  margin-right: 5px;

Also tagged with one or more of these keywords: Main Nav, Tabbed Navigation