Pro mobile header

I can not for the life of me figure out the mobile header. I have tried a few different headers to get a mobile nav bar to work and nothing is working. Please help.

Running Pro 1.1.0

This is an automated message to notify you that your thread was posted in the wrong forum, and it has been moved to the correct place. A member of our team will be happy to reply just as soon as your thread is up, however there may be a delay since it was placed in the wrong location (see global notice at top of page). How support works.

For support, please post all questions in the Support Forum.

For peer to peer conversations with other Themeco customers about tips, customizations, or suggestions you are welcome to use the Conversation Forum (no official support provided here).

Design & Development, Marketing & Media, and Hosting & Optimization are for discussion with fellow Apex members about non Themeco related topics. Please keep this in mind in the future.

Thank-you!

Hi,

Can you provide us your site url so we can check your current set-up.

For the mean time kindly review the links below.

https://theme.co/apex/forum/t/pro-navigation-dropdown-element/110

https://theme.co/apex/forum/t/pro-tips-and-tricks/214

It took me a while to work out too.

On your Menu Bar you have to create a second menu container.

The first menu container has your normal menu on it. you have to go to ‘Customise’ on that container, and check the 'Hide During Breakpoints" for the smaller 3 sizes

On the second new container you put a new element on, say ‘Navigation Collapsed’ (one of the ‘mobile’ menu options), and check the 'Hide During Breakpoints" for the larger 2 sizes.

So now, when your page gets narrower it will hide the ‘main’ menu element and then display the new mobile nav bar.

Hope that makes sense

1 Like

THAT WORKED!!! Thank you for the breakdown. I don’t have 3 hours of my life to watch all the tidbits of those videos to attempt to get it right. Seems to me that as a responsive site, that there should be an option wrapped into the containers to auto-populate the nav bars into mobile if wanted.

You’re welcome. It was driving me crazy too! I ended up looking at one of the demo themes and trying to work it out from there.

It all kinda makes sense logically, but it’s not very intuitive initially. And I don’t think the videos explain it at all…

Now that I’ve got that working, the primary nav links don’t work. They drop down the sublinks but then you can’t tap to access any of the primary links

Try setting the Hide During Breakpoints on the container, as well as the element

Hey There,

Would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password

All the best!

Cool! Thx a lot!! Helped me to hide my mobile collapsed menu :slight_smile:

Hi @Maik,

Glad it helped you.

@kaleomedia there is a work around to open up the parent menu items, add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($){
	$('.x-off-canvas .x-anchor-menu-item .x-anchor-text').on('touchend click', function(e) {
		var link = $(this).parents('.x-anchor-menu-item').attr('href');
		window.location.href = link;
	});
});

But please note that it’s just a temporary solution and we won’t be able to support the issues that arises due to the above code.

Hope this helps!