Docs

[kobwebie]

Hi
Im hoping you can help me with 2 things that have been troubling me.

1) The nav dropdown drops drop from the bottom of the navbar. It looks like its ver far down. Is there a way to move that so it drops below the menu item?

2) How do I change the colour of the menu items / bg colour for mobile?

Look forward to hearing from you.

[kobwebie]

This reply has been marked as private.

[Joao]

Hi There,

Please add the following code to Appereance CUstomizer CUstom CSS

.x-navbar .desktop .x-nav > li ul {
    top: 100px;
    background: white;
}

@media (max-width: 1280px) {
.x-nav-wrap.mobile.collapse.in {
    background: grey;
    padding: 10px;

}
.x-navbar .x-nav>li>a>span {
   
    color: red;
}}

Hope it helps

Joao

[kobwebie]

Wow quick response.. Thanks!!

One last thing.. The submenus don’t work on mobile. Any suggestions on how aI can fix that?

Karl

[Rupok]

Hi there,,

Looks like you have some conflicting CSS like this that causing the issue :

.x-navbar .sub-menu {
  background-color: rgba(255, 255, 255, 0.9) !important;
  position: absolute;
  top: 0px;
  left: 0px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  width: 100px;
  display: none;
}

Can you take off your CSS and check again to make sure it’s causing by the custom CSS?

Thanks!

[kobwebie]

Hi

Thanks for your help. When I remove that custom css it creates a dropdown like it would on desktop view. Il send you logins in a pm if you want to take a closer look

[kobwebie]

This reply has been marked as private.

[Joao]

This reply has been marked as private.

[kobwebie]

Can you try it again?

[Joao]

Hi

There was a syntax error.

Let us know how it looks now.

Thanks

[kobwebie]

Im afraid its still the same. The CSS is only changing the color of the background and the text. When I remove it out the problem is still there. Only on mobile menu. Sub-menu dropdowns are not working.

[Christopher]

Hi there,

Please find this code:

.sub-menu {
    background-color: #A8DBD8 !important;
    position: absolute;
    top: 44px;
    left: 0px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    width: 150px;
    display: none;
}

And update it to :

@media (min-width:979px){
.sub-menu {
    background-color: #A8DBD8 !important;
    position: absolute;
    top: 44px;
    left: 0px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    width: 150px;
    display: none;
}
}

@media (max-width:979px){
body ul.sub-menu {
    background-color: #CFEBE9 !important;
}
}

Hope it helps.

[kobwebie]

Hi..

Hi thanks for your help but this code does not exist in my custom css

.sub-menu {
background-color: #A8DBD8 !important;
position: absolute;
top: 44px;
left: 0px;
-webkit-border-radius: 10px;
border-radius: 10px;
width: 150px;
display: none;
}

[Joao]

Hi There,

Please try adding the code provided by Christian to Appereance Customizer Custom CSS

Let us know how it goes,

Joao

[kobwebie]

Hi

I have added it but it doesn’t appear to change anything

Karl

[Author]

Posts