Jump to content


Main Navigation - Tabbed Navigation

Main Nav Tabbed Navigation

This topic has been archived. This means that you cannot reply to this topic.
1 reply to this topic

#1 broniors



  • Members
  • 7 posts

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
  • 19770 posts

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;