[Resolved] SOCIAL NETWORKS BUTTONS ON NAV MENU BAR

[Tom]

Try doing this:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Marcus]

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…

[Heath]

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!

Dad Kingdom - powered by GeneratePress

[Tom]

Marcus – can you link me to your site?

Heath – right, sorry about that! Glad it’s working now 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Marcus]

Hey Tom, I posted the link already:

https://www.talking-ev.de

Thanks for your help!

[Tom]

Interesting, can you try adding this CSS?:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Marcus]

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!!

[Tom]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Marcus]

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!

[Tom]

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
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Marcus]

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”?

[Heath]

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.

Dad Kingdom - powered by GeneratePress

[Tom]

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/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mustafa]

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?

[Leo]

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!

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

[Author]

Posts