sticky menu

[emmanuel]

hello on the mobile website could the menu be a sticky menu see attachment

Attachments:

You must be logged in to view attached files.

[Kieran_SQ]

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

COPY CODE

@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 there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[emmanuel]

sorry but that i place back the menu in the header could the menu be sticky from in the header see attachment

Attachments:

You must be logged in to view attached files.

[Kieran_SQ]

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 there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[emmanuel]

ok if i use my custom positioning of the menu would it be sticky is not could the hold header become fixed(sticky)

[Kieran_SQ]

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 there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[emmanuel]

ok could the hold header be come fixed see attachment

Attachments:

You must be logged in to view attached files.

[Kieran_SQ]

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.

COPY CODE

@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 there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[emmanuel]

hi thanks but on pages the header would be at the back of the texts see attachment

Attachments:

You must be logged in to view attached files.

[Kieran_SQ]

Hi,

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

COPY CODE

@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

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[emmanuel]

it is ok now thanks alot

[Kieran_SQ]

Happy to help 🙂 Do you consider this ticket resolved?

Kieran.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[Author]

Posts