• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Nav menu item styling when active submenu item

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Nav menu item styling when active submenu item

This topic is: resolved

Tagged: css, nav menu, submenu

  • This topic has 4 replies, 3 voices, and was last updated 10 years ago by Joyann.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • December 22, 2012 at 9:55 am #6942
    Joyann
    Member

    I am using the Lifestyle child theme.

    I am looking for the right css style to add background color to the current menu item on all related active submenu items. To make it easy to see where I am in relation to current top navigation item. Meaning if the about page is subpage under contact, I want background color on contact menu item when visiting the about page.

    How can I do that in my css?

     

    December 22, 2012 at 9:57 am #6946
    Anita
    Keymaster

    Please provide a link to your site so we can take a look. In the meantime, you can use Firebug for Firefox to locate those areas which would be modified in your Style.css file.


    Love coffee, chocolate and my Bella!

    December 22, 2012 at 12:08 pm #6972
    Joyann
    Member

    Thanks, I am building my site here;: http://lbh.fengshuiwebdesign.dk/

    My subnav css is this - and this is where I´m not sure where to change something:

    #subnav {
    background-color: #F5F5F5;
    /*border-bottom: 1px solid #ddd;*/
    clear: both;
    color: #fff;
    font-family: 'Bilbo Swash Caps', cursive;
    font-size: 16px;
    padding: 5px 0;
    margin: 5px 2px 0 auto;
    overflow: hidden;
    width: 1000px;
    word-spacing: 2px;
    }

    #subnav ul {
    float: left;
    width: 100%;
    }

    #subnav li {
    float: left;
    list-style-type: none;
    }

    #subnav li a,
    #subnav li a:link {
    /*border-right: 1px solid #ddd;*/
    /*border-left:1px solid #fff;*/
    -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;
    background-color: #FFF;
    color: #583e65;
    display: block;
    margin: 0 2px;
    padding: 6px 16px 5px 15px;
    position: relative;
    text-decoration: none;
    }

    #subnav li a:hover,
    #subnav li a:hover a:active,
    #subnav .current_page_item a,
    #subnav .current-cat a,
    #subnav .current-menu-item a {
    background-color: #583e65;
    color: #FFF;
    }

    #subnav li a .sf-sub-indicator {
    display: block;
    overflow: hidden;
    position: absolute;
    text-indent: -9999px;
    }

    #subnav li li a,
    #subnav li li a:link,
    #subnav li li a:visited {
    background-color: #fff;
    border: 1px solid #ddd;
    border-top-width: 0;
    color: #444;
    font-size: 12px;
    padding: 5px 10px;
    position: relative;
    text-transform: none;
    width: 128px;
    }

    #subnav li li a:hover,
    #subnav li li a:active {

    background-color: #583e65;
    color: #FFF;
    }

    #subnav li ul {
    height: auto;
    left: -9999px;
    margin: 0 0 0 -1px;
    position: absolute;
    width: 180px;
    z-index: 9999;
    }

    #subnav li ul a {
    width: 130px;
    }

    #subnav li ul ul {
    margin: -31px 0 0 149px;
    }

    #subnav li:hover>ul,
    #subnav li.sfHover ul {
    left: auto;
    }

    #subnav .wrap {
    margin-left: auto;
    margin-right: auto;
    display:table;
    white-space:nowrap;
    }

    #subnav{text-align:center}
    .sub-menu {text-align:left;}

    #subnav ul{
    list-style:none;
    display:table-row;
    white-space:nowrap;
    }

    #subnav li{
    display:table-cell;
    }
    #subnav ul a{
    display:block;
    }

    January 11, 2013 at 3:13 pm #11321
    And_or
    Participant

    Hi Joyann, I think the code you are looking for is: #subnav .current-page-ancestor a which needs to be added to the styles on line 549 of the stylesheet on the link you provide.

    so added to this line: #subnav li a:hover, #subnav li a:hover a:active, #subnav .current_page_item a, #subnav .current-cat a, #subnav .current-menu-item a (add  , #subnav .current-page-ancestor a)


    Simplicity is not Simple Webtaurus

    January 14, 2013 at 3:04 am #11775
    Joyann
    Member

    Thanks ALOT 🙂 Simple but very well hidden code-snippet.....

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Nav menu item styling when active submenu item’ is closed to new replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble