[Resolved] Font Awesome Phone Icon in Mobile Menu not appearing

[Joseph]

So I added this to my functions php file

add_action( 'generate_inside_mobile_header','tu_mobile_header_html' );
function tu_mobile_header_html() { ?>
    <div class="mobile-header-content">
         <i class="fa fa-phone"></i> 858-999-2870
      
    </div>
<?php }

I want it to appear next to the menu burger on mobile. But nothing is showing up.

http://www.disabilitylegalcenter.com/

[Leo]

Hi there,

Looks like your mobile header is disabled:
https://docs.generatepress.com/article/mobile-header/

Also just want to make sure you are adding it to the child theme’s functions.php and not the core file as it will be erased through update.

Let me know if this helps.

[Joseph]

Oh, there is no way to have it appear right next to the burger? I don’t want it to be a mobile header, but was hoping it would sit next to the mobile burger menu.

[Leo]

Try this hook instead: https://docs.generatepress.com/article/generate_inside_mobile_menu/

[Joseph]

I tried to add this code:

add_action( 'generate_inside_mobile_menu','jd_insert_into_mob_menu' );  
function jd_insert_into_mob_menu() { ?> 
    <i class="fa fa-phone"></i>
<?php }

In both a child theme, which I then deleted and in Code Snippets. Nothing. I also tried it with

generate_inside_mobile_menu_bar

No phone icon anywhere in the menu, on the menu bar (when the burger is showing) etc.

EDIT: Got it to appear in the ‘generate_inside_mobile_header_menu’ but it just appears next to the burger, and it becomes part of the burger (meaning when I click the number/phone icon, it just opens up the menu, and doesn’t click to call)

[Joseph]

I’m guessing it’s just not going to be able to appear in that bar next to the burger? I’ve put it in the mobile header for now but I’m hoping it can appear in the mobile menu bar next to the burger so it’ll be streamlined.

[Tom]

Maybe try something like this:

@media (max-width: 768px) {
    .main-navigation .menu-toggle,
    .mobile-header-content {
        display: inline-block;
        width: auto;
    }
}

[Joseph]

That worked!! Awesome.

One last question, and this is okay if it’s not possible, what’s the css to do the spacing across the bar between menu items? Either way, I’m stoked it works.

Would just like to put some space between the click to call button and menu burger.

For now, I did this:

.mobile-header-content a {
color: white;
    padding-top: 10px;
    padding-right: 75px;
}

Which looks fine, just wondering if there is something more elegant.

[Tom]

You could do this instead:

@media (max-width: 768px) {
    .main-navigation .menu-toggle {
        float: left;
        width: auto;
    }
    .mobile-header-content {
        float: right;
        line-height: 50px
    }
}

[Joseph]

Thank you!

[Tom]

You’re welcome 🙂

[Author]

Posts