[Resolved] Off Canvas Menu 2 issues

[Randy]

Hello,

I have two issues related to the Off Canvas menu.

1) I have two menus, a Main Menu, set as primary, and an Account menu set as Off Canvas.
The content of the Main Menu is a bunch of navigation pages. The content of the Account menu is a custom HTML widget (no navigation).
The menus show correctly on desktop (almost, except see second issue).
However, on mobile, when I click Main Menu, the Off Canvas menu appears instead (I can’t get to the actual Main menu at all on mobile).

2) Once the first issue is resolved, the next question is how to set width for the Off Canvas menu so that it is the proper width on both desktop and mobile.

My temporary website is shown in the private box below.

[David]

Hi there,

1. In your Customizer > Layout > Primary Navigation have you changed the Mobile Menu Breakpoint ?

2. Add this CSS:

body .offside--right.is-open, body .offside-js--is-right .offside-sliding-element {
    -webkit-transform: translate3d(-500px,0,0);
    -moz-transform: translate3d(-500px,0,0);
    -ms-transform: translate3d(-500px,0,0);
    -o-transform: translate3d(-500px,0,0);
    transform: translate3d(-500px,0,0);
}

body .main-navigation.offside {
    width: 500px;
}

body .offside--right {
    right: -500px;
}

.offside-js--is-right.slide-opened .slideout-overlay button.slideout-exit {
    right: 500px !important;
}

Every value of 500px needs to be adjusted if you want to change its width.

[Randy]

Thanks David!

I’ll try out #2 on the widths. Thank you!

Regarding my setup for #1, these are my settings in case any of them matter:
– In Layout > Header: Use Navigation as Header is CHECKED, Mobile header is on, logo is applied, Sticky is off in this dialog (see below).
– In Layout > Primary Navigation: Mobile Menu breakpoint is set to Empty (blank) (this is the only way I could get the Primary Nav to appear on mobile…if I turn that value up, the Primary Nav disappears on mobile)
– In Layout > Secondary Navigation: Navigation Location is set to “No Navigation” as I am not using the Secondary Nav menu.
– In Layout > Sticky Navigation: Sticky Navigation is On, Transition is Fade, Hide when scrolling down is CHECKED, logo is applied, and Menu Item Height is 50px.
– In Layout > Off Canvas Navigation: Off Canvas Panel is On, Desktop Toggle Label is “Sign In or Join”, Style is Slide, Side is Right, Close Button is Outside, and Menu Item Height is 50px

Url is in private info

Hope this helps determine how to get the Off Canvas “Sign In or Join” button to show up on Mobile.

While we’re at it, by the way, I would prefer that Sign In or Join button to be in the UPPER RIGHT CORNER of the website as the window width narrows (above the Primary Navigation). Currently on desktop, it places the Sign In or Join button BELOW the Primary Navigation as the window narrows.

Thanks for the help

[David]

On Mobile what do you want to display ?
Do you want the Full Desktop Menu displayed or do you want the default Hamburger slide down menu ?

[Randy]

Yes, currently the full desktop Primary Menu shows on Mobile…which is ok, but it may be better if that is a Hamburger menu on mobile. Then, The Off Canvas menu would be accessed with the “Sign In or Join” button in the upper right (which is currently not visible at all on mobile).

[David]

Try the following:

1. Off Canvas Panel – set this to Desktop only. Don’t worry it will still work on Mobile – it just won’t replace the Primary Nav.
2. Set your Mobile Menu Breakpoint back to 768px.

Make those changes and we should have the mobile menu and the signup toggle

[Randy]

I changed those two settings as directed. Unfortunately didn’t work. Still works on fine on desktop, but on mobile (I’m checking with my iphone) now the Primary Nav is shown in the hamburger menu rather than in the header, and I still can’t see/access the off canvas menu.

Don’t know if it’s a conflict with In Layout > Header: Use Navigation as Header is CHECKED, or one of the other settings shown above?

I’d really rather not collapse the navigation into the hamburger menu on header (as triggered by setting Off Canvas Panel to Desktop only)

Just to keep my desired goal(s) in mind, I’d like the following on BOTH desktop and mobile:
– Primary Navigation shown across the top either either to the right of the header logo or just below it
– Sign In or Join link or button in the far upper right corner that will trigger the showing of the Off Canvas Menu

Just can’t figure out which combination of settings to achieve this.
Thanks!

[David]

In your HTML for displaying the signup menu you have the hide-on-mobile class ie.

<span class="menu-bar-item slideout-toggle hide-on-mobile has-svg-icon">

remove that class for the signup to show

I am not sure how well the desktop nav will work on Mobile, its going to wrap across several lines, which could be an accessibility issue when it comes to people trying to tap each link.

[Randy]

Thanks David.

Yep when I go into chrome dev console, go into Mobile view, and search for hide-on-mobile it shows up in

@media (max-width: 768px)
.hide-on-mobile {
display: none!important;
}

When I delete the “display: none!important;” the menu now appears on the mobile view! Yeah!!

So now where is the setting to tell it to not hide-on-mobile?

Or do I need to remove that class using a .css media query and put it in my Simple CSS?

[Randy]

Ok, think I got it!

The trick:

Keep Customizing > Layout > Off Canvas Panel set to “Desktop Only” (even though I want it to show on mobile)

Then add the following .css:

@media screen and (max-width:768px){
.menu-bar-item.slideout-toggle{display: unset !important}
.menu-bar-item.slideout-toggle .gp-icon.pro-menu-bars{display: none !important}
}

(the second .css keeps there from being two hamburger menus on the mobile view…this way just the Main Menu gets the hamburger menu while the Off Canvas Menu just shows as a link).

Looks great on mobile!

Only one more little tweak I’m looking for on this topic and it can be case close:

On the desktop view ONLY, how do I get it to put the Off Canvas menu link ABOVE the menu bar as you shrink the desktop screen width? (Currently, it drop below the Main Nav bar)

Thanks!

[Randy]

OK, got the last part to work too (putting the Off Canvas Menu in the upper right corner above Primary Nav as the desktop window gets narrower):

@media screen and (max-width:1325px) {
#primary-menu {order: 1 !important;}
}

So, I think this thread can be considered solved, unless you see an issue with the changes I made.

[David]

Awesome – glad to hear you got it resolved!

[Author]

Posts