Samantha Samantha - 2 months ago 11
CSS Question

Navigation Menu Height Inconsistent

I have a parent and submenu navigation (http://www.livingthelighterlife.com/) and for some reason some of the parent links are resting higher than others. Not sure what's going on.

Also, if it's helpful, I'm using Wordpress, parent theme "Genesis," child theme "Foodie Pro."

Any help would be greatly appreciated :)



/* Main Navigation
--------------------------------------------- */

.genesis-nav-menu .menu-item {
display: inline-block;
}

.genesis-nav-menu {
margin-top: -118px;
}

.genesis-nav-menu:before {
content: "BROWSE RECIPES:";
color: #f68364;
font-size: 11.5px;
letter-spacing: 1px;
margin-right: 5px;
}

.genesis-nav-menu {
text-align: right;
font-size: 11.5px;
letter-spacing: 1px;
}

.genesis-nav-menu a {
display: inline-block;
position: relative;
padding-left: 5px;
padding-right: 8px;
color: #636367;
text-decoration: none;
text-transform: uppercase;
transition: all 0s ease !important;
}

.genesis-nav-menu a:hover {
color: #6dbea2;
}

li#menu-item-150 a {
pointer-events: none;
cursor: default;
padding-left: 0px;
padding-right: 3px;
color: #f68364;
}

.menu-item:last-child a {
padding-right: 0px;
}


li#menu-item-119:after, li#menu-item-120:after, li#menu-item-121:after {
display: inline-block;
content: "/";
color: #b9b9b9;
}

/* Sub Navigation
--------------------------------------------- */

.menu-primary li{
position: relative;
}

.genesis-nav-menu .menu-item:hover > .sub-menu,
.genesis-nav-menu .menu-item:focus > .sub-menu,
.genesis-nav-menu .menu-item.menu-item-hover > .sub-menu {
left: 50%;
transform: translateX(-50%);
}

.genesis-nav-menu .sub-menu:before {
content: '';
display: block;
margin: auto;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #7b7c80;
}

.genesis-nav-menu .sub-menu {
position: absolute;
display: block;
z-index: 2000;
left: -9999px;
width: 100px;
}

.genesis-nav-menu .sub-menu a {
width: 100px;
padding: 10px;
background-color: #7b7c80;
color: #ffffff;
font-size: 10px;
text-align: center;
}

.genesis-nav-menu .sub-menu a:hover {
background-color: #f78f73;
}

<nav class="nav-primary" itemscope itemtype="http://schema.org/SiteNavigationElement" id="genesis-nav-primary" aria-label="Main navigation"><div class="wrap"><ul id="menu-main" class="menu genesis-nav-menu menu-primary"><li id="menu-item-119" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-119"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Breakfast</span></a>
<ul class="sub-menu">
<li id="menu-item-151" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-151"><a href="http://www.livingthelighterlife.com/recipes/" itemprop="url"><span itemprop="name">Recipes</span></a></li>
</ul>
</li>
<li id="menu-item-120" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-120"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Lunch</span></a>
<ul class="sub-menu">
<li id="menu-item-156" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-156"><a href="http://www.livingthelighterlife.com/recipes-new__trashed-2/" itemprop="url"><span itemprop="name">Recipes NEW</span></a></li>
</ul>
</li>
<li id="menu-item-121" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-121"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Dinner</span></a>
<ul class="sub-menu">
<li id="menu-item-160" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-160"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Coming Soon</span></a></li>
</ul>
</li>
<li id="menu-item-148" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-148"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Other</span></a>
<ul class="sub-menu">
<li id="menu-item-124" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-124"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Desserts</span></a></li>
<li id="menu-item-122" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-122"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Snacks</span></a></li>
<li id="menu-item-123" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-123"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Sides</span></a></li>
<li id="menu-item-125" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-125"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Beverages</span></a></li>
</ul>
</li>
<li id="menu-item-150" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-150"><a itemprop="url"><span itemprop="name">•</span></a></li>
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-25"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Nutrition &#038; Fitness</span></a>
<ul class="sub-menu">
<li id="menu-item-126" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-126"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Philosophy</span></a></li>
<li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Workouts</span></a></li>
</ul>
</li>
</ul></div></nav>




Answer

the issue appears to be with the menu & list items with the "/" following. Change:

li#menu-item-119:after, li#menu-item-120:after, li#menu-item-121:after {
display: inline-block;
    content: "/";
    color: #b9b9b9;
}

to:

li#menu-item-119:after, li#menu-item-120:after, li#menu-item-121:after {
display: inline-block;
    position: absolute;
    content: "/";
    top: 0;
    color: #b9b9b9;
}

Add this in your child-theme under appearance > editor > style.css

Comments