Issues with Primary Menu

[jflayhart]

So if you look at the attachments, you will notice on the desktop version of the site the .hover-bg border doesn’t appear under the Products menu as it should after clicking on the menu item. Secondly, for the next screenshot you will notice for the iPad version of the site, the primary menu is all messed up in that it appears beneath the logo. I want it vertically aligned in the middle along with the logo, so both the log0 and menu are on the same plane… Lastly, the mobile primary menu is also aligned incorrectly and I can’t figure out how to center it and keep it on the same plane with the logo or at least put it on the next line under the logo so it looks better… The primary menu has some styling and functionality issues in other words and I need some direction on where and how to fix them in the CSS.

Thanks!

[Raghavendra]

Can you pls post a temp login to your site here as a private message and I will have these taken care of. Looks like we need couple of minor CSS tweaks. Thanks

[jflayhart]

This reply has been marked as private.

[Raghavendra]

I have made the following changes –

/* Align with the menu in mobile */
@media only screen and (max-width: 767px) {

#mobile-menu-toggle { 
color: #FFF !important;
border-color: #FFF !important; 
 }

#mobile-menu-toggle { 
top: 25px !important; 
} 

 #site-logo { 
top: 10px !important;  
} 
}

Since these changes were going into the child theme, I had to add the !important attribute to the styles. Support for multiple stylesheets is hard with child themes since the style.css of the child theme gets loaded first prior to any additional stylesheets we load along with style.css.

[Author]

Posts