[Support request] Responsive headers

[Andrew]

In desktop view our site’s header has the logo at the left and phone number on the right. The main nav menu appears in a row below those. But, in tablet or phone view the phone number disappears and gets replaced with the Menu icon. I need to keep the logo and phone number at the top in tablet and mobile view. In phone view it should be a tap-to-call icon, and I would even like for it to be a “sticky” element at the top of the page. The menu should remain below those two, except that it would switch to the responsive style using the stacked menu icon.

How can this be done in GP Premium?

[Leo]

Hi Andrew,

Can you link me to the site? Thanks!

[Andrew]

http://countryhomeelevator.com

[Leo]

Hmm ok few steps needed here but I would try something like this:
– Turn off mobile header: https://docs.generatepress.com/article/mobile-header/
– Add this CSS to hide the phone number header widget on mobile:

@media (max-width: 768px) {
    .header-widget {
        display: none;
    }
}

– Add the phone icon using generate_inside_navigation hook:
https://docs.generatepress.com/article/generate_inside_navigation/

and making it only show on mobile:

add_action( 'generate_inside_navigation','generate_add_phone_mobile' );
function generate_add_phone_mobile()
{
    ?>
    <div class="hide-on-desktop phone-icon">
        <a href="tel:1234-5678"><i class="fa fa-phone-square" aria-hidden="true"></i></a>
    </div>
    <?php
}

Adding PHP: https://docs.generatepress.com/article/adding-php/
Icon selection: http://fontawesome.io/icons/

– Add this CSS:

.phone-icon {
    text-align: center;
}

– Make sure sticky navigation is activated for both desktop and mobile: https://docs.generatepress.com/article/sticky-navigation/

[Author]

Posts