SOCIAL NETWORKS BUTTONS ON NAV MENU BAR

Try doing this:

.main-navigation .main-nav .sf-menu > li.social_icon {
    display: none !important;
}

Thanks for your instant reply. I tried everything listed on the page, also the "aria-hidden" stuff, but it says like it is. On desktop page everything works fine and on the mobile page, the icons appear on below the other in my menu. I commented everything in the CSS out, so that there is no interference...

Tom, that CSS does the trick if I preface it with the same @media command. (If not, it removes social icons on desktop as well.)

Thank you very much!

Marcus - can you link me to your site?

Heath - right, sorry about that! Glad it's working now :)

Hey Tom, I posted the link already:

https://www.talking-ev.de

Thanks for your help!

Interesting, can you try adding this CSS?:

@media (max-width: 768px) {
    .main-navigation .sf-menu>li.menu-item-float-right {
        display: inline-block !important;
    }
}

Thanks Tom, this does the trick!

One additional question. Is it possible to have the "Menu" and the social icons side by side in the mobile view? What I mean is, the Menu button all the way to the left and the social buttons on the right side of it?

Thanks for all your awesome support, and this awesome theme! I said it in another thread and I'll repeat myself for you: thanks for this highly customizable and affordable theme. You make building my own blog damn easy! Thanks for your awesome work!!

You could use the generate_inside_mobile_menu hook: https://generatepress.com/forums/topic/mobile-lightweight-social-icons/#post-153555

Ok thanks! However I couldn't get it to work mostly because I'm too dum using php. I installed the snippets plugin, created a new snippet, pasted the code from the link you gave me and activated the snippet. Then I added something like:

generate_add_mobile_bar_items();

in my @media (max-width: 768px) code so that it looks like this:

  @media (max-width: 768px) {
      .main-navigation .sf-menu>li.menu-item-float-right {
          display: inline-block !important;
generate_add_mobile_bar_items();
      }
  }

But it didn't work. The icons stay in the dropdown menu on the mobile theme and aren't side by side to the menu in the nav-bar.

Do you have any idea what I'm doing wrong, because I'm pretty shure that I'm doing something wrong!!

Thanks for your help!

The CSS part isn't necessary.

Simply adding the below function and replacing your icons should do it all for you:

add_action( 'generate_inside_mobile_menu_bar','tu_add_mobile_bar_items' );
function tu_add_mobile_bar_items()
{
	?>
	<a href="#"><i class="fa fa-facebook"></i></a>
	<a href="#"><i class="fa fa-twitter"></i></a>
	<?php
}

Deleted the CSS part.

Changed the CSS class for the menu item (i.e.: facebook) from
menu-item-float-right
to
tu_add_mobile_bar_items

Doesn't work like it should. Wasn't it that what you meant by "replacing your icons"?

Marcus, did you look at the thread Tom linked to? (https://generatepress.com/forums/topic/mobile-lightweight-social-icons/#post-153555)

It helps you use a "child theme" and a little php to accomplish what you're trying to do.

This is the part in the function you would edit to add your own icons:

<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>

So you'd replace the # with your URLs, and use the classes for your icons using Font Awesome: http://fontawesome.io/icons/

Hi,

Thanks for the instructions on how to set this up.

What code do I need to enter to change the font size of the sharing icon in the menu?

Try this:

@media (max-width: 768px) {
    .main-navigation .mobile-bar-items a {
        font-size: 20px;
    }
}

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

If this doesn't work can you provide a link to your site? Thanks!