[Resolved] Mobile Menu

[kernfunke]

Can you get the search in the mobile menu? BUT NOT in the main menu? So in such a way that it is only displayed on mobile?
Is it possible to mark the main points in bold and indent the submenus?
Can the slide-out be made a bit larger so that it takes up around 90% of the screen width?

[Ying]

Hi there,

Yes is the answer to all your questions 🙂

Can you link us to your site so we can see your current structure?

You can use the private info field for that.

[kernfunke]

Hi Ying,
have you received the “private information” I had sent?

[Ying]

No, I haven’t.

Where did you send it to?

You can use the private info field in this forum for private info, it will only be seen by the support team:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[kernfunke]

Hi there,
here comes the information on private…

[David]

Hi there,

1. Adding the Search Field to Off Canvas

Go to Appearance > Elements
Create a new Element > Block and set the Type to Hook:
https://docs.generatepress.com/article/block-element-hook/

Add a Search Block to the content
Set the Hook to: inside_slideout_navigation
Publish those changes.

This will add the search to the top of the Off Canvas Panel.

2. Add the off set to the Sub Menus with this CSS:

.slideout-navigation.main-navigation .main-nav ul ul {
    padding-left: 10px;
}

3. Font styles in Customizer > Typography there are options for the OFf Canvas Menu and Sub Menus

4. Do you still want the off canvas to be wider ?

[kernfunke]

Hi there,

can you help me with the above mentioned instruction:
“Add a Search Block to the content”
How? And where?

[David]

When you create a new Block Element in the Block Editor, choose the add new block ( + icon ) and in the search field provided type: Search. It should bring up the Search Block to add to the page.

[kernfunke]

Thanks it worked out.

Now the next step:
2. Add the off set to the Sub Menus with this CSS:

.slideout-navigation.main-navigation .main-nav ul ul {
padding-left: 10px;
}

where exactly do I enter this code?

[David]

That is CSS.
Go to Customizer > Additional CSS and paste the code in the text area provided.
If there is already some CSS in there, place your cursor on the first line and hit enter to add some linebreaks so you can paste in that code.

[kernfunke]

Ok. I tried that before but it doesn’t work or show any effect.

Here again the full code. Last CSS code right at the bottom:

/*off canvas mobile menu full screen*/
.slideout-overlay {
background: #3DB5E6;
}

.offside–right.is-open {
right: auto;
left: calc(50% – 132.5px);
transform: translate3d(0,0,0);
}

.nav-aligned-right.nav-below-header .main-navigation.slideout-navigation {
text-align: left;
}

#generate-slideout-menu .slideout-menu li {
text-align: left;
}

/* Solid lines
#generate-slideout-menu .slideout-menu li a {
border-bottom: 1px solid #fff;
}
End Solid lines*/

.offside-js–is-right.slide-opened .slideout-overlay button.slideout-exit {
right: 0;
}

.main-navigation.slideout-navigation {
background: transparent;
padding-top: 10%;
}

li.slideout-toggle {
position: absolute;
right: 0;
}

.main-navigation .main-nav ul li.slideout-toggle a {
padding: 15px;
line-height: normal;
}

.inside-navigation {
position: static;
}

.slideout-navigation.main-navigation .main-nav ul ul {
padding-left: 10px;
}

[David]

This CSS:

.main-navigation .main-nav > ul > li.menu-item-has-children > a .dropdown-menu-toggle {
    display: none;
}

is also hiding the slideout navigation submenu toggles so you cannot open them, change that CSS to this:

.main-navigation:not(.slideout-navigation) .main-nav > ul > li.menu-item-has-children > a .dropdown-menu-toggle {
    display: none;
}

[kernfunke]

Thanks again for your great and detailed help.

Now I’ve just got three minor issues left:

1. How do I get this search bar and the menu to full screen width on mobile? At the moment it just covers a little more than half of the screen. (Please check the information I had posted in the private section)

2. The Closing “X” should be outside the search bar and aligned to it and inside the search bar at the end there has to be a search icon.

3. If I would activate the “solid lines” they would appear under each menu item. But according to the design pattern I need the lines only between “Über uns” and “Mein Konto” and another one between “Warenkorb” and “Impressum”. How can I do that?

[David]

1, Add this CSS for full width slideout nav:

#generate-slideout-menu.main-navigation.offside {
    width: 100%;
}
#generate-slideout-menu.main-navigation.offside--left {
    left: -100%;
}
#generate-slideout-menu.main-navigation.offside--left.is-open {
    transform: translate3d(100%,0,0);
}

1.1 For the search to reach that width – can you first edit the element and select the Container Block the search is inside of an in Sidebar > Advanced > Additional CSS classes add: oc-search-container.

Once thats in place you can add this CSS to your site:

.oc-search-container {
    width: calc( 100% - 30px);
}

2. In the Customizer > Layout > Off Canvas set the Close button to inside.

2.1 Adding the icon should be an option in the Search Blocks toolbar.

3. Can you explain ?

[kernfunke]

Thanks a lot. It worked out well.

To No. 3
If you look at the offcanvas code above, there is a part which I had deactivated:

/* Solid lines
#generate-slideout-menu .slideout-menu li a {
border-bottom: 1px solid #fff;
}
End Solid lines*/

If I would activate that again, it would show solid lines under each menu item. But I only need the solid lines at two specific places:

Only between “Über uns(About us)” and “Mein Konto(MyAccount)” and another one between “Warenkorb(Cart)” and “Impressum(Imprint)” (See the design pattern in private information)

[Author]

Posts