[Support request] Mobile Navigation Alignment and Extra Symbols

[ghazii]

Hi,

I use Gerneratepress Premium and get stuck with the design of the mobile navigation.

I would like to move the hamburger menu all the way to the left and add some icons for mail, phone, route and Facebook on the right. I’ve already tried it with the element, but I want the elements to be evenly aligned.

In the attached picture you can see the current status on the left and the target status on the right.

Could you help me with specific code suggestions?

Many thanks in advance
Michael

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[ghazii]

Hi Leo,

yes, it´s a Testing-Site for our Company….here is the Link:

https://test.stickyfoil.de/service

[Elvin]

Hi,

You can use the generate_after_primary_menu to place your icons after the primary menu.

Try this PHP snippet.

add_action('generate_after_primary_menu',function(){ 
echo 'your icons HTML code here'; 
});

Just make sure to add hide-on-desktop class to it so it doesn’t appear on desktop.

We then add CSS for the menu toggle so it doesn’t flex-grow throughout the whole nav bar:

@media (max-width:768px){
button.menu-toggle {
    flex-grow: unset;
}
}

[ghazii]

Hi Elvin,

thanks al lot for this help.
But where can i add the PHP-Snippet exactly? And how can i add the hide-on-desktop-class ?

Sorry, but i´m not a crack in things like this 😀

[Leo]

Instead of using the PHP snippet, I would recommend using our built-in hook element module instead:
https://docs.generatepress.com/article/hooks-element-overview/

You should see the generate_after_primary_menu under the hook dropdown list.

Then your content should be something like this:

<div class="custom-icons hide-on-mobile">
    ICONS HTML HERE
</div>

[ghazii]

i´m sitting here since two hours and try to play with the hooks.
A Hook with the name generate_after_primary_menu doesn´t exist!

i have also tried the others like generate_after_mobile_menu_button and so on…with the same result.

[Leo]

Sorry try this instead:
https://www.screencast.com/t/3rO1z7cjU

We will get the hook added to the list 🙂

[ghazii]

when I do it as you describe it, something is actually displayed behind the navigation, but only on the desktop and not on mobile.

When I add “hide-on-desktop” to the class it doesn’t show up on either desktop or mobile: /

[Leo]

Sorry. If you want to show it on mobile only then you should only use the hide-on-desktop class.

I’ve edited the code above.

Also just to confirm, you are trying to add the icons here?
https://www.screencast.com/t/By3SEMELTH

[ghazii]

no Problem, Leo.

I wanted to add the Icons like you can see it in my Picture in the first Post. The right Version.
Hamburger on the left, Icons on the right.

[Leo]

Sorry – in that case, try the generate_menu_bar_items hook:
https://docs.generatepress.com/article/generate_menu_bar_items/

It should make things very easy especially if you are using GenerateBlocks already.

Let me know 🙂

[Author]

Posts