How to reduce the gap between nav bar social icon

Hello any help

Hi there,

This might take a little bit of tweaking and a couple of attempts.

Can you first remove all the menu-item-float-right class added to each icon?

Then add a class custom-float-right to the Telegram icon.

Then I will attempt some CSS.

Let me know :)

Hello, I have added what you said, now please provide the css to move them to the right side near search and reduce the gap between the icons.

Thanks

Are the social icons in the order you wanted?

If so please add the custom-float-right to the Facebook icon/or the first icon in the list.

Not working safter applying the icons still stays like before.and how to reduce the gap between the icons without effecting the other menus

That's because I haven't provided the CSS yet.

- Remove the custom-float-right classes added to the LinkedIn icon.

- Add narrow-padding as a custom class to all the icons.

- Add this CSS:

@media (min-width: 769px) {
    .main-navigation ul.menu {
        display: flex;
    }
    .main-navigation ul.menu li.custom-float-right {
        margin-left: auto;
    }
    .main-navigation .main-nav ul li.narrow-padding a {
        padding-left: 20px;
        padding-right: 20px;
    }
}

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

Working.Now how to reduce the gap between the icons and on mobile how they show up in a horizontal line

Now how to reduce the gap between the icons

Doesn't look like you've done the second step here?
https://generatepress.com/forums/topic/how-to-reduce-the-gap-between-nav-bar-social-icon/#post-1311560

I have added : https://prnt.sc/ssjc75
also cleared cache from wp rocket and cloudflare

The second step here to add the narrow-padding class is not done:
https://generatepress.com/forums/topic/how-to-reduce-the-gap-between-nav-bar-social-icon/#post-1311560

There is no LinkedIn icon so I added to the telegram icon.
Here is it:https://prnt.sc/ssk05k

The narrow-padding class needs to be added to All the icons as stated here:
https://generatepress.com/forums/topic/how-to-reduce-the-gap-between-nav-bar-social-icon/#post-1311560

Then you need to reduce the 20px padding in the CSS as you see fit.

Awesome thanks dear now it looks good. Only one thing left menu icons in horizontal line on mobile devices

Try this:

@media (max-width: 768px) {
    .main-navigation.toggled .main-nav li.narrow-padding {
        float: left !important;
        display: inline-block !important;
        clear: none;
    }
}