Showing icons on mobile nav

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/

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.

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 }

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 }

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.

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

Glad we could help :)

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.

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