Docs

[Andrei]

Hey there guys,

I would like to change some things in the mobile drop menu:

1. Remove the “SEARCH” text;
2. Bring the text and the cart together;
3. Put all the icons in one row;
4. Is there a way to make the menu the size of that black rectangle and to remove all that extra black area?

Thank you so much.

[Andrei]

My website is //sinestezic.com

[Christopher]

Hi there,

Please add this code:

@media (max-width:979px){
span.x-hidden-desktop {
    display: none !important;
}
li.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-1588, li.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-1583, li.x-menu-item-search {
    float: left;
    width: 25%;
}
.x-navbar .mobile .x-nav {
    background-color: rgba(0,0,0, 0.65) !important;
padding: 10px;
}
}

Find this code :

.x-navbar {
    background-color: transparent !important;
    background-color: rgba(0,0,0, 0.65) !important;
    border: 0;
}

And update it to :

@media (min-width:979px){
.x-navbar {
    background-color: rgba(0,0,0, 0.65) !important;
    border: 0;
}
}

Hope it helps.

[Andrei]

Hi Christopher,

The first code worked like charm, but the last code doesn’t work. I see that you want to completely hide the top bar. Is it possible to leave it there, because I want the logo visible too? I would like to hide only the drop down extra white part (the one with an X on it). I attached a print screen.

[Andrei]

I would like that slide to be on the background where the X and the drop-down menu is.

[Rue Nel]

Hello There,

Thanks for the updates! Please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(max-width: 1199px){
  .x-navbar {
    position: fixed;
    top: 0;
    background-color: rgba(0,0,0,0.65);
  }
}

Please let us know if this works out for you.

[Andrei]

Thank you. It worked with this code:

.x-navbar {
background-color: transparent !important;
background-color: rgba(0,0,0, 0.65) !important;
border: 0;
}

@media (max-width:1200px){
.x-navbar {
border-bottom: none !important;
background-color: transparent !important;
box-shadow: none!important;
}
}

[Andrei]

I noticed 2 issues in the dropdown menu:
1. If I click on “COLLECTIONS” it doesn’t activate the submenu. It activates it only when I click on the arrows. Can I do something to activate the submenu when I click on both the text and the arrows?
2. When I activate the submenu, “SINGULARITY”, first it pops up near “CONTACT” and then it goes up under “COLLECTIONS”. Can we do someting to make it pop up directly under “COLLECTIONS”?

[Christopher]

Hi there,

Please add this :

.x-sub-toggle {
    width: 100%;
    text-align: right;
}

Please update this code :

.x-navbar .sub-menu {
    top: 57px !important;
}

To :

@media (min-width:979px){
.x-navbar .sub-menu {
    top: 57px !important;
}
}

Hope it helps.

[Andrei]

Wow, it works great! Thanks Christopher. There is an issue with the icons, they are seen as a single selection, even though I have a link attached to each icon. When I click on it, it will bring me to the cart page. Also, what can I do to bring the number of the cart to the same row as the other icons?

[Rupok]

Hi there,

It seems you have the below code :

.x-navbar .mobile .x-nav > li.x-menu-item-woocommerce > a {
  margin: 0 !important;
}

Let’s update this to :

.x-navbar .mobile .x-nav > li.x-menu-item-woocommerce > a {
  float: right;
  margin: 0 !important;
  max-width: 40px;
}

.x-navbar .mobile .x-nav {
  min-height: 200px;
}

Hope this helps.

Cheers!

[Andrei]

This is great, it partailly works. Now I can sellect the icons. The issue is with the cart, it is still showing on 2 rows. And now if I select the “COLLECTIONS” and it opens the submenu, the menu exceeds the background. I have attached an image.

[Nabeel A]

Hi again,

Please add the following code in your Customizer:

.x-navbar .mobile .x-nav {
    min-height: 100% !important;
    float: left !important;
    width: 100% !important;
}

Let us know how this goes!

[Andrei]

Hey there Nabeel,

Thank you, the menu doesn’t exceed the background anymore, but the number of itmes is still below the cart.

[Christopher]

Hi there,

I’m not able to replicate the issue, please clear cache and check again.
See the attachment.

Thanks.

[Author]

Posts