Add a button inside collapsed navigation

[ChrisDeBruyne]

Hi team!

Want to know if it’s possible to add a button inside a collapsed navigation? Reason being, in my desktop header I have normal inline nav with a button on the right, and would like for it to still be there when the site scales down to mobile width.

Thanks,

[tristup]

Hi @ChrisDeBruyne,

Thanks for reaching us.

You can add that button inside the collapsed menu in two steps, first you need to make the button invisible for the Mobile devices.

Then you need to add a code that will add the button as a part of the collapsed menu. The following code is a sample code that will add a Text into the menu in the mobile device.
Just to inform you that the Mobile device has taken as a reference here.

if ( ! function_exists( 'x_button_navbar_menu_item' ) ) :
      function x_button_navbar_menu_item( $items, $args ) 
      {
          if ( wp_is_mobile() ) 
          {
                if ( $args->theme_location == 'primary') {
                          
                      $items.= '<li class="menu-item current-menu-parent x-menu-item x-menu-item-woocommerce">';
                      $items.='Your Button Code'; //replace here
                      $items.='</li>';          
                }
          }
          return $items;    
      }
      add_filter( 'wp_nav_menu_items', 'x_button_navbar_menu_item', 9998, 2 );
  endif;

The above code will work if copied as it is and doesn’t conflict with any existing code.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We do not provide support for custom codes that means we can’t fix it in case it conflicts with something in your site nor will we enhance it.

Hope it helps.

Thanks

[ChrisDeBruyne]

Hi there

Thanks for your response. I have 2 questions:

1. I am using the Pro header builder. Must I add the button in step one of your instructions as an element in my mobile header bar? This is where the collapsed navigation element is. If not, please advise where the button needs to exist.
2. The button code that needs replacing in the JS, will that be an ID that I assign to the button that gets created in step one?

Then, I also have another question - I’ve used some custom code to shrink the nav bar on scroll here https://majestic.seventhseason.co.za/ , but when scrolling to top there is a quick flicker of white under the nav bar. How can this be fixed?

Many thanks

[tristup]

Hi @ChrisDeBruyne,

Regarding your questions, first of all, you need to add the button for other devices than Mobile.
And on mobile, the PHP code will work. The Button code is referred to as the HTML code of button which shows the button.

I have also stated that we don’t offer support to the custom codes. Either you need to hire a developer who can assist you to do the customization or
you can avail of our newly launched service called One where we can answer customization questions.

Thanks

[ChrisDeBruyne]

Alright, thanks.

[marc_a]

@ChrisDeBruyne,

It’s our pleasure to help you.

Thank you.