1 reply · opened Mar 16, 2021
When resizing the viewport horizontally, the menu gets pushed down over the content and is grayed out. Thinking it might be the coding on our specific page, I went into the Corporate 4 layout sample for the Canvas template, and used the developer tools on Chrome to just make the first menu item really long. When I shrink the viewport horizontally, Canvas does the same thing that our site is doing. Our version is from 2017.
Hello,
This occurs when there are too many items or Longer Items in the Menu than available width on the Device. While, there is a possible to scale this using JS, but it is very expensive on the Browser Memory which will cause the Website to Lag when Scrolling or Resizing. The Best Solution for this is using CSS Media Queries. You can consider decreasing the Size of the Text in the Menu on these devices:
[ch_pre type="css"].device-lg #primary-menu ul li > a {
padding-left: 12px;
padding-right: 12px;
font-size: 12px;
letter-spacing: 0px;
}[/ch_pre]
Additionally, to decrease the Size of the Logo, you can consider using the following code:
[ch_pre type="css"].device-lg #header:not(.sticky-header) #logo img {
height: 70px;
margin-top: 15px;
margin-bottom: 15px;
}[/ch_pre]
This should definitely work fine. Hope this Helps!
Headers are more easier and flexible in Canvas 6. Since you are using a very old version of Canvas, support is only limited to available features but not bug fixes.
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