[Support request] Social Icons

Home Forums Support [Support request] Social Icons

Home Forums Support Social Icons

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
  • #1647225

    How to have social sites icons on the header bar as per the examples and screenshots.

    Customer Support

    Hi Jatin,

    The social icons can be added by the generate_menu_bar_items hook element.

    Hope it helps!


    How can I place Facebook, LinkedIn and Twitter icons. I have provided the sample site to you. Please let me know.

    I checked the link and it has a link to html file but not sure how to add the icons. Please can you help with the code.

    Customer Support

    The example site is adding social icons to its Menu items.
    This article explains:



    Works fine. But how to align right after the search icon.
    I used menu-item-float-right class in the menu item but has no affect.

    Customer Support

    In that case you would have to use a Hook Element or Block Element and Hook them into the generate_menu_bar_items hook.

    For the hook element you can use some simple HTML for each icon eg.

    <a class="menu-bar-social hide-on-mobile" href="social_icon_url">your icon HTML here</a>

    The hide-on-mobile class in the HTML is optional.

    Then some CSS to add some padding to the icon:

    a.menu-bar-item {
        padding-left: 10px;
        padding-right: 10px;

    Sorry I thought it should be easier to place the menu to the right side. I dont understand this one. I have given my site address in the box.

    Do I have to remove the menus items which I added for FB, twitter and linked in

    or second option may be if i could move the icons a little bit further down

    Customer Support

    With the Flexbox structure the Search Icons site outside of the Menu, so you can’t position a menu item after it.

    You would need to use the method i explained above.


    ok, can you please provide the code to add to the hook element and how will i get the icons:
    “your icon HTML here” what should be used here. i can use font awesome class but if you can provide the code and where to add the class ?

    Customer Support

    Hi there,

    I’m not sure I fully understand what you’re trying to achieve.

    To clarify: Are you trying to do something like this?

    If so, try adding this CSS:

    li.menu-item.menu-item-2446 {
        margin-left: auto;
    div#primary-menu {
        flex: 1 1 auto;

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


    Hi Elvin

    I want to achieve as per the screenshot. I want to move the Facebook, linkedin, Twitter icons after the search icon as per the screenshot.

    Customer Support

    OK – leave it how you have it so far, then add this PHP Snippet:

    add_action( 'wp', function() {
        remove_action( 'generate_menu_bar_items', 'generate_do_navigation_search_button' );
    } );
    add_filter( 'wp_nav_menu_items', function( $nav, $args ) {
        if ( 'enable' !== generate_get_option( 'nav_search' ) ) {
            return $nav;
        if ( isset( $args->theme_location ) && 'primary' === $args->theme_location ) {
            $search_item = apply_filters(
                    '<li class="search-item menu-item-align-right"><a aria-label="%1$s" href="#">%2$s</a></li>',
                    esc_attr__( 'Open Search Bar', 'generatepress' ),
                    generate_get_svg_icon( 'search', true )
            return $nav . $search_item;
        return $nav;
    }, 10, 2 );

    It will move the search icon inside the menu – once its there we can provide some CSS to move the icons over etc.


    Hi David,

    Thanks, Can you please figure out how this site is using it. Its also generatepress.
    I am not sure this guys / site achieved this after custom code or so much complexity.

    Customer Support

    the site was built before GP 3.0 – its still using the Old Floats structure which placed the Search icon inside the navigation menu.


    ok i did that whats next. You can check on my site that i have placed the code.

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