use my self-made social icons and change their size

Good morning,
I had a look on my mobile menu and sadly the social icons are not in a row like they should be. How can I bring them back in line?

Best wishes
Yannick

Anything inside the menu will display inside the mobile menu when you open it.

In order to show anything outside of the menu on mobile, you'd need to do something like this: https://generatepress.com/forums/topic/mobile-lightweight-social-icons/#post-153555

The mobile menu has the content I like it to have, the problem is the fb icon is positioned wrong in the mobile menu, seems like the adjustments of the main navigation menu affect the mobile menu. I tried things like:

.mobile-header-navigation .mobile-header-nav li.facebook-icon a,
.mobile-header-navigation .mobile-header-nav li.insta-icon a {
    padding: 0 !important;
}

but I don't know how to fix it.

You can put your custom CSS in a media query to make sure it doesn't apply on mobile:

@media (min-width: 769px) {
    /* non-mobile CSS in here */
}

Is there also a way to only apply to mobile and not desktop?

Yep:

@media (max-width: 768px) {
    /* mobile CSS in here */
}