Xtheme menu items disappear (or probably just go white)

[King]

Hi, On one of my sites: https://learningcommunitytrust.co.uk, when you hover over the ABOUT menu and then from that the WHO WE ARE ITEM, then finally off that sub menu and hover of the items within that sub menu, the menu item WHO WE ARE disappears when you hover over any of the items nested within it. I have some custom css on that menu to change the colours and hover colour so im not sure if its something missing from that code making it go white?? Here is the code:

/* //change navbar submenu text colour */
.x-navbar .desktop .sub-menu a {
color: #4eaeaa;
}

.x-navbar .desktop .sub-menu a:hover {
color: #31817e;
}

.x-navbar .desktop .sub-menu a:visited {
color: #31817e;
}

ul.sub-menu {
background-color: #fff !important;
}

.x-navbar .desktop .sub-menu a {
padding: 10px 20px;
border-bottom: 1px solid #e2e2e2; /add your color for border/
}
.x-navbar .desktop .sub-menu a:hover {
background: #ddebeb !important; /add your color for the hover/

Also at the bottom of the drop down menus, the items dont stop at the line below the last item, there is a little white area below it. Is there a way to remove the little white bit and for the menu to stop cleanly on a line?

thanks folks.

[nabeel]

Hi there,

Thanks for writing in! Please try adding the following code in the Theme Options > CSS:

.x-navbar .desktop .sub-menu .x-active > a {
    color: #31817e !important;
}
.masthead-stacked .x-navbar .desktop .sub-menu {
    padding-bottom: 0 !important;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Let us know how this goes!

[King]

Thanks @Nabeel that worked on both fronts, white space gone and the menu items on longer disappears Thank you very much. And thanks for the video links too

[jade]

You’re most welcome.