Canvas Support

Navigation Spacing and Line Breaks

3 replies · opened Mar 10, 2022

DdiveloperincMar 10, 2022

The navigation is optimized for the template sample. Once you deviate one extra font, making the navigation content larger/wider, the navigation looks horrible on tablets. I attached screenshots. As seen the template looks great at 992px, and at 991px it breaks to the mobile menu version. However, once you customize your navigation, having longer words or even making the navigation font larger say changing .menu-link {font-size: 1.1rem;} You get undesirable results in horizontal tablet viewing, as seen in the screenshot where the navigation essentially line breaks. It would be ideal for the the navigation to scale smaller, and stay inline with the logo, and NOT line break. What do you suggest?

SSemicolon WebSTAFFMar 10, 2022

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. Also, since One Size doesn't fit all, the Best Solution for this is using CSS with 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: 1199.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 issues. You can change the Values depending on the Amount of Items you have in the menu. Hope this Helps!

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

DdiveloperincMar 10, 2022

If I could apply .header-size-sm at max-width 1315px that would probably solve the issue. How could we force .header-size-sm on 1315px or less and have the .full-header act normally anything larger than 1315px?

SSemicolon WebSTAFFMar 11, 2022

Hello,

The .header-size-sm Class simply reduces the Height of the Header/Logo and does not resize the Text, so we don't this might be a good option. You can consider setting a Custom Header Height using the CSS Codes mentioned in this Documentation: https://docs.semicolonweb.com/docs/header/header-heights/ . This way you can choose your Media Query for the same.

However, we do recommend using Font Sizing and Header Heights together because this is a Full Width Header.

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