Position, appearance and behaviour of Off Canvas button

Hi there,

go to Customizer > General and change the Icon Type to SVG - this should fix the icons not displaying correctly.

my only options in Customizer > General are "Cache dynamic CSS" and "smooth scroll"
Both unchecked for now.

I have GP Premium 2.2.1

actually 1.9.1
Just updated yesterday

Ok. Just updated the theme instead of just the plugin.
Icons working now.

So still have question about positioning.
1. Aligning the hamburger menu left.
2. Having the X appear where the three bars had been

Aligning the 'X' directly over the Menu Toggle is tricky so lets sort out the desktop toggle position first.

1. change the mobile navigation breakpoint back to 768px
2. create a new blank Menu, with no items in it and assign this to the primary navigation. This will remove the normal desktop nav and just display the off canvas toggle.
3. You can now set the Primary Navigation location to float left or float right of the logo.

Once thats done let me know.

Ok. I did that. In desktop mode it's floating left. In mobile it's centered for some reason

Now add this CSS to the site :

.slideout-navigation.do-overlay .inside-navigation {
    max-width: 1370px !important;
    box-sizing: border-box;
    position: relative;
}
.slideout-navigation.do-overlay .slideout-exit{
    position: absolute !important;
    left: 15px;
    text-align: left !important;
}

For mobile what layout are you going for ?

Works great! Thanks.
I really appreciate this amazing service!

The logo is now jammed all the way to the right. Is that because the menu is floated?

So do you want the log centered ?

And for mobile the same layout ? If so disable the Mobile Header in Customizer > Layout > Header.

Let me know after and ill provide the next couple of changes.

Ok I have turned of mobile header.
yes I would want to logo centered.
Right now, when page switches to mobile the menu is centered and has full width background

And now add this CSS:

.inside-header {
    text-align: center;
}

#masthead .site-logo {
    float: none;
}

.main-navigation {
    position: absolute;
    left: 20px;
    top: 30px;
}

A million thanks!

You're welcome !