Site logo

Archived topic

Logo in canvas menu

25 replies · Started by _blank on October 8, 2020

Viewing posts 1–15 of 26

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

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?

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

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 :)

Wonderful thank you so much! It looks GREAT :)

Glad to be of help.

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

Can you link me to the page in question?

Thanks :)

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;
    }
}

Looks incredible!! THANK YOU SO SO MUCH :)

No problem :)

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

Hi there,

try adding this CSS:

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

Amazing!!!!! THANK YOU SO MUCH!

This archived topic is closed to new replies.