• 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 – Atmosphere

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 – Atmosphere

This topic is: not resolved

Tagged: atmosphere theme, hover color won’t disappear, nav menu

  • This topic has 14 replies, 2 voices, and was last updated 7 years ago by designerwriter.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • September 13, 2016 at 6:51 pm #193121
    designerwriter
    Member

    I have having this weird issue where the over color over INVESTOR won’t disappear. StudioPress told me that this is the code in question:

    .nav-primary li.highlight > a {
    background-color: #fff;
    border: 1px solid #333;
    margin-left: 15px;
    padding-left: 15px;
    padding-right: 15px;
    }
    .nav-primary li.highlight > a:hover, .nav-primary li.highlight > a:focus {
    background-color: #34313b;
    border: 1px solid #34313b;
    color: #fff;
    }

    So I adjusted the code to this:

    .nav-primary li.highlight > a {
    background-color: #fff;
    border: 1px solid #fff;
    margin-left: 15px;
    padding-left: 15px;
    padding-right: 15px;
    }

    .nav-primary li.highlight > a:hover,
    .nav-primary li.highlight > a:focus {
    background-color: #fff;
    border: 1px solid #e4e4e4;
    color: #fff;

    I do want the light grey outline to show up on the hover but not the green background in the box. Can someone tell me how to fix this please? The job is due tomorrow. Thanks in advance!

    http://dev.qmcresources.com/
    September 13, 2016 at 8:10 pm #193122
    Christoph
    Member

    Hi,

    you have to use !important after the :hover, :focus values because the green background color is defined in an inline style.


    https://www.christophherr.com | Genesis Customizations | Buy me a coffee

    September 13, 2016 at 8:18 pm #193124
    designerwriter
    Member

    You mean I have to write code? That’s why I bought the theme. Where is this inline code...that big chunk of code at the beginning? Can you post the block of code please and where exactly this green hex color is so that I can change it? Thank you Christoph.

    September 13, 2016 at 8:33 pm #193129
    Christoph
    Member

    No, you have to add !important after the code you said you already changed.

    .nav-primary li.highlight > a:hover,
    .nav-primary li.highlight > a:focus {
    background-color: #fff !important;
    border: 1px solid #e4e4e4;
    color: #fff;

    You will have to change color to something other than white.


    https://www.christophherr.com | Genesis Customizations | Buy me a coffee

    September 13, 2016 at 8:39 pm #193132
    designerwriter
    Member

    Ok but how will this change the green color and why can’t I leave it as white? I don’t want the color in the hover button to show up at all. I just want the letters to change to green and the button light grey outline.

    September 13, 2016 at 8:52 pm #193135
    designerwriter
    Member

    I put important there but the color is still showing up in the box for INVESTOR. Why is it showing up on this link and nowhere else? Very strange.

    September 13, 2016 at 9:02 pm #193136
    Christoph
    Member

    I'm just going from the code you have posted.
    If you change the background-color to white and the color is white, you will see nothing.

    You either haven't changed the code or you have to empty (plugin / hosting / CDN) caches:
    http://prntscr.com/chrcjw

    The green background is showing because you added the custom css class "highlight" to that menu element.


    https://www.christophherr.com | Genesis Customizations | Buy me a coffee

    September 13, 2016 at 9:14 pm #193137
    designerwriter
    Member

    I emptied the cache. Still see it. Yes I did add highlight to that menu element. Let me change it brb.

    September 13, 2016 at 9:21 pm #193138
    designerwriter
    Member

    I took off the highlight on all of them. I even deleted the INVESTORS widget and added another one just to make sure but it’s still there. I don’t see it all of the other ones.

    September 13, 2016 at 9:23 pm #193141
    designerwriter
    Member

    Should I get rid of li.highlight then? I feel so dumb. lol

    September 14, 2016 at 12:25 am #193145
    designerwriter
    Member

    I changed the color on the supposed menu to the grey. It did take on INVESTORS but not on the other buttons.

    September 14, 2016 at 7:41 am #193153
    Christoph
    Member

    Well,
    you didn't use !important after the background-color: http://prntscr.com/chwzca

    If you don't want the highlight class applied, remove it from the menu item at Appearance - Menu.


    https://www.christophherr.com | Genesis Customizations | Buy me a coffee

    September 14, 2016 at 9:26 am #193156
    designerwriter
    Member

    None of the places where I put !important beside the background worked. I went into the Editor and searched for #024731 on both CSS pages and nothing showed up. The ONLY thing that worked was that I deleted the damn INVESTORS page and created a new one! This worked. I figured since that color was not showing up anywhere, deleting the page was the last resort. πŸ™‚ I took the !important off of the 3 places where I put it because that code did not have an effect.

    September 14, 2016 at 9:44 am #193158
    Christoph
    Member

    LOL
    Glad you found a solution that worked.
    Deleting a page to delete a menu item is sort of a nuclear solution but hey...

    For future reference, you won't find an inline style in any style.css. The inline styles were most likely created when you made changes in the Customizer.


    https://www.christophherr.com | Genesis Customizations | Buy me a coffee

    September 14, 2016 at 10:12 am #193160
    designerwriter
    Member

    LOL. Thanks for your help. πŸ™‚ Yes when I get angry, I get surprisingly more focused. Thank you for this piece of information (For future reference, you won't find an inline style in any style.css. The inline styles were most likely created when you made changes in the Customizer.) because I couldn’t figure out WHY I wasn’t seeing the color you showed me esp since I had changed that color to a darker green so I applied a different number.

    Sometimes you have to “go nuclear” to get the job done when all else fails. There is more than one road to CSS Nirvana. Ha ha ha!

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and 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