- This topic has 15 replies, 2 voices, and was last updated 4 years, 2 months ago by David.
-
AuthorPosts
-
January 17, 2020 at 5:12 pm #1135616Paul
Hi guys
Couple of queries for you regarding the mobile menu…
1. At around 1015 px browser width the mobile menu displays. In the ‘Services & Programs” section, the child levels eg: “Therapy & Skills…” should display its own drop down arrow to its child pages.
The drop down arrows for these menus items don’t seem to display until browser with is around 766 px.
Is there a way to fix this?
2. Also, for the fly-out mobile panel, is there a way to increase the % width of this based on the mobile viewport?
Thank you.
January 18, 2020 at 2:42 am #1135810DavidStaffCustomer SupportHi there,
1. You will need to edit the Mega Menu CSS, find this rule:
nav .main-nav .mega-menu .sub-menu .menu-item-has-children .dropdown-menu-toggle { display: none; }
and remove it from the
@media(min-width: 769px) {}
and place it in a new@media(min-width: 1015px) {}
query.2. I provide some CSS here for adjusting the width of the Off Canvas panel ( Right hand opening ):
You will need to adjust the media query to suit and swap out the
200
measurement to the desired sizes.January 18, 2020 at 7:51 pm #1136514PaulThanks David.
1. I got the arrows working fine now ๐
2. I used that menu width code and changed 200 to 400. Worked well on desktop, however on mobile it forces the off-canvas menu to display jammed on open all the time. For now I’ve commented that code out.
January 19, 2020 at 6:01 am #1136756DavidStaffCustomer Support2. Can you share the CSS that you added?
January 19, 2020 at 4:45 pm #1137332PaulThanks David
That worked – not sure how that code got in there.
Cheers
January 19, 2020 at 5:40 pm #1137354PaulSorry – ignore my comment above, wrong post. Here is the code….
/* Mobile menu width */
@media (max-width: 768px) {
.main-navigation.offside {
width: 400px;
right: -200px;
}
.offside–right.is-open, .offside-js–is-right .offside-sliding-element {
-webkit-transform: translate3d(-200px,0,0);
-moz-transform: translate3d(-200px,0,0);
-ms-transform: translate3d(-200px,0,0);
-o-transform: translate3d(-200px,0,0);
transform: translate3d(-200px,0,0);
}
.offside-js–is-right.slide-opened .slideout-overlay button.slideout-exit {
right: 400px;
}
}January 19, 2020 at 9:12 pm #1137436PaulIdeally looking at a responsive, full-width mobile menu similar to this example.
Thanks
January 20, 2020 at 2:21 am #1137596DavidStaffCustomer SupportAll unit measurements need to be the same in that code.
Try this – it will make off canvas 400px on tablet and full width on mobiles:/* Tablet devices 400px wide off canvas */ @media (max-width: 768px) and (min-width: 421px) { .main-navigation.offside { width: 400px; right: -400px; } .offside--right.is-open, .offside-js--is-right .offside-sliding-element { -webkit-transform: translate3d(-400px,0,0); -moz-transform: translate3d(-400px,0,0); -ms-transform: translate3d(-400px,0,0); -o-transform: translate3d(-400px,0,0); transform: translate3d(-400px,0,0); } .offside-js--is-right.slide-opened .slideout-overlay button.slideout-exit { right: 400px; } } /* Mobiles full width off canvas */ @media (max-width: 420px) { .main-navigation.offside { width: 100vw; right: -100vw; } .offside--right.is-open, .offside-js--is-right .offside-sliding-element { -webkit-transform: translate3d(-100vw,0,0); -moz-transform: translate3d(-100vw,0,0); -ms-transform: translate3d(-100vw,0,0); -o-transform: translate3d(-100vw,0,0); transform: translate3d(-100vw,0,0); } .offside-js--is-right.slide-opened .slideout-overlay button.slideout-exit { right: 100vw; } }
January 20, 2020 at 2:58 am #1137647PaulThank you so much David – will play with this a little.
Cheers
January 20, 2020 at 3:39 am #1137681DavidStaffCustomer SupportYou’re welcome
January 23, 2020 at 7:43 pm #1142165PaulHi David
All working well here. Couple of usability tweaks we need to make for the mobile menu – if you could please let me know what’s possible…
1. As per this mock, I would like to add a 1px grey line separator between menu items.
2. Also for mobile menu, for child menu items eg: everything inside ‘Services…’, is there any way of indenting menu items to the right slightly?
Thank you.
January 24, 2020 at 4:54 am #1142402DavidStaffCustomer Support1. To add underline to menu items with children:
#generate-slideout-menu .slideout-menu li.menu-item-has-children { border-bottom: 1px solid #ccc; }
2. Add indent and reduce sub menu item font size to accommodate indent – may need adjusting
#generate-slideout-menu.main-navigation .main-nav ul ul > li a { padding-left: 20px; } .slideout-navigation.main-navigation .main-nav ul ul li a { font-size: 16px !important; }
January 24, 2020 at 1:48 pm #1143070PaulThanks David
Those both work great.
Just on the underline, how do I get those dividers to display on all menu items. Currently they only display on items that have child menus.
Thank you
January 24, 2020 at 3:14 pm #1143107DavidStaffCustomer SupportIn the first piece of CSS change:
#generate-slideout-menu .slideout-menu li.menu-item-has-children {
to:
#generate-slideout-menu .slideout-menu li {
January 24, 2020 at 6:06 pm #1143161PaulThat worked beautifully David – thanks again ๐
-
AuthorPosts
- You must be logged in to reply to this topic.