- This topic has 15 replies, 2 voices, and was last updated 11 months, 3 weeks ago by
David.
-
AuthorPosts
-
January 17, 2020 at 5:12 pm #1135616
Paul
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 #1135810David
StaffCustomer 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.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/January 18, 2020 at 7:51 pm #1136514Paul
Thanks 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 #1136756David
StaffCustomer Support2. Can you share the CSS that you added?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/January 19, 2020 at 4:45 pm #1137332Paul
Thanks David
That worked – not sure how that code got in there.
Cheers
January 19, 2020 at 5:40 pm #1137354Paul
Sorry – 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 #1137436Paul
Ideally looking at a responsive, full-width mobile menu similar to this example.
Thanks
January 20, 2020 at 2:21 am #1137596David
StaffCustomer 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; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/January 20, 2020 at 2:58 am #1137647Paul
Thank you so much David – will play with this a little.
Cheers
January 20, 2020 at 3:39 am #1137681David
StaffCustomer SupportYou’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/January 23, 2020 at 7:43 pm #1142165Paul
Hi 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 #1142402David
StaffCustomer 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; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/January 24, 2020 at 1:48 pm #1143070Paul
Thanks 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 #1143107David
StaffCustomer SupportIn the first piece of CSS change:
#generate-slideout-menu .slideout-menu li.menu-item-has-children {
to:
#generate-slideout-menu .slideout-menu li {
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/January 24, 2020 at 6:06 pm #1143161Paul
That worked beautifully David – thanks again π
-
AuthorPosts
- You must be logged in to reply to this topic.