Social Icons

Hi Jatin,

The social icons can be added by the generate_menu_bar_items hook element.
https://docs.generatepress.com/article/generate_menu_bar_items/

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.

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

https://docs.generatepress.com/article/adding-icons-to-menu-items/

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.

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

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 ?

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?
https://share.getcloudapp.com/Z4u6L6JK

If so, try adding this CSS:

@media(min-width:769px){
li.menu-item.menu-item-2446 {
    margin-left: auto;
}

div#primary-menu {
    flex: 1 1 auto;
}
}

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.

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(
            'generate_navigation_search_menu_item_output',
            sprintf(
                '<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.

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.