sticky menu on mobile with centered logo & burger menu - Support

Tagged: mobile header, mobile logo, sticky menu mobile

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
September 19, 2023 at 2:52 pm #1419585

Munford
Participant

hi
I’d like to have my logo centered on mobile, with the burger menu on the right.
I tried various codes from threads here but the logo was centering between the left edge and the burger menu and not edge to edge and my anchor menu links were landing too high (under the header). My header is 80px high.

can you help me with this?
thanks
Nancy

September 20, 2023 at 5:27 am #1419639

Ismael
Moderator

Hey Munford,

Thank you for the inquiry.

The site seems to be on maintenance mode. We may need to login in order to properly check the issue. Please provide the login details in the private field.

Best regards,
Ismael

September 20, 2023 at 10:30 am #1419683

Munford
Participant

I took the css that I was using off, so there is no code now centering the logo on mobile.
That’s what I need from you.
login below
thanks

September 21, 2023 at 2:05 am #1419801
Nikko
Inactive Moderator
Hi Munford,

I tried to login using the credentials you gave however it returns this error:
```
Error: The username is not registered on this site. If you are unsure of your username, try your email address instead.
```
Please check.

Best regards,
Nikko
September 21, 2023 at 11:22 am #1419871

Munford
Participant

sorry the correct login is below

September 22, 2023 at 4:30 am #1419974
Nikko
Inactive Moderator
Hi Munford,

Thanks for that, please try to add this CSS code in Enfold > General Styling > Quick CSS:
```
@media only screen and (max-width:767px) {
    .responsive #top .logo {
        width: 100%;
    }

    .responsive #top .logo img {
        margin-left: auto;
        margin-right: auto;
    }

    #top #av-burger-menu-ul {
        vertical-align: top;
    }
}
```
Let us know if it helps.

Best regards,
Nikko
September 22, 2023 at 9:27 am #1420002
Munford
Participant
thanks that worked to center the logo.
Is it possible to make it sticky as well?
- This reply was modified 1 year, 3 months ago by Munford.
September 23, 2023 at 3:14 pm #1420118
Nikko
Inactive Moderator
Hi Munford,

Sure, please replace the code I previously gave with this one:
```
@media only screen and (max-width:767px) {
    .responsive #top .logo {
        width: 100%;
    }

    .responsive #top .logo img {
        margin-left: auto;
        margin-right: auto;
    }

    #top #av-burger-menu-ul {
        vertical-align: top;
    }

    .responsive #top #wrap_all #header {
        position: fixed;
    }  

    .responsive #top #wrap_all #main {
        padding-top: 80px !important;
    }
}
```
Best regards,
Nikko
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.