Responsive nav off screen toggle

Support
#1

Hi please take a look at my navigation, why can’t I get it to responsively adjust so the button and nav links are not wrapping in small cell phone screens. It looks ok in the preview for small screens but on my ipone 6 it does not adjust. I’ve tried creating a smaller mobile version but it is hard to figure out what makes the global nav smaller and what the margins are being controlled by in the off screen toggle space.

Thanks for your help, I really appreciate it! My login is in the private reply.

#2

Also - check out the cafe page header - that is the closest ive come to getting things where they should be. But the close button is very small for some reason? Also, I added in the button wrapping css. Thank you!

#3

Hello Erin,

The containers were spaced out of the Flexbox layout. To have a better understanding of how the layout of the header container works, please check out this documentation:

I also check your close button and it seems you already resolved it since it is already big enough.

r-nfPxn7SueaLxnfSsO3fg
r-nfPxn7SueaLxnfSsO3fg478×760 22.4 KB

Hope this helps.

#4

Ok, thank you, I also figured some other things out myself to get it to look smooth at 380px. I’m wondering if how I’ve set this up is the best way? Please take a look at the cafe page again. I have two separate toggles (one for large screens and one for small screens using just icons, no text). On the small screens toggle I have different settings (small dimensions and different size close dimensions). However, I’m wondering if I can just use the same settings, that auto resizes the text?

I don’t understand how the flexbox layout and the containers work with this.

#5

Hi - one last thing: why are the nav links taking two clicks to get to the page? Seems this is only happening on mobile? When I view the test site in my phone.

#6

Hello Erin,

For your mobile menu, please check your submenu trigger. It should be set to “Sub Indicator”.

cjhNxYXjSWa39KQXdG_eMg

And to be more familiar with the flexbox layout, please check out video tutorials:

Hope this helps.

#7

Oh great! I missed this, I appreciate your help on the sub menu trigger.

#8

We are delighted to assist you with this.

Cheers!

#9

Hi there,

I’m still actually having a problem with the double click on mobile, not on desktop. Only when I preview the test site on my phone. Any ideas?

#10

Hello Erin,

Be advised that Pro 3.2.2 is now available in automatic updates! This release contains fixes for several issues, like you have mentioned above, so be sure to check out the changelog (https://theme.co/changelog/). Please do update to the latest version. After doing the updates, always remember to clear all caches when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Kindly let us know how it goes.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.