2 replies · opened May 20, 2020
Hello, Support,
unfortunately there seems to be a bug with the logo. The logo does not scale at all when the browser window is reduced in size (see attachment).
There seems to be the same problem with the subheaders of the menu titles. If they are too long, the navbar will also wrap.
Here the other screenshot. Apparently I do not have permission to edit my own post.
Hello,
The Logo has flexible Width but a Fixed Height relative to the Header Height. 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:
.device-lg #primary-menu ul li > a {
padding-left: 12px;
padding-right: 12px;
font-size: 12px;
letter-spacing: 0px;
}Additionally, to decrease the Size of the Logo, you can consider using the following code:
.device-lg #header:not(.sticky-header) #logo img {
height: 70px;
margin-top: 15px;
margin-bottom: 15px;
}
This will Definitely work fine. Hope this Helps!
Headers will be more easier and flexible in Canvas 6.
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