- This topic has 13 replies, 4 voices, and was last updated 5 years, 2 months ago by
.
-
Posts
-
Hi team,
So, I really like the look of the off canvas menu and had planned to use that as my primary navigation menu style. However, after I did that I noticed in the markup that the empty primary menu you have to set up is placed in the correct navigation section…but the off canvas navigation links all show up at the very bottom of the markup below the footer. So, this doesn’t work for me for a primary menu due to accessibility reasons.
So, I thought, no worries I’ll just use the mobile menu and set it to a super high breakpoint and style it like the off canvas menu…as the mobile menu adds the navigation links in the correct place in the markup. But, for some reason, I can’t figure out which css selectors to target to make the mobile menu look like the off canvas menu. I’ve tried all the ones I can see but clearly I’m misreading the css because it’s not working. The off canvas css was easy to target and change. Not sure why I’m having trouble finding the right selectors for the mobile menu.
I’m on latest GP Premium theme. Using a child theme to customize. No plugins except GenerateBlocks. No caching applied anywhere (I always clear my cache anyway.) I have the navigation set to float: right. As I want it to be located on the right. I did tweak the off canvas menu so the sub menu items are open and always visible (removed the down arrow.) Need to do that for the mobile menu as well. And I also removed the full screen dark overlay as I want people to still see the content of the page when they click to open the menu. Other than that just want the mobile menu to look like the off canvas one. I feel like I’ve the lost plot over here because this should be such an easy thing to do. I think my tired brain is rebelling! 🙂
Any and all help greatly appreciated!
R.
Customer Support
Hi there,
Any chance you can link us to the site in question?
You can use the private information field.
Let me know 🙂
Hi! Thanks for the quick reply!
Well, the site is in early production behind a password protected folder. Aside from adding a logo and playing with the customizer colours etc, I haven’t done anything but create a bunch of empty pages and set up the primary navigation menu. I wanted to get the navigation out of the way first.
I don’t have a bunch of styles etc yet on my child theme stylesheet to worry about. Can easily remove the few styles I have and add your styles first to get it working right. If that helps. 🙂
I need to see the site in order to help unfortunately.
but the off-canvas navigation links all show up at the very bottom of the markup below the footer.
This isn’t normal behavior.
Hi Leo,
Okay, I took the password protection off. So, you can see the site now. I also removed all my styles. So, there are no styles from me on the site (just the customizer colour settings etc.) And you can see if you take a look at the source code. The menu toggles for the menus show up under the navigation section…but the actual html menu doesn’t show up until after the footer in the markup.
Now, under the menu section, I followed previous advice on the GP forum for having only the off canvas menu for desktop by selecting it for my menu. I then added an empty menu and designated it as the primary menu (I don’t like this solution personally…but without it the primary menu shows up with the off canvas menu on desktop.)
Primary navigation menu is set to float:right. The mobile menu breakpoint is the default 768px. Off canvas menu is set to: on.
Let me know if you need other information! Cheers!
P.S. The reason I’m concerned about the off canvas menu links all showing up after the footer in the HTML markup is for accessibilty reasons. I’ll be adding other links in the content area and the footer. So, I need the primary menu navigation links to show up in the nav section in the markup otherwise anyone navigating the site with a screen reader or by keyboard only would have to go through all the other links first before finding the menu links.
Visually they show up in the right place on the page.
Customer Support
Hi there,
do you have any examples of where you have experienced an issue using the Off Canvas with accessible technologies?
As the positioning of the HTML doesn’t really matter as the Navigation is opened via the menu toggle and the panel is given focus whilst it is open.
let us know.
Hi David,
Thanks for your reply!
This is the first time I’ve used GeneratePress. I generally don’t deal with WordPress sites (which is why I chose to buy the GP theme to customize off.) So, I don’t have any examples for you. But here’s the base information I usually follow when it comes to accessibility (visual vs DOM): https://www.w3.org/TR/WCAG20-TECHS/C27.html.
Having the DOM match the visual is the best way to go.
Also, the other issue with the off canvas menu is the fact you have to create an empty primary menu for desktop. This adds an extra menu that is designated with aria-controls=”primary-menu.” So, in the markup there are now two menus with: aria-controls=”primary-menu.” But one is empty and leads nowhere.
Now consider that I’ll probably be adding other secondary menus in the content area on different pages and footer navigation menus. Suddenly, you have a number of nav elements with two designated as “primary-menu.” One empty and one that comes after all the other nav elements on the page.
This would get confusing for people using screen readers or other voiceover tech.
That’s why I just wanted to use the mobile menu only as my navigation and style it like the off canvas menu. That way there will be only one menu designated with aria-controls=”primary-menu” on the page and it will be listed in the same order as it is displayed visually.
Hope that makes sense.
So, any help with targeting the correct css to make the mobile menu look like the off canvas menu would be greatly appreciated! 🙂
Lead Developer
Hi there,
The actual location of the HTML element shouldn’t matter in this case, as we use javascript to focus on the menu links in the off-canvas area when the area is toggled.
As for the empty menu – I could see that being an issue. You can always toggle the panel with your own custom HTML element if it has the
slideout-toggleclass.For example:
<button class="slideout-toggle">Toggle!</button>All that being said, you can of course style the mobile menu to act like the off-canvas panel. If you’d like to set up the structure, we’d be happy to point you in the right direction with the CSS 🙂
Hi Tom,
Thanks so much for replying!
Yeah, I think I’d like to simply style the mobile menu like the off canvas (with some tweaks.) That way, I can use it as the main menu for everything…but if my colleagues decide later they would prefer a more standard top bar menu for desktop I can simply change the media breakpoint. It gives me greater flexibility…plus then I don’t have to worry about the empty menu issue.
So yeah, I already have the menu structure set up. And I’ve put it back to be the “primary menu” under menus. And I turned off “off canvas” in the customizer. And I have primary navigation set to float:right (I want it to all be on the right side.) So, all I need now is the css magic for the mobile menu. For some reason I was having trouble finding the correct classes in the theme to target just the mobile menu.
But basically, I wanted it to ressemble the off canvas menu but without the full screen background overlay (I had taken that off.) I want people to be able to see the page content still when they click the menu. I also wanted the sub-menu items to be open and visible without the dropdown arrows (I had removed them also for the off canvas menu originally.)
If you could help me with that, that would be awesome! 🙂
Oh and I’m using a child theme. So, I can just add it all to the child theme css. Cheers!
P.S. I also want to style the menu toggle separately as well. If you could point me in the direction of that css class as well, that would be great. 🙂
For the faux off canvas panel you can try this CSS:
@media(max-width: 768px) { /* Fix mobile navigation and position off canvas */ .site-header.has-inline-mobile-toggle #site-navigation { position: fixed; width: 250px; margin-top: 0; right: 0; top: 93px; /* height of site header */ height: calc(100vh - 93px); padding: 20px 0; z-index: 1000; transform: translate3d(250px, 0, 0); transition: transform 0.3s ease-in-out; } /* Translate navigation on cavas on mobile toggle */ .site-header.has-inline-mobile-toggle #site-navigation.toggled { transform: translate3d(0, 0, 0); } /* Force sub menus open */ .main-navigation.toggled .main-nav ul ul { position: relative; top: 0; left: auto !important; right: auto !important; width: 100%; pointer-events: auto; height: auto; opacity: 1; display: block; visibility: visible; float: none; padding-left: 10px; } /* Remove sub-menu toggles */ .main-navigation.toggled .menu-item-has-children .dropdown-menu-toggle { display: none; } }Hi David,
Thank you! That’s perfect!
And now I know which classes to target I was able to tweak it to perfection for desktop and mobile (I like 100% width for mobile.)
Super appreciate everyone’s help!
🙂
Awesome – so glad to hear that!
- You must be logged in to reply to this topic.
