• 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

Executive Pro: navigation menu hover color

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 › Executive Pro: navigation menu hover color

This topic is: not resolved

Tagged: color, Executive, executive pro, hover, menu, navigation, text

  • This topic has 6 replies, 2 voices, and was last updated 8 years, 11 months ago by exelexys.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • March 28, 2014 at 4:17 pm #97205
    exelexys
    Member

    Would like to modify the navigation menu color scheme on Executive theme, but for some reason, the default menu item text color must be the same as the hover menu item text color, or at least, the default menu item text color can't be the same as the menu item hover background color. If it is, then the menu item text 'disappears', but can't seem to figure out why this happens. See attached images for reference:

    On Executive Pro demo, the default menu item text color is the same as the hover menu item text color so this problem doesn't occur:

    How does hovering over the submenu item change the text color of the menu item? Can't find the CSS which controls this.

    Any CSS gurus out there who can help figure this out?

    Thanks in advance!

    March 29, 2014 at 1:26 pm #97316
    Au Coeur
    Member

    What is your URL?

    Look for this in your stylesheet:

    .genesis-nav-menu li:hover, .genesis-nav-menu a:hover


    Mother. Web & Graphic Designer. Lactation Consultant. Blogging about how it all fits together, most recently from northern Colorado. Visit my blog or my design site.

    March 29, 2014 at 7:32 pm #97355
    exelexys
    Member

    Site isn't publicly visible but temporarily disabled Under Construction page if you can take a look and let me know:
    http://is.gd/VWmnuF

    Thanks!

    March 29, 2014 at 10:29 pm #97377
    Au Coeur
    Member

    Did you find the section I reference in your CSS file? That is what is controlling your text color change on hover.


    Mother. Web & Graphic Designer. Lactation Consultant. Blogging about how it all fits together, most recently from northern Colorado. Visit my blog or my design site.

    March 29, 2014 at 11:34 pm #97381
    exelexys
    Member

    Yes, found it. Tried changing all existing navigation menu color settings, but no luck. If the default color of the main menu text is the same as the hover background color (in this case white), hovering over the submenu item causes the menu text to 'disappear'.

    In addition to the example in my original post, this is again evident when a main menu item with submenu items is the currently selected menu item. In this case, since the default text color (white) is not the same as the hover background color (there is none, since the currently selected menu item doesn't change color), the main menu item text doesn't disappear when hovering over the submenu items:

    Need to add a selector to the CSS file to prevent this from happening, but haven't able to find the right one. It's still unclear why the main menu item background retains its color when hovering over submenu items, but the text doesn't.

    Thanks

    March 30, 2014 at 2:05 am #97390
    Au Coeur
    Member

    You might find this helpful: http://stackoverflow.com/questions/11878887/keeping-hover-state-of-menu-button-when-using-sub-menu


    Mother. Web & Graphic Designer. Lactation Consultant. Blogging about how it all fits together, most recently from northern Colorado. Visit my blog or my design site.

    April 3, 2014 at 5:59 pm #98374
    exelexys
    Member

    Finally got this to work after being unable to look at it nearly a week.

    Au Coeur, thanks for your help, couldn't have done it without you.

    CSS (if anyone is interested) can be found below. Note this CSS is the entire Site Navigation section from Executive Pro, though only approximately the first half has been modified.

    There are three color states each of which contain CSS properties background-color and color :

    • default
    • selected (main menu only)
    • hover

    In the CSS below, these correspond to:

    • default
      • background-color: #35406b;
      • color: #fff;
    • selected (main menu only)
      • background-color: #88c3e8;
      • color: #fff;
    • hover
      • background-color: #fff;
      • color: #35406b;

    Not everyone may want this same color state behavior, particularly when hovering over submenu items, but this seemed most plausible to me from a usability perspective. Feel free to change the colors/color states as anyone sees fit.

    Added bonus: submenu behavior carries over to sub-submenu items (lending credence to the 'cascading' portion of CSS =)

    /*
    Site Navigation
    ---------------------------------------------------------------------------------------------------- */
    .genesis-nav-menu {
    	background-color: #35406b;
    	clear: both;
    	color: #fff;
    	font-size: 14px;
    	font-size: 1.4rem;
    	line-height: 1.5;
    	margin: 0;
    	overflow: hidden;
    	padding: 0;
    	width: 100%;
    }
    
    .genesis-nav-menu .menu-item {
    	display: inline-block;
    	margin: 0;
    	padding: 0;
    	text-align: left;
    }
    
    .genesis-nav-menu a {
    	color: #fff;
    	display: block;
    	padding: 16px 20px;
    	padding: 1.6rem 2rem;
    	position: relative;
    	text-decoration: none;
    }
    
    .genesis-nav-menu li:hover,
    .genesis-nav-menu a:hover   {
    	background-color: #fff;
    	color: #35406b;
    	text-decoration: none;
    }
    
    .genesis-nav-menu li:hover a { 
    	background-color: #fff;
    	color: #35406b;
    	text-decoration: none;
    }
    
    .genesis-nav-menu li:hover .sub-menu a {
    	background-color: #35406b;
    	color: #fff;
    	text-decoration: none;
    }
    
    .genesis-nav-menu li:hover .sub-menu a:hover {
    	background-color: #fff;
    	color: #35406b;
    	text-decoration: none;
    }
    
    .genesis-nav-menu .current-menu-item > a {
    	background-color: #88c3e8;
    	color: #fff;
    }
    
    .genesis-nav-menu li.current-menu-item:hover > a {
    	color: #35406b;
    }
    
    .genesis-nav-menu .sub-menu {
    	left: -9999px;
    	margin: 0;
    	opacity: 1;
    	padding: 0;
    	position: absolute;
    	-webkit-transition: opacity .4s ease-in-out;
    	-moz-transition:    opacity .4s ease-in-out;
    	-ms-transition:     opacity .4s ease-in-out;
    	-o-transition:      opacity .4s ease-in-out;
    	transition:         opacity .4s ease-in-out;
    	width: 148px;
    	z-index: 999;
    }
    
    .genesis-nav-menu .sub-menu a {
    	background-color: #35406b;
    	color: #fff;
    	border-top: none;
    	font-size: 12px;
    	font-size: 1.2rem;
    	padding: 10px 18px;
    	padding: 1rem 1.8rem;
    	position: relative;
    	width: 148px;
    }
    
    .genesis-nav-menu .sub-menu a:hover {
    	background-color: #fff;
    	color: #35406b;
    	text-decoration: none;
    }
    
    .genesis-nav-menu .sub-menu .sub-menu {
    	margin: -40px 0 0 147px;
    }
    
    .genesis-nav-menu .menu-item:hover {
    	position: static;
    }
    
    .genesis-nav-menu .menu-item:hover > .sub-menu {
    	left: auto;
    	opacity: 1;
    }
    
    .genesis-nav-menu > .first > a {
    	padding-left: 0;
    }
    
    .genesis-nav-menu > .last > a {
    	padding-right: 0;
    }
    
    .genesis-nav-menu > .right {
    	display: inline-block;
    	float: right;
    	list-style-type: none;
    	padding: 16px 20px;
    	padding: 1.6rem 2rem;
    }
    
    .genesis-nav-menu > .right > a {
    	display: inline;
    	padding: 0;
    }
    
    .genesis-nav-menu > .rss > a {
    	background: url(images/icon-rss.png) no-repeat left;
    	background-size: 12px 12px;
    	margin-left: 12px;
    	margin-left: 1.2rem;
    	padding-left: 16px;
    	padding-left: 1.6rem;
    }
    
    .genesis-nav-menu > .twitter > a {
    	background: url(images/icon-twitter-nav.png) no-repeat left;
    	background-size: 16px 16px;
    	padding-left: 20px;
    	padding-left: 2rem;
    }
    
    .genesis-nav-menu > .search {
    	padding: 0;
    }
    
    .genesis-nav-menu .search-form {
    	width: 100%;
    }
  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 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