Docs

[tashitendrel]

Hello,

I would like to change some styles in mobile menu:

1. I have managed to make the mobile button background transparent, but only when it’s not active. When menu is open there is still some background color showing up. How can I remove it?

2. How to remove background color from mobile submenu?

3. The menu item with sumbenu has nice arrows on the right side, which go out to the far right. And I would prefer if it stays next to menu item (like in the desktop menu).

And for the footer menu:
4. How to increase spaces between menu items. I have checked different ideas given on the forum before, but nothing works.

dharmaebooks.hornet.pl
thank you

[Christopher]

Hi there,

Please add this :

@media (max-width:979px){
.x-navbar-wrap {
    height: 79px;
}
.x-navbar .sub-menu {
    background-color:transparent
}
.x-sub-toggle {
    right: 79%;
}
.x-colophon.bottom .x-nav li a {
    padding-right: 10px;
    padding-left: 10px;
}
}

Hope it helps.

[tashitendrel]

Hello,

I tried, but it wasn’t changing anything, neither in mobile menu or in footer.

I was also playing with padding-right and padding-left, but again – it wasn’t changing anything…

[Rue Nel]

Hello There,

1] You may need to update your css code from this:

.x-btn-navbar.collapsed:hover {
    background-color: transparent;
}

into this:

.x-btn-navbar.collapsed:hover,
.x-btn-navbar.collapsed,
.x-btn-navbar {
    background-color: transparent !important;
}

2] To remove the background color of the mobile submenu, you need to use this code:

@media (max-width:979px){
  .x-navbar .mobile .sub-menu {
    background-color:transparent;
  }
}

3] To align the arrow next to the menu item, please use this code:

.x-sub-toggle,
.x-sub-toggle>span {
  position: relative;
  display: inline-block;
  padding: 0;
  bottom: auto;
}

4] And to increase/decrease the space between the mobile menu items, you use this code:

.x-navbar .mobile .x-nav li a {
  padding: 5px 0;
}

And I have checked your custom css and noticed that there are invalid entries. Please do correct it.

Orphaned curly brace

No closing curly braces

Hope this helps.

[tashitendrel]

Thank you so much for all that help! Everything works. And I made the corrections.

One thing left – I was actually asking how to increase spaces between menu items in the footer, not mobile.
In the footer they are really too close to each other.
thank you

[Thai]

Hi There,

To increase the spacing between the footer menu items, please add the following CSS:

.x-colophon.bottom .x-nav li {
    margin: 0 25px;
}

Hope it helps 🙂

[tashitendrel]

thank you

[Thai]

If you need anything else please let us know.

[Author]

Posts