[Resolved] Mobile Lightweight Social Icons

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

[Tom]

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 🙂

[Heath]

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

Thanks Tom!

[Tom]

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

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

[Tom]

You should be adding it like this: https://generatepress.com/knowledgebase/adding-php-functions/

Let me know 🙂

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

[Tom]

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.

[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
*/

[Tom]

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
}

[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…

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

[Tom]

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 🙂

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

[Heath]

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

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

[Author]

Posts