Header Nav on small screen not responsive

14 replies · opened Apr 14, 2023

CcarabsApr 14, 2023

Good morning,

I finally released the Canvas7 version of our sites last night and love it!

https://www.exploringallaire.com/
https://www.pointpleasantadventures.com/

But I found an issue with the burger menu/top nav. While converting to the new theme, I would drag my screen size to large and small screens and confirm it looks Ok. But today, as soon as I looked at the site on my phone, I see the "burger" icon is not displayed, and the full nav is displayed on small screens.

I reviewed your menus and do not see anything noticeably different in the structure. I balanced through your menu mentation and do not see a specific answer on how to enable/update the breakpoints here.

I am definitely missing something simple. Any thoughts?

Thank you.

CcarabsApr 14, 2023

Video of what I am seeing

CcarabsApr 14, 2023

Wow...

Is it just data-menu-breakpoint added to the body?

I did not have this in my body tag. Once I added it is now responsive as expected.

So when this is not on the body, does the JS not break the nav? I don't love that. The default should be responsive, and someone can turn it off. Not that we have to remember to turn off the logical things. Just my opinion.

Also, does this mean I can not have a menu that never collapses and one that collapses at 1200? That is important for a new design we are working on. We have a nav with a header logo and a navbar with just a few buttons that should never collapse.

CcarabsApr 14, 2023

I was not able to fully test things this morning. Using the mobile view in Chrome allowed me to see the burger icon was being displayed.

But actually viewing the website on my phone showed otherwise.

I am sure I am just missing something small here since your demo works. But there must be some missing setting, class, attribute that I just have not found.

SSemicolon WebSTAFFApr 14, 2023

Hello,

Thanks for your Patience!

Yes, this really seems weird as we have just checked that the Live Previews and also the Package Files seems to be working perfectly fine. The data-menu-breakpoint Attribute is not required and the default Mobile Breakpoint is set at 992px, so only when you would like to the change the default breakpoint, you will need to add it, also no other setting is required to enable this as this is the basic responsive functionality and enabled by default.

While, we are checking this and trying to find the issue, consider using the following JS Code as the workaround:
[ch_pre type="js"]setTimeout(() => {
SEMICOLON.Base.menuBreakpoint();
}, 666);[/ch_pre]

This should fix the issue for time being and meanwhile we are working on what might be causing this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

CcarabsApr 15, 2023

Thank you but that is not working beyond the initial load on small screens. But as soon as I turn my screen to landscape orientation the burger hides/list shows again. And going back to portrait messes with the screen width. Seems like the font size changes and never comes back properly. I don't get it. I made a private video here...

https://youtu.be/UxQmQH9eCDs

That is Chrome on Windows, and I see the same thing using Samsung Internet on my mobile device...

https://youtube.com/shorts/kmmZcYISA2I

When I try Firefox on my local machine I do not see this issue.

Is there anything that changes font-size or page zoom in your JS?

Please note:

I run your gulp to generate the minified JS/CSS and am using that
I do not include any JS or CSS that would create this type of behavior.

I will try to keep figuring this out today and will see if I can somehow include your styling and JS without running gulp.

UPDATE: I changed the videos to unlisted so you can view them, but I will not share them with the public.

CcarabsApr 15, 2023

I have made many changes to remove anything custom and I still have issues...

I removed all my custom JS and CSS
I have started using the exact CSS/JS from the latest Canvase download without any extra minifying.
** Since I do not keep my CSS/JS in my root directory, I do have to modify the JS file with the proper paths

I created a rather simple page within my CMS, removing a good bit of extra fluff, and again still see the issue:

https://www.exploringallaire.com/dev-design-test/

I have now confirmed I see on:

Windows - Chrome, Edge
Samsung S22 Ultra - Samsung Browser, Chrome

I am willing to Pay for a diagnosis from your company. I need to understand what HTML/tag/data attribute that I am missing to cause this in my example browsers.

UPDATE: I do not see this issue when I review your pages that I have downloaded locally: https://youtu.be/sG54t0cvy_0

I am really lost.

SSemicolon WebSTAFFApr 15, 2023

Hello,

Thanks for your Kind Patience!

We can confirm we see the same thing but we are really not sure what is causing this and we will definitely need to dig deeper and try some codes. Consider checking the Validation of the Page and try resolving the errors: https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.exploringallaire.com%2Fdev-design-test%2F . Also, try fixing the errors for other Pages as well. But if this still does not solve the issue, please consider providing us with your FTP Details so that we can look into this ourselves.

Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

SSemicolon WebSTAFFApr 15, 2023

Also, please don't make the payment before we fix the issue. :)

CcarabsApr 15, 2023

Thank you for the direction with that validator.

I am down to just the charset "Legacy encoding windows-1252 used. Documents must use UTF-8." Seems strange that could be it but I put in a ticket with my host to investigate.

I will let you know what I find.

CcarabsApr 16, 2023

I have rewritten how my CMS handles the content-type header and have addressed all the page's other errors. But my example page still has issues when rotating the phone.

I even removed my CMS altogether, and the same font change happens... https://www.exploringallaire.com/dev-design-test-flat.html

I will need to set up a new server to provide access to my files. I will try to work on this tomorrow.

To show my commitment to your product, I have purchased 3 more licenses, 1 with 12 months of support. I have 26 total sites that may end up using this theme. Currently, 3 do but I own a total of 7 licenses now.

CcarabsApr 16, 2023

I have found the issue, and it was super simple and pretty dumb on my part....

The bad code in my nav header:
<form class="top-search-form" action="search.html" method="get" style="width: 1843px;">
<input type="text" name="q" class="form-control" value="" placeholder="Type & Hit Enter.." autocomplete="off">
</form>

That style="width: 1843px;" seemed to break everything.

I believe when I was converting from V6 to 7, I copied that specific line from the DOM into my header template. And that style gets injected into the top-search-form element. For example, on your blog example: https://themes.semicolonweb.com/html/canvas/blog.html

I would not have introduced that size if I had just grabbed the code/html block from my local files.

From what I can see on my phone and local browsers, my CMS and flat temporary pages are working without issue.

Thank you again for your time.

SSemicolon WebSTAFFApr 17, 2023

Hello,

Firstly, Thank You so much for Purchasing Additional Licenses of Canvas! We Really Really Appreciate this and will continue adding new features and enhancements to Canvas with Future Updates. So, we would love for all of your Websites to use Canvas and thus, if you have any suggestions or if you need a Feature to be incorporated, please do let us know and we would be more than happy to add them for you.

Glad that the issue was resolved. We do not recommend using Codes from Inspect Elements as there are some additional CSS or DOM Elements we add, based on what is required on the Page. So adding this manually might cause unexpected issues. Thanks for detecting this. Since we are now providing Custom Breakpoints support, the Mobile Menus are not activated based on Media Queries but by detecting Viewport Width which is why you had this issue. Thanks again for your Patience.

And please do let us know if we can help you with anything else or if you find any further issues with Canvas.

CcarabsAug 4, 2023

Hello,

A while back you recommended that I use the following:

setTimeout(() => {
	SEMICOLON.Base.menuBreakpoint();
}, 666);

Is it still needed?

Thank you.

SSemicolon WebSTAFFAug 4, 2023

Hello,

This code is not required and the Mobile/Desktop Menus should work fine out of the box. Please consider removing this code first and see if you face any issues. If you do, please let us know and provide us with a Sample Page without the above JS Codes and we will try to determine what is causing the issues.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard