- This topic has 89 replies, 14 voices, and was last updated 4 years, 11 months ago by
Ian.
-
AuthorPosts
-
January 31, 2017 at 10:29 am #272457
Tom
Lead DeveloperLead DeveloperTry 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-developmentJanuary 31, 2017 at 10:30 am #272458Marcus
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…
January 31, 2017 at 10:53 am #272465Heath
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
January 31, 2017 at 1:26 pm #272550Tom
Lead DeveloperLead DeveloperMarcus – 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-developmentJanuary 31, 2017 at 8:35 pm #272645Marcus
January 31, 2017 at 11:12 pm #272659Tom
Lead DeveloperLead DeveloperInteresting, 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-developmentJanuary 31, 2017 at 11:27 pm #272673Marcus
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!!
February 1, 2017 at 9:47 am #272906Tom
Lead DeveloperLead DeveloperYou 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-developmentFebruary 1, 2017 at 12:35 pm #272983Marcus
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!
February 1, 2017 at 4:25 pm #273041Tom
Lead DeveloperLead DeveloperThe 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-developmentFebruary 2, 2017 at 4:54 am #273202Marcus
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”?
February 2, 2017 at 5:55 am #273215Heath
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
February 2, 2017 at 9:01 am #273330Tom
Lead DeveloperLead DeveloperThis 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-developmentApril 27, 2017 at 10:25 am #311125Mustafa
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?
April 27, 2017 at 12:48 pm #311171Leo
StaffCustomer SupportTry 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/ -
AuthorPosts
- You must be logged in to reply to this topic.