1 reply · opened Oct 23, 2021
I will include some website look that is related to your theme, which I've not modified the CSS of. The header part of websites is broken by which it's not in the right place. Seems fine in Safari and Chrome but I'm not sure for other versions.
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 and the Logo Sizes on these devices:
[ch_pre type="css"]@media (min-width: 992px) and (max-width: 1412.98px) {
.menu-container > .menu-item > .menu-link {
padding-left: 9px;
padding-right: 9px;
font-size: 10px;
letter-spacing: 0px;
}
#header:not(.sticky-header) #logo img {
height: 70px !important;
margin-top: 15px;
margin-bottom: 15px;
}
}[/ch_pre]
This should definitely fix the issue. 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