[Support request] Mobile Navigation Alignment and Extra Symbols

Home Forums Support [Support request] Mobile Navigation Alignment and Extra Symbols

Home Forums Support Mobile Navigation Alignment and Extra Symbols

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1533685
    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.

    Mobile Navigation

    Could you help me with specific code suggestions?

    Many thanks in advance
    Michael

    #1533784
    Leo
    Staff
    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 🙂

    #1533797
    ghazii

    Hi Leo,

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

    https://test.stickyfoil.de/service

    #1533987
    Elvin
    Staff
    Customer Support

    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;
    }
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1534817
    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 😀

    #1535166
    Leo
    Staff
    Customer Support

    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>
    #1535201
    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.

    #1535237
    Leo
    Staff
    Customer Support

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

    We will get the hook added to the list 🙂

    #1535263
    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: /

    #1535287
    Leo
    Staff
    Customer Support

    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

    #1535699
    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.

    #1536548
    Leo
    Staff
    Customer Support

    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 🙂

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.