Primary Navigation Height

[marketme]

Hello all! I added a <br> to make some of my menu items in my primary navigation into two lines. Now when I hover over a menu item that is only 1 line tall the hover color doesn't extend all the way to the top. Any ideas on how I can adjust this to make them all a uniform height.

http://michaelmavromates.com/
Example - hover over Island Search and then hover over Home Search.

Thanks!

http://michaelmavromates.com/

[SavvyJackie]

Hi - very nice website! Menu looks good to me. Have you made a change?

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[marketme]

Hi SavvyJackie, first, thank for the compliment. I did not change the site. It is still showing oddly on the hover. When you hover over a one line link in the nav bar it shows a white box that doesn't extend all of the way to the top as it does with a two line link.

[Genesis Developer]

go to line no 1140 of style.css and modify the current css with this new CSS

.genesis-nav-menu .menu-item {
    display: table-cell;
    line-height: 1;
    min-height: 76px;
    padding: 18px 0;
    text-align: left;
    vertical-align: middle;
}

go to line no 1145 of style.css and modify the current css with this new CSS

.genesis-nav-menu a {
    color: #fff;
    display: block;
    padding: 0 24px;
}

Add this new CSS in the file

.genesis-nav-menu li.menu-item:hover{
   background: #FFF;
}

Hope that this will solve your issue and please mark it as RESOLVED

---

Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
You can request new tips/help.

[SavvyJackie]

Give this a try, as I tested it and it works. I had issues after using the suggested code above.

Add new line in CSS beneath line 1311 under .genesis-nav-menu .menu-item
vertical-align: top;
so it looks like this:

.genesis-nav-menu .menu-item {
    display: inline-block;
    text-align: left;
    vertical-align: top;
}

Just below there is a block of code like this:

.genesis-nav-menu a {
    color: #fff;
    display: block;
    padding: 20px 24px;
}

Add this code directly below:

.genesis-nav-menu > li.menu-item > a {
  height:76px;
}
.genesis-nav-menu > li.menu-item > a:hover {
	height:76px;
}

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[marketme]

Thank you both for the suggestions, I tried but they didn't seem to be working for me. So I went the path of least resistance and made each tab two lines.

Thanks again, the kindness shown in this community is truly awesome 🙂

Dana

[Author]

Posts