sticky menu

Hi,

This is possible with CSS but it won’t be intelligent, that is to say it won’t automatically preposition when scrolled and will maintain it’s current position on the screen.

If you would still like to do this please try the below custom CSS

@media only screen and (max-width: 767px) {
.contain-to-grid .top-bar {
    width: 95%;
    margin-left: auto;
    position: fixed;
    margin-right: auto;
    left: 2%;
}
}

Thanks,

Kieran

Hi,

When I looked your site appeared as per your first screenshot and the CSS was for the top bar in that state. Since then it looks like you have enabled some custom CSS that already sets the custom positioning of the element to absolute and therefore you will not be able to use a position of fixed.

In this case it will be either one or the other. You can use the CSS that I provided with the site in its initial state or use your custom positioning of the menu without it being fixed.

Thanks,

Kieran

Hi,

I’m sorry but I do not understand the question. Do you want a different element to be sticky than the small purple colored hamburger menu?

If you use your custom positioning for this menu you cannot also use fixed for the same purple color hamburger menu.

Kieran.

Hi,

You could try the below CSS but given you have many other customizations and plugins this may not play well with them, test thoroughly.

@media only screen and (max-width: 767px) {
#header {
    position: fixed !important;
    background-color: #b600e7;
    width: 100%;
}
section:nth-child(2) {
    margin-top: 50px;
}
}

Kieran

Hi,

You can add a z-index of 999 to the CSS I supplied above, the corrected CSS for this is

@media only screen and (max-width: 767px) {
#header {
    position: fixed !important;
    background-color: #b600e7;
    width: 100%;
    z-index: 999;
}
section:nth-child(2) {
    margin-top: 50px;
}
}

Kieran

Happy to help 🙂 Do you consider this ticket resolved?

Kieran.