Docs

[Rifft]

Hello guys,

I would like to be helped with my mobile/tablet hamburger menu.
On desktop, my custom navbar is working well but on smaller devices, the background is transparent. Also, i would like to keep the 4th menu item with purple background.

What can i do ?

Thanks a lot.

BR

[Rifft]

This reply has been marked as private.

[John Ezra]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.x-nav-wrap {
    background: #444;
    padding: 20px;
}

Hope this helps – thanks!

[Rifft]

Hey,

Thanks a lot for your quick answer.
The background-color is working well but the 20px padding created an issue on the desktop version. (cf screen screen-forum-2) so i had to delete this line.

Also, is there a way to extend the menu to fit the width of the screen (cf screen-forum-3 : its a jpeg version of what i would like to do) ?
What about the margin between the menu item and the line ?

Thanks a lot.

BR

[Rifft]

And here is the screen-forum-2.

[Nabeel A]

Hi again,

Please replace the previous code with this one:

@media screen and (max-width: 979px) {
.x-nav-wrap.mobile {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 64px !important;
    padding: 0 40px !important;
}
}

Let us know how this goes!

[Rifft]

Hi Nabeel, thanks for your help.
Actually, i don’t see any changes with this code.

Can you have a look ?
Do not hesitate to use my credentials and check the B.O. if needed.

Thanks again

[Thai]

Hi There,

Please try with this CSS instead:

@media screen and (max-width: 979px) {
    .x-navbar.x-navbar-fixed-top {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        width: 100%;
    }
}

Hope it helps 🙂

[Rifft]

Hi Thai, thanks for your help.
I’m afraid the problem remains, there is no change with this code as well.

Is there maybe something i’m doing wrong when i use your code ?

Thanks again

[Lely]

Hello BR,

The above code is working as expected. But we need to set navbar height to auto on mobile view. Please update above CSS to this:

@media screen and (max-width: 979px) {
    .x-navbar.x-navbar-fixed-top {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        width: 100%;
    }
   .x-navbar-inner {
    height: auto;
    }
}

Hope this helps.

[Rifft]

Hello Lely,

Thanks for your help.
It still not working on my devices.

Is there something i’m doing wrong ? 🙁

[Rupok]

Hi there,

Thanks for updating. Yes certainly you are doing something wrong. Maybe you didn’t even add this correctly to your Customizer. I just went through your Customizer and added the suggested code by Lely which is working fine as expected. I kept this to make sure it works and you can see this.

Hope this makes sense.

Cheers!

[Rifft]

All right, because i may have read too quickly, i though i have to add this code in appearance > editor > (child)style.css instead of appearance > customizer -_- .

Thanks for your help, all five of you :):):)

[Jack]

You’re most welcome! Glad you got this resolved. 🙂 Let us know if we can be of any further assistance.

[Author]

Posts