[Resolved] Mobile Lightweight Social Icons

Home Forums Support Mobile Lightweight Social Icons

Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #152725
    Heath

    Tom,

    When my website goes to mobile, the lightweight social icons move from the navigation bar (desktop) to embedded in the Menu beneath the categories.

    How do I get the icons to be shown without expanding the mobile menu? I’d like them to be next to the search icon.

    http://www.dadkingdom.com Thanks!

    Keep up the awesome work!!

    Dad Kingdom - powered by GeneratePress

    #152813
    Tom
    Lead Developer
    Lead Developer

    Hi Heath,

    I was writing up a big post on how to do this and realized how messy it was.

    Then I realized others might want to add items to the mobile menu bar, so I thought I would re-structure it to accept more items.

    In GP 1.3.20, you’ll be able to do this:

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

    If you’d like to test it out, shoot me an email to support@generatepress.com and I’ll send you the files 🙂

    #152817
    Heath

    Sounds good! I can try it out once your update pushes through.

    Thanks Tom!

    Dad Kingdom - powered by GeneratePress

    #152826
    Tom
    Lead Developer
    Lead Developer

    If you’d like to try it out before it’s released let me know 🙂

    #153444
    Heath

    Thanks for your help!

    I’ve got v1.3.20 loaded, and I pasted your add_action code into the Edit CSS and that didn’t work. The php portion of the code disappears after I save the stylesheet. Should I be pasting it somewhere else instead?

    Dad Kingdom - powered by GeneratePress

    #153495
    Tom
    Lead Developer
    Lead Developer
    #153551
    Heath

    I installed a child theme like the directions said, but when I pasted your code into Theme Functions and clicked Update File, the site crashed!

    Dad Kingdom - powered by GeneratePress

    #153552
    Tom
    Lead Developer
    Lead Developer

    What’s the error? I tested that snippet on my site before providing it.

    To fix it, access your site via FTP/File Manager (through your host) and find the functions.php file in your child theme directory. Then delete the snippet and save.

    #153553
    Heath

    500 Server Error.

    I’m scrolling through the functions.php now but having trouble finding our code.

    Previously it said:
    <?php
    /**
    * Generate child theme functions and definitions
    *
    * @package Generate
    */

    When I insert your code, should it say this? I think the first attempt, I deleted the existing “<?php”.
    <?php
    add_action( ‘generate_inside_mobile_menu_bar’,’generate_add_mobile_bar_items’ );
    function generate_add_mobile_bar_items()
    {
    ?>
    <i class=”fa fa-facebook”></i>
    <i class=”fa fa-twitter”></i>
    <?php
    }
    /**
    * Generate child theme functions and definitions
    *
    * @package Generate
    */

    Dad Kingdom - powered by GeneratePress

    #153555
    Tom
    Lead Developer
    Lead Developer

    This should be the full file:

    <?php
    /**
    * Generate child theme functions and definitions
    *
    * @package Generate
    */
    
    add_action( 'generate_inside_mobile_menu_bar','generate_add_mobile_bar_items' );
    function generate_add_mobile_bar_items()
    {
    	?>
    	<a href="#"><i class="fa fa-facebook"></i></a>
    	<a href="#"><i class="fa fa-twitter"></i></a>
    	<?php
    }
    #153557
    Heath

    OK… site is back up and running.

    The php code worked, the social icons are on the mobile menu… but how do I get that from the child theme to the main theme. Also, when I reactivate the main theme, ALL MY CSS EDITS ARE GONE! How do I get those back??

    Sorry I’m clueless…

    Dad Kingdom - powered by GeneratePress

    #153564
    Heath

    Nevermind on the CSS. I restored a previously logged revision.

    So, how do I get the php from the child theme to apply to the main theme?

    Thanks!!

    Dad Kingdom - powered by GeneratePress

    #153584
    Tom
    Lead Developer
    Lead Developer

    You want to have the child theme activated at all times – moving the code from the child theme to the main theme defeats the purpose of the child theme.

    Let me know if you need more info 🙂

    #153587
    Heath

    Oh ok. I get it now. Sorry!

    I think what threw me off was my main navigation menu reverted to default pages rather than categories. Fixed that.

    Anyways, one last thing. The social icons are working correctly on mobile navigation bar, but the main navigation social icons are still appearing down in the expanded mobile menu. Can I hide those?

    Thanks!!!

    Dad Kingdom - powered by GeneratePress

    #153591
    Heath

    Nevermind, I put in this CSS. Thanks for all your fantastic help!


    @media
    screen and (max-width: 770px) {
    .social_icon {
    display: none;
    }
    }

    Dad Kingdom - powered by GeneratePress

Viewing 15 posts - 1 through 15 (of 22 total)
  • You must be logged in to reply to this topic.