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

Home Forums Support Font Awesome Phone Icon in Mobile Menu not appearing

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #400860
    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/

    #401069
    Leo
    Staff
    Customer Support

    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.

    #401290
    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.

    #401403
    Leo
    Staff
    Customer Support
    #401771
    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)

    #401776
    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.

    #402032
    Tom
    Lead Developer
    Lead Developer

    Maybe try something like this:

    @media (max-width: 768px) {
        .main-navigation .menu-toggle,
        .mobile-header-content {
            display: inline-block;
            width: auto;
        }
    }
    #402047
    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.

    #402051
    Tom
    Lead Developer
    Lead Developer

    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
        }
    }
    #402106
    Joseph

    Thank you!

    #402356
    Tom
    Lead Developer
    Lead Developer
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.