Canvas Support

menu-6 window resize bug

4 replies · opened Dec 6, 2016

Ss1ic3rDec 6, 2016

Hey

If the window is smaller than 1210px the menu slides under the logo.
What can i do? Is there a possibility to fix this? Switch earlier to the mobile menu?
attachement: menu6.png

Is it possible to increase the area of the mobile menu?
attachement: encrease_size.png

Regards

Ss1ic3rDec 6, 2016

attachement: menu6.png

SSemicolon WebSTAFFDec 6, 2016

Hello,

  1. This issue occurs because of the Number of the Menu Items in the Menu Area. The Total Width of the Menu Items exceeds the Available Space in the Menu Area which is why this issue arises. You can fix this by either limiting your Menu Items or 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: 16px;
	padding-right: 16px;
}

This will definitely fix the issue.

  1. It is Possible but not recommended according to the UI Guidelines by Google Page Mobile Insights. This will create a Negative User Experience. if you still want to implement this, let us know and we will definitely provide you with further assistance. 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.

Ss1ic3rDec 8, 2016

Thank you!

  1. It works, but when i resize the window, the menu slips briefly under the logo. Don't worry if this can not be fixed...

  2. Really? I've tested my website with https://varvy.com and receive the message "Tap targets are small". It would be glad if you can show me how I can enlarge this menu...

  3. I have a last question to the menu. Is it possible to switch the mobile menu button to the right side? I think it is better if the menu is right because the most user are right-sided.

//Private
I recommend you to look once at the mobile menu of the monstroid template: https://www.templatemonster.com/demo/55555.html (i set this reply to private. You can remove the link to the monstroid and turn it to public)

Anyway, i prefer the mobile menu of the monstroid, but overall the canvas template is the best and the support is amazing :)

Regards

SSemicolon WebSTAFFDec 9, 2016

Hello,

Thank You so much for the Kind Words! :)

  1. This happens since the Menu Items have CSS3 Transitions enabled but we recommend that you do not worry about this since Actual Customers are very less likely to Resize Browsers while viewing your Website.

  2. & 3. This is Definitely Possible. Simply use the following CSS code:

@media (max-width: 991px) {

	#logo { text-align: left; }

	#primary-menu-trigger {
		position: absolute;
		font-size: 18px;
		top: 18px;
		left: auto;
		right: 0;
		width: 64px;
		height: 64px;
		line-height: 64px;
	}

}
  1. We will Definitely look into this Suggestion, however this is already possible with the Canvas Menus. Simply find the following code in the js/functions.js File inside the menufunctions: function() Function Block:
if( SEMICOLON.isMobile.Windows() )

and replace it with: 

if( SEMICOLON.isMobile.any() )

This will definitely work fine. 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