Menu Styling Help

Support
#1

Hi - I’m building a website and have hacked together CSS from lots of topics in the forum! I need help with two specific styling aspects of the main navigation/menu:

  1. . The solid color hover effect gets cut off on the last menu item (the right side of the last menu item, “Careers” doesn’t seem to have the same right-side padding

  2. . I’d like to have it so that when the cursor goes down and hovers over sub-menu items, that the main/parent item stays highlighted with the color hover effect

Site URL:

https://www.oakpointememorycenter.com/oak-pointe-memory-center

#2

Hello @brettfish,

Thanks for writing in!

1.) To resolve this issue, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-navbar-static-active .masthead-inline .desktop .x-nav>li:last-child>a, 
.x-navbar-fixed-top-active .masthead-inline .desktop .x-nav>li:last-child>a {
    padding-right: 24px;
}

2.) To also highlight the parent menu item when you are on the submenu, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-navbar .desktop .x-nav>li:hover >a,
.x-navbar .desktop .x-nav>li>a:hover{
    background-color:rgba(155,120,44,0.8);
    transition:ease 0.3s;
    color:#ffffff;
}

Hope this helps.

#3

Hi thanks so much - I applied both of those pieces of code to the global CSS and neither issue seemed to be fixed or change at all

#4

Hi @brettfish,

It’s because the CSS is added right after this

@media (max-width:979px){
.x-topbar{
display:none;
}

And since that block has no proper closing bracket, any CSS added after it will only work on the screen it represents (eg. 979px ). It should be like this

@media (max-width:979px){
.x-topbar{
display:none;
} 
} 

/* your new CSS here */

Hope this helps.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.