Header Menu and Tab breakpoint

1 reply · opened Feb 21, 2017

MmaxzhouFeb 21, 2017

Hi,

How to adjust the breakpoint of header menu and tab. The header menu does not display properly when using a 13 inch laptop or smaller. The tab does not display properly when using a 9.7 inch ipad horizontally. The link: http://iskin.azurewebsites.net/
Please see the attachment.

SSemicolon WebSTAFFFeb 22, 2017

Hello,

This issue occurs because the Total Width of the Menu Items exceeds the Available Space in the Menu Area. You can fix this by shrinking the size of the Menu Items by decreasing the Padding and the Font Sizes. Simply consider adding the following code:

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

This will 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
Header Menu and Tab breakpoint · Canvas Template Support