[Resolved] Adding a button to menu. Workaround?

Home Forums Support Adding a button to menu. Workaround?

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #109148
    Simon N.

    Hey,

    Is this possible to add a button to fixed menu with GP?

    Something like this:
    http://factual.com

    It’s a great thing to do in terms of user experience and I want to add this to my site.

    I tried to achieve this with child theme “Mantle” but I failed :S

    Maybe you can point me into right direction to achieve this?

    Thanks!

    P.S. Great theme, with child themes and premium plugins I can achieve almost anything I want 🙂

    #109155
    Tom
    Lead Developer
    Lead Developer

    You could try adding your button HTML into the navigation hook:

    add_action( 'generate_inside_navigation','generate_add_navigation_button' );
    function generate_add_navigation_button()
    { ?>
           <a class="my-custom-button" href="button URL">Button text</a>
    <?php }

    Then you can style your button and float it to the right:

    .my-custom-button,
    .my-custom-button:visited {
          float: right;
          display: inline-block;
          padding: 10px 15px;
          background: #000000;
          color: #FFFFFF;
    }
    
    .my-custom-button:hover {
          background: #FFFFFF;
          color: #000000;
    }

    Adding PHP: http://generatepress.com/knowledgebase/adding-php-functions/
    Adding CSS: http://generatepress.com/knowledgebase/adding-css/

    #227909
    Jan

    Hi Tom,

    I would also like to add a button to my menu. I would like to do what Tyler did on the following website: http://dansplumbingla.com/ where the button is a telephone number which when pressed on a phone will dail that number.

    Where do I find the navigation hook? I added the code to the “After Header” hook and got this error:

    Parse error: syntax error, unexpected ‘}’ in /home/eersdiek/public_html/DLD/wp-content/plugins/gp-premium/hooks/functions/hooks.php(19) : eval()’d code on line 5

    Thank you in advance,
    Jan

    #228065
    Tom
    Lead Developer
    Lead Developer

    Sounds like the code you added has an error in it – you can remove that code.

    You can do this quite easily using the menu. Just add your phone number as a custom link and add the number as the URL like this: tel:123-456-7890

    More info here: https://generatepress.com/knowledgebase/using-menus/

    #228640
    Andrew

    Hey Tom,

    Hope you’re well mate.

    I’m also trying to add a button that sits on the right hand side of my primary nav bar. I’m not sure if I’m doing it right but when I copy and paste the lines of code you provided above into the web hooks section ‘after header content’, it doesn’t work.

    Can you guide me the right way to do it?

    Cheers Tom,

    Andrew

    #228678
    Tom
    Lead Developer
    Lead Developer

    Hi Andrew,

    I think a better method would be to give a custom menu item a unique class: https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

    Then style it with CSS:

    .main-navigation .my-custom-class a {
        border: 1px solid red;
        /* other CSS for your button */
    }
    #251685
    Aaron

    Hi Tom,

    I too would like to add my phone number on the menu, I just tried to create a custom link and it shows as pending. Am I doing something wrong?

    “You can do this quite easily using the menu. Just add your phone number as a custom link and add the number as the URL like this: tel:123-456-7890

    More info here: https://generatepress.com/knowledgebase/using-menus/&#8221;

    Thanks,
    Aaron

    #251698
    Leo
    Staff
    Customer Support

    Hi Aaron,

    Not quite sure what you meant that it shows as pending? In addition to filling in the URL like Tom suggested, you also need to fill the link text/navigation label for the custom link to work.
    Let us know if it’s still not working for you 🙂

    #319989
    Kai Kong

    I inserted the php code above and got an error.
    ——-
    Parse error: syntax error, unexpected ‘}’ in /home2/kaikongchan/public_html/thelearningenglish.com/wp-content/plugins/gp-premium/hooks/functions/hooks.php(22) : eval()’d code on line 5
    ——-

    php code into wp_head hook :
    ———
    add_action( ‘generate_inside_navigation’,’generate_add_navigation_button’ );
    function generate_add_navigation_button()
    { ?>
    Button text
    <?php }
    ——–

    How can I add image button into the menu bar?

    #320074
    Leo
    Staff
    Customer Support

    Sorry are you trying to add a button to the menu?

    If so you shouldn’t need to use the hook.

    If you are trying to add an image, this should work:

    add_action('generate_inside_navigation','generate_navigation_image');
    function generate_navigation_image()
    {
    ?>
    	<div class="navigaiton-image">
    		<img src="THE URL TO YOUR IMAGE" alt="" />
    	</div>
    <?php
    }

    Adding PHP: https://docs.generatepress.com/article/adding-php/

    Let me know 🙂

    #320502
    Kai Kong

    And where exactly that code should go?

    Which file or location in the theme.?

    #320503
    Leo
    Staff
    Customer Support

    Adding PHP: https://docs.generatepress.com/article/adding-php/

    Looks like you are only looking to add a button and not image from this post: https://wordpress.org/support/topic/how-to-add-image-button-into-menu/

    So follow Tom’s reply there. But make sure you ask questions on this forum if you are a premium user 🙂

    #320505
    Kai Kong

    How can I access the <lu> <li> menu bar in the HTML. If i can access the menu bar I can add my button in manually.
    like this.:
    ——-

    <li id="menu-item-419" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-419">
    
        <a href="https://thelearningenglish.com/logout/?_wpnonce=ccc51a45ba">
    
            <img src="http://thelearningenglish.com/wp-content/uploads/2017/05/ChineseBuyNowTextButton2.png" width="50" height="30" border="0" alt="" />
        </a>
    </li>

    ——–
    I got the above to work in opera inspecter, but I need to access to your HTML to get it to work permanently.

    #320508
    Leo
    Staff
    Customer Support
    #320509
    Kai Kong
    add_action('generate_inside_navigation','generate_navigation_image');
    function generate_navigation_image()
    {
    ?>
    	<div class="navigaiton-image">
    		<img src="THE URL TO YOUR IMAGE" alt="" />
    	</div>
    <?php
    }

    I put the above code into Code Snippets but it put my button on top of the menu rather than in the menu.
    Is there any way i can put into the menu?

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