[Resolved] Social Follow Icons on the main menu

Home Forums Support Social Follow Icons on the main menu

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1482468
    Rohan Verma

    Hi, currently, I’m using the social follow icon on the main menu but I want similar icons like this: https://prnt.sc/uwu6jd with the divider between search bar.

    My site URL: gadgetheadline.com

    #1482716
    Leo
    Staff
    Customer Support

    Hi there,

    Try this CSS:

    .main-navigation li.search-item {
        border-right: 1px solid #fff;
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    #1482931
    Rohan Verma

    1. Divider line is quite big.
    2. I want similar look where the search icon will appear at right side. Here in my case, the search icon on the left side.

    #1483156
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

    .main-navigation .main-nav ul li.search-item a:before {
        content: '';
        position: absolute;
        left: 0px;
        border-left: 1px solid #fff;
        display: block;
        top: 15px; 
        bottom: 15px;
    }

    Then edit the Menu and remove the menu-item-float-right class from both of the social icon menus.

    #1483754
    Rohan Verma

    Thanks. Now, how can I reduce the social icon padding for all devices?

    #1483907
    Elvin
    Staff
    Customer Support

    Hi,

    Thanks. Now, how can I reduce the social icon padding for all devices?

    You can adjust that through this CSS:

    .main-navigation .main-nav ul li a {
        padding-left: 20px;
        padding-right: 20px;
        line-height: 60px;
    }

    This is your current setting for the nav icons. As you can see, there’s no top and bottom padding. You’ll have to change the line-height if you want to change the “vertical spacing”.

    Note: after doing changes, make sure to clear cache. Your CSS is being cached by autoptimize so you may have to clear cache for the changes to reflect on the live site.

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

    #1484119
    Rohan Verma

    Yes cache cleared and the code worked. But the category menu item on the first left seems too close than other category items.

    Check the screenshot: https://prnt.sc/uxhaye

    #1484624
    David
    Staff
    Customer Support

    You would need to give each of your Social Icon menu items a CSS class eg. social-icon then you can target that with this CSS instead:

    .main-navigation .main-nav ul li.social-icon a {
        padding-left: 20px;
        padding-right: 20px;
        line-height: 60px;
    }

    This won’t affect the normal menu items.

    #1489078
    Rohan Verma

    Thanks, it’s working.

    Now, how can I adjust the social icons horizontally on the mobile menu?

    #1489142
    Leo
    Staff
    Customer Support

    Your site looks like this to me right now:
    https://www.screencast.com/t/n8ndBkI0dZhD

    Can you try clear and disabling WP Rocket and any other caching plugins you are using first?

    Let me know 🙂

    #1490950
    Rohan Verma

    Yes. Can you check now for the mobile view?

    #1491560
    David
    Staff
    Customer Support

    Try adding this CSS:

    #mobile-header.toggled .main-nav > ul {
        display: flex;
        flex-wrap: wrap;
    }
    
    .main-navigation.toggled .main-nav li:not(.social-icon) {
        flex: 1 0 100%;
    }
    .main-navigation.toggled .main-nav li.social-icon {
        flex: 0 0 10%; /* Adjust 10% to increase space around each icon */
    }
    .main-navigation.toggled .main-nav li.social-icon a {
        padding-left: 10px;
        padding-right: 10px;
        text-align: center;
    }
    #1496978
    Rohan Verma

    Thanks. Looks good.

    #1497363
    David
    Staff
    Customer Support

    Glad we could be of help

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