Docs

[yhshin1020]

Hey,

So i was given this piece of code to ensure that the mobile menu was fixed, instead of being overlapped like i have it on larger screens:

@media (max-width: 979px) {
body .x-navbar {
    position:static !important;
}
}

I thought this worked, but I was wrong. This cuts off the dropdown menus on mobile.(see picture)

How do i make it such that the header is not overlapped yet the menu still shows?

Thank you.

[yhshin1020]

This reply has been marked as private.

[yhshin1020]

This reply has been marked as private.

[Lely]

Hi There,

Thank you for the credentials. Please remove that custom CSS and then check this link:http://sevenspark.com/docs/ubermenu-3/settings/menu/submenus. Look for Mega Submenu Max Height to resolve the issue of submenu overflowing off screen.

Please update that CSS to this:

.home .x-navbar {
    position: absolute;
    width: 100%;
    top: 0;
    background-color: rgba(255, 255, 255,0.9);
    box-shadow: none;
    border-bottom: none;
}

Hope this helps.

[yhshin1020]

This reply has been marked as private.

[yhshin1020]

This reply has been marked as private.

[yhshin1020]

changing the code to this:

@media (max-width: 979px) {
 .x-navbar {
    position:relative !important;
}
}

Instead of position: static; fixed the problem.

[Rad]

Glad to hear that! Thanks for sharing 😉

[Author]

Posts