Canvas Support

Primary menu subitems default shown on mobile when using CSS Custom Properties

2 replies · opened Nov 17, 2019

BbytenetserbiaNov 17, 2019

Hi to all,

Based on "CSS Custom Properties (Variables) section (CanvasDocs 5.9 documentation) it seems to be a bug on mobile devices for showing the primary menu items with *-vars.css styles.

If I replace the following code:

  • style.css

  • css/dark.css

  • css/font-icons.css

  • css/responsive.css

with another

  • style-vars.css

  • css/dark-vars.css

  • css/font-icons-vars.css

  • css/responsive-vars.css

in that case the mega-menu content of the primary menu item will be shown in the moment when I open the primary menu.

Even more, in that case it seems that there is grid layout problem for second mega-menu item ("Portfolio" menu item).

Tested page:

Tested on:

  • mobile device (LG – Google Chrome 78.0, built-in browser)

  • tablet device (Asus – Google Chrome 78.0, built-in browser)

  • desktop browser – responsive mode (Win10 – FF v70.0.1 (64-bit), Chrome 78.0 (64-bit))

You can find extra info in attachment.

Best regards,
Nikola

SSemicolon WebSTAFFNov 18, 2019

Hello,

Thanks for reporting this to us! We will test this out and provide you with a fixed code shortly. 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.

SSemicolon WebSTAFFNov 26, 2019

Hello,

Thanks for your Patience. Yes, We fixed this code.

Please find and update this below code in the css/responsive-vars.css file.

#primary-menu ul li .mega-menu-content {
	padding-left: 0;
	display: none;
}

#primary-menu ul li .mega-menu-content ul.mega-menu-column {
	float: none;
	width: auto !important;
	-ms-flex: 0 0 100% !important;
	flex: 0 0 100% !important;
	max-width: 100% !important;
	margin: 0;
	border-left: 0 !important;
	padding-left: 15px;
	border-top: 1px solid #EEE;
}

or simply you can download( https://drive.google.com/open?id=1poCOomCYkPoN_2xB4RnUTN87Km0HgRF- ) and just change the whole css/responsive-vars.css file.

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