[Resolved] Social Follow Icons on the main menu

[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

[Leo]

Hi there,

Try this CSS:

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

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

[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.

[David]

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.

[Rohan Verma]

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

[Elvin]

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.

[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

[David]

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.

[Rohan Verma]

Thanks, it’s working.

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

[Leo]

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 🙂

[Rohan Verma]

Yes. Can you check now for the mobile view?

[David]

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;
}

[Rohan Verma]

Thanks. Looks good.

[David]

Glad we could be of help

[Author]

Posts