[Resolved] Mobile Hamburger Menu Location

[Cynthia]

What settings in the “customize”area OR added css do I need to change/add to get the “mobile” hamburger menu to be in the upper right hand (or left hand) corner in lieu of the default middle location WITHOUT losing the company logo displayed as it is now.

I have the company logo uploaded in the “Site Identity” area

Screenshot pdf file will be emailed to support.

Currently designing in GP Version 1.7.7

[Leo]

Hi there,

Can you give this CSS a shot?

@media (max-width: 768px) {
    button.menu-toggle {
        position: fixed;
        right: 15px;
        top: 85px;
        text-align: right;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know 🙂

[Cynthia]

Leo

Thank you – that worked!

So I also wanted to make the mobile hamburger larger. What is the CSS for that? without increasing my font size on the desktop navigation?

Thanks

[Tom]

Try changing the CSS Leo provided to this:

@media (max-width: 768px) {
    button.menu-toggle {
        position: fixed;
        right: 15px;
        top: 85px;
        text-align: right;
        font-size: 25px;
    }
}

[Cynthia]

I am having issues with this code while trying to position the mobile hamburger to align-left: (it is showing aligned to the right even though I have it set to align left…..(URL in private field)

@media (max-width: 768px) {
button.menu-toggle {
position: fixed;
right: 5px;
top: 0px;
text-align: left;
font-size:25px;
color:#ffffff;
}
}

[Elvin]

Hi there,

change this: right: 5px;

to this: left: 5px;.

[Cynthia]

Freaken code!! LOL! THANK YOU! Elvin!

[Cynthia]

Thank you

[Elvin]

Glad you got it sorted. No problem. 🙂

[Author]

Posts