[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
    Posts
  • #1647225
    Jatin

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

    #1647402
    Ying
    Staff
    Customer Support

    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!

    #1647793
    Jatin

    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.

    #1647948
    David
    Staff
    Customer Support

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

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

    #1648218
    Jatin

    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.

    #1648310
    David
    Staff
    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;
    }
    #1648781
    Jatin

    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

    #1648994
    David
    Staff
    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.

    #1649569
    Jatin

    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 ?

    #1649796
    Elvin
    Staff
    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?
    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;
    }
    }

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

    #1650022
    Jatin

    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.

    #1650092
    David
    Staff
    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(
                '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.

    #1650174
    Jatin

    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.

    #1650236
    David
    Staff
    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.

    #1650252
    Jatin

    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.