Canvas Support

Navigation Menu Breakpoint

5 replies · opened Sep 29, 2016

Mmlindsey91Sep 29, 2016

Hello,

My main navigation bar does not change into a mobile version at the right screen size. It ends up looking like the attached image.

Please advise, I am having trouble with responsiveness.

SSemicolon WebSTAFFSep 30, 2016

Hello,

We Really Apologize about the Inconveniences caused! This issue occurs when you have more Items in the Menu or the Logo is Large when there is not enough space available in the Header. The Responsive Header kicks in at the 991px Browser Width and thus you will have to use some Custom CSS to adjust the Size of the Menu Items and Logo to make it look proper on the Browser Widths, you are currently facing issues on. Can you please provide us with a Live URL so that we can check out the exact issue and provide you with a more accurate solution for this. Thanks for your Patience.

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

WwilliamshenSep 30, 2016

Hi,

Thanks for creating Canvas - I love it so so so much right now!

I am also having the same problem as the OP. Here is a link to the website http://toolio.shen.nz/ (I've made this post private for privacy reasons)

If you resize the window to a smaller width, you can see that the navbar will not fit well.

Thanks for any help in advance!

SSemicolon WebSTAFFOct 3, 2016

Hello,

Thank You so so so much for the Kind Words! :)

We have tried checking out your Website but the URL does not work for us. Can you please provide us with a Valid Live URL so that we can check out the exact issue and provide you with a more accurate solution for this. Thanks for your Patience.

Additionally, using the following CSS Code can fix this issue for you: 

.device-md #primary-menu ul li a {
	padding-left: 12px;
	padding-right: 12px;
	font-size: 12px;
	letter-spacing: 0;
}

You will simply need to adjust the paddings and Font Size according to your needs.

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

WwilliamshenOct 3, 2016

Oops! I updated the domain for the website in the past few days so that link doesn't work anymore... Here's the current link if you think there's any more problems: toolio.co.nz

However, using the CSS code you provided seems to have solved the problem :)
On that note, do you know anyway to detect which CSS files or contents of a file aren't used so I can save some space on my websites.

Regards,
William

SSemicolon WebSTAFFOct 3, 2016

Hello,

Thank You so much for your Patience and providing us with the Updated URL. We have just checked out your Website and it indeed appears to be working fine with the CSS we have provide you with. Really Glad that the issue was resolved.

Currently, there is no CSS Generator available to create a Conditional CSS Package required only for your Website's needs but you can consider using the style-import.css File along with the css/imports Folder to Select the CSS Files required for your Website and use it accordingly.

Hope this Helps!

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