menu list jumps when reducing browser width

3 replies · opened Sep 17, 2020

NnottalexiSep 17, 2020

Hi,

I am using an older version of Canvas. Overall my website works fine, however, I have noticed that the menu at the top of the website jumps down as you reduce the width of the browser. Is there a way to prevent this?

The website can be located here: www.nottgroup.com

Best,

Alexi

SSemicolon WebSTAFFSep 18, 2020

Hello,

Since you are using the Full Header, the size of the Header is flexible and depends on the Browser Size, so the amount of Menu Items and the Logo size causes this issue as they exceed the available width. It is recommended to use Media Queries to decrease the Logo Size by CSS or decrease the Font Size and Padding for the Menu Items Text. Example:
[ch_pre type="css"].device-lg #logo img {
height: 70px;
margin-top: 15px;
margin-bottom: 15px;
}

.device-lg #primary-menu ul li > a {
padding-left: 12px;
padding-right: 12px;
font-size: 12px;
letter-spacing: 0px;
}[/ch_pre]

This should definitely work fine. You can change the Values above according to what suits you best. Hope this Helps!

Additionally, we recommend you to update to the Latest Version of Canvas as Support for Older Versions of Canvas only includes general queries related to the included features.

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

NnottalexiSep 18, 2020

Thank you for answering both my queries!

SSemicolon WebSTAFFSep 18, 2020

Hello,

Very Happy to Help! :)

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

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