Docs

[Liberalistene]

Hi

I’m having issues with the dropdown menu on the Integrity theme. I want the dropdown menu to be like in image A (see attachment), and not like it is in image B. The design for the mobile dropdown menu is ok when it is a wider screen, but as the screen size comes closer to a mobile phone, the menu blows up to full-width. I want the “box” to be a fixed width, and not full-width.

This is the page:

https://beta.liberalistene.org/

[Rahul]

Hi There,

Greetings! Thank you for contacting us 🙂

You can add this under Custom > CSS in the Customizer.

.x-navbar .x-container {
    position: absolute;
}

Let me know if this helps.

Thanks!

[Liberalistene]

Thank you, but this makes the background transparent (see image c attached). If I add a background color, the box just fills the entire screen as in image b.

Another problem with the proposed solution: It makes the entire menu left-aligned on big screens (I want it to be centered).

[Liberalistene]

Another problem with the proposed solution: It makes the entire menu left-aligned on big screens (I want it to be centered).

[Paul R]

Hi,

To fix it, you can add this under Custom > Edit Global CSS in the Customizer.

body .x-navbar .x-nav-wrap.mobile {
    position: absolute;
    top: 67px;
    width: 25%;
    padding: 10px;
    background: #4a104a;
    right: 0;
    color: #000 !important;
}

Hope that helps.

[Liberalistene]

Wonderful! Thank you!

[Friech]

You’re more than welcome, glad we could help.

Cheers!

[Author]

Posts