Jump to content
Sign in to follow this  

Main Navigation - Tabbed Navigation

Recommended Posts


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


Share this post

Link to post
Share on other sites


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;

Please search our forums, before posting!

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • angiek
      By angiek
      Website URL: http://mariemefaye.com
      Framework Version:  PageLines 2.4.4
      WordPress Version: WordPress 3.7.1
      Plugins in Use: BackWPUp, DiggDigg, Google Analytics for WordPress, Pinterest PinIt Button, PopUp Domination, WordPressSEO, 
      Server/Host: GoDaddy
      Details: We want to use ONLY the Fixed Nav bar at the top of the website. How do we turn OFF the Standard Nav so the Fixed Nav bar at the top is the only nav bar?
    • hugo2808
      By hugo2808
      Hi all!
      I'm building a site with a main nav with single items (no dropdown)
      Consider my nav menu
      In EVENTS page, I enter in it and the item events is highlighted, everything OK.
      In this page I have a sidebar Menu with a list of events, so my most recent event is the page used in the nav menu for EVENTS item, I mean, when I click on menu item EVENTS i got to the page of my last event!
      When I change event in the side bar menu, I go to another event page but I would like to keep the EVENTS item of main nav highlighted (has if I hadn't changed page)
      Is it possible?
    • EvaB
      By EvaB
      Hi, I hope someone can help me with this, because I have browsed all the forums, but can't find an answer...
      At http://kootpiano.nl/wp, I would like to:
      1. left align my main and secondary nav with the header (the sec nav lines with the header, but I can't find how to adjust the main nav)
      2. diminish the horizontal space between the main and secondary nav
      3. divide the space between the main and secondary nav with a horizontal line (1px)
      I already have made some adjustments in the Custom Css, and some work, but some don't. I also tried to make these adjustments via the Pageline Customize Plugin, but that did not seem to work. Is there a big difference between those two, or is it just what one prefers?
      Thanks in advance!!
    • starlit
      By starlit
      Hi smart people. 
      I would like to change one link in the main nav menu. Simple change - just make the font bold and change the color. But can't seem to work it out. 
      I have come so far that I think I need to change the css for the specific page item but nothing is changing
      (in this case class=page_item page-item-77)
      Please have a look at www.eventhostesses.co.za/wp   I just want to have the 'Apply!' link stand out a bit.
      Please help.
      Highly appreciated.
      Thank you!
    • cranberry85
      By cranberry85
      Hello, I had created a site, www.cranberryprintmarketing.com and had it working perfectly, specifically the main navigation bar worked as a dropdown. I haven't touched the site in a week or two and now it stopped working. The menu still highlights on mouseover but nothing dropsdown. I'm not sure what would have happened, could this be a bug? I used firebug and didn't see anything stand out other than the fact that when I mouseovered the line of code didn't highlight like it used to do. When I mouseover the social media icons in the upper right corner it highlights and changes the code depending on what is being mouseovered so I am assuming it is a specific problem with the main nav.

      Has anyone else run across this?