[Resolved] Logo in canvas menu

[Hannah]

Hello,

My canvas menu area looks like this: http://prnt.sc/uvb1i3
Is there a way that I can add my logo and the user account in the canvas menu area like this: http://prnt.sc/uvb2gp

Thanks so much for your help
Best wishes
Hannah

[David]

Hi there,

logo can be added in Customizer > Layout > Mobile Header.

For the Account Icon we can use a Hook Element – do you have an SVG icon for the account link?

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

[Hannah]

Great it worked. Thank you so much.
The hamburger menu is on the right now though, even though the settings are set to left.

http://prnt.sc/uvdref

For the Account Icon we can use a Hook Element – do you have an SVG icon for the account link?
We are so happy with the cleaness. We decided to leave it with only logo, menu and shop cart.
Thanks a lot 🙂
Best
Hannah

[David]

Add this CSS to position the Menu to the left of the logo:

.main-navigation.has-branding .menu-toggle {
    order: -1;
    margin-right: auto;
}

Then you can remove the Mobile Menu Label text from the Customizer > Layout > Primary Navigation – so it just displays the icon. This will help center your logo as well 🙂

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

[Hannah]

Wonderful thank you so much! It looks GREAT 🙂

[David]

Glad to be of help.

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

[Hannah]

May I ask another question:
Is there a way to center the logo: http://prnt.sc/v7b58d
Thank you so much 🙂
Best wishes
Hannah

[Leo]

Can you link me to the page in question?

Thanks 🙂

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

[Hannah]

https://www.yogajunkies.com

Here you go 🙂

[Leo]

Try this:

@media (max-width: 768px) {
    .site-logo.mobile-header-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 200;
        margin-left: 0 !important;
    }
    #mobile-header .mobile-bar-items {
        margin-left: auto;
    }
}

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

[Hannah]

Looks incredible!! THANK YOU SO SO MUCH 🙂

[Leo]

No problem 🙂

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

[Hannah]

Hello

my canvas menu looks great when directly going on the website:
http://prnt.sc/vi29kp

But I noticed that when scrolling down, the burger menu moves to the middle into the logo:

http://prnt.sc/vi29ps

Can you help me with this?
Thank you so much 🙂
Best Hannah

[David]

Hi there,

try adding this CSS:

.mobile-header-navigation.is_stuck  .menu-toggle {
    order: -1 !important;
}

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

[Hannah]

Amazing!!!!! THANK YOU SO MUCH!

[Author]

Posts