[Support request] Showing icons on mobile nav

[David]

I am building a simple one page site and would like to replace hamburger icon on mobile with social icons and maybe a phone icon? i will no longer need menu as this will be the only page for the site. add icons as custom links to menu? or use social menu? and how do i replace hamburger icon with these?

[Leo]

Hi there,

You can use mobile header with this: https://docs.generatepress.com/article/mobile-header/#adding-html-inside-the-mobile-header

And use CSS to hide the toggle:

@media (max-width: 768px) {
    .main-navigation .menu-toggle {
        display: none;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[David]

thank your your response i am not heavily versed in html so i am having trouble finding my mobile header html to insert into the php function. I have an elementor template that inserted with a hook but when doing that i loose functionality of sticky header. that is why i am trying to add icons to customizer header.

[Tom]

You should be able to place your Elementor template inside the hook using the shortcode:

add_action( 'generate_inside_mobile_header','tu_mobile_header_html' );
function tu_mobile_header_html() { ?>
    <div class="mobile-header-content">
        <?php echo do_shortcode( '[your_elementor_shortcode]' ); ?>
    </div>
<?php }

[David]

Thank you leo and tom both for your hard work and support. This worked perfectly tom! but it got me thinking can i do this with the primary nav or main site header as well if so could you provide me a code snippet to accomplish this? Thanks in advance and keep up the great work!

I am able to get it to show above site header using code below but it doesnt replace existing header just sits above it and does not inherit sticky properties.

add_action( 'generate_header','tu_site_header_html' );
function tu_site_header_html() { ?>
    <div class="site-header-content">
        <?php echo do_shortcode( '[elementor-template id="81"]' ); ?>
    </div>
<?php }

[Leo]

Are you referring to the desktop navigation?

If so this hook should work: https://docs.generatepress.com/article/generate_inside_navigation/

Let me know if this is not what you wanted or if you can’t get the snippet to work.

[David]

Thats it leo! perfect problem solved thank you guys so much

[Leo]

Glad we could help 🙂

[David]

Now that i have the elementor template as primary navigation a new issue has come up. When initial page load is performed the elementor template flashes un-styled content. For example the default social icons color flashes quickly then my settings are applied.

[Leo]

Should be the same issue here: https://generatepress.com/forums/topic/question-about-hooks-and-my-header-elementor/#post-382818

[Author]

Posts