Sub menu not showing

Support
#1

Hi I am having issue with the sub menu not showing at all.
kindly please guide

#2

Hello @bajwha,

Thanks for asking. :slight_smile:

On my end submenu seems to be working fine. Please see screenshot.

The other website is using X Theme and has same submenu as your’s. I can’t spot any difference in between. Can you please elaborate?

Thanks.

#3

Hi Parsant, I managed to get the sub menu but now issue with the effects. hover colour, hover background colour.I have used this css
.x-navbar a:hover {
color: #ffffff !important;
}

.x-navbar li:hover{
background:#0161b1 !important;
}

.x-navbar ul.sub-menu{
background:#f4f4f4 !important;
}
which will make the back ground colour good but not the sub menu back ground and the main menu hover colour.

please help me to get same css as this website https://orthodonticlinic.co.uk/ for my menu.

#4

HI,

Please change your css code to this.

.x-navbar li.menu-item:hover {
    background-color: rgba(16, 134, 236, 1);
    transition-timing-function: ease-out;
    transition: 0.25s;
    outline: none;
}

.x-navbar li.menu-item a:hover {
    color: white !important;
}

.x-navbar .desktop .sub-menu a:hover { 
    background-color: rgba(0,0,0,0.0175);
}

I copied that from the site you provided.

Hope that helps.

#5

Hi Paul, I have used the css you gave me but issue is still same.
when I hover to sub menu I need main menu colour black. please check the screen1 which is the from another site and screen2 is my site.

thanks

#6

Hi There,

Please also add this custom CSS:

.x-navbar .desktop .x-nav > .x-active > a {
    color: #000;
}

Hope it helps :slight_smile:

#7

Hi Thai, tired that but nothing. here is the css
.x-boxed-layout-active .site, .x-boxed-layout-active .x-site {
margin: 0 auto;
border: none;
border-top: none;
border-bottom: none;
background-color: #fff;
box-shadow: 0 0 0px rgba(0,0,0,0.125);
box-sizing: content-box;
} /* box arround the body */

.x-navbar.x-navbar-fixed-left {
box-shadow: none;
} /* shadow of the menu */

.x-navbar li.menu-item:hover {
background-color: rgba(16, 134, 236, 1);
transition-timing-function: ease-out;
transition: 0.25s;
outline: none;
}

.x-navbar li.menu-item a:hover {
color: white !important;
}

.x-navbar .desktop .sub-menu a:hover {
background-color: rgba(0,0,0,0.0175);
}

.x-navbar .desktop .x-nav > .x-active > a {
color: #000;
}

please check the screen shot I am getting one error not sure what is that

#8

Hi There,

Could you please try adding the following CSS rule and it should work.

.x-topbar .p-info, .x-topbar .p-info a, .x-navbar .desktop .x-nav > li > a, .x-navbar .desktop .sub-menu a, .x-navbar .mobile .x-nav li > a, .x-breadcrumb-wrap a, .x-breadcrumbs .delimiter {
    color: #fff;
}

Hope that helps.

#9

nope still the same

#10

Hello There,

Thanks for updating in!

“Outlines should only be modified using :focus” is not an error. This is a css notice. You can ignore this.

By the way, could you please clarify what you wanted. Do you want to have a black color for the parent menu item when you hover the submenu? The code given by Thai does that.

Thanks.

#11

Hi RueNel,
thanks for the reply well that code dosent work with me but I managed with the google dov-tool to get that.
only now one issue is my sub menu item font size is small how can I change the sub menu font size.Also like main menu use uppercase.
thanks
BAJWHA

#12

Hi @bajwha,

Flad it’s sorted out, for the sub-menu, please add this as well,

.x-navbar .desktop .x-nav li  a {
    font-size: 15px;
    text-transform: uppercase;
}

Hope this helps.

#13

oo Grate all sorted for now.:slight_smile:

#14

We are delighted to assist you with this.

Cheers!

#15

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