Docs

[chelseakleinsasser]

Hi there,

The menu on mobile devices is not working. The background is transparent and when you click on a submenu, it goes on top of the other menu item.

Could you help me figure out what is wrong?

Thanks!

[chelseakleinsasser]

This reply has been marked as private.

[Christopher]

Hi there,

Please find this code :

.x-navbar {
    background-color: rgba(41,41,49,0.0) !important;
}
.store, .menu {
    height: 40px;
    margin: 30px 10px 0px 0px;
    background-color: rgba(225,225,225,0.0) !important;
    border: solid 2px rgba(225,225,225,0.8);
    border-radius: .2em;
    -moz-border-radius: .2em;
}

And update it to :

@media (min-width:979px){
.x-navbar {
    background-color: rgba(41,41,49,0.0) !important;
}
.store, .menu {
    height: 40px;
    margin: 30px 10px 0px 0px;
    background-color: rgba(225,225,225,0.0) !important;
    border: solid 2px rgba(225,225,225,0.8);
    border-radius: .2em;
    -moz-border-radius: .2em;
}
}

Hope it helps.

[chelseakleinsasser]

Thanks! That helped with the full dropdown appearing.

I am now having trouble changing the background color of the mobile menu. It is currently transparent and I would like to make it white with black text then tweak the padding on the text. Can you help with this? I tried many different selectors.

Could you help me figure this out?

Thanks.

[Christopher]

Hi there,

Please try this code :

@media (max-width:979px){
.x-navbar {
    background-color: #fff !important;
} 
.x-navbar li a{
color:#000;
}
}

Hope it helps.

[chelseakleinsasser]

Unfortunately that did not work.
The Menu and Dropdown still stays transparent. Any other suggestions?

[Nabeel A]

Hi again,

Please replace the previous code with this one:

.x-navbar .mobile .x-nav {
    background: #fff !important;
}
.x-navbar .mobile .x-nav li > a, .x-navbar .mobile .x-nav .x-active > a {
    color: #000 !important;
}

Let us know how this goes!

[chelseakleinsasser]

thanks this worked.

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts