Canvas Support

overlay-menu in mobile version

2 replies · opened Dec 5, 2017

SSimoneAlvarezDec 5, 2017

Dear SemiColonWeb Team,

thanks again for that great template - I love to work with it!
Now I stumbled over an issue I cannot figure out - I hope you can help me:

I would like to use the overlay-menu as showed in menu-10.html on screen-sizes smaller than 768px or mobile devices.
I tried several changes on the related .html, .css and .js files, but no success.

  • Simone
SSimoneAlvarezDec 11, 2017

Dear SemiColonWeb Team,

could you please let me know, if there is a solution to my question?

Thank you!

  • Simone
SSemicolon WebSTAFFDec 11, 2017

Hello,

Thanks for your Patience!

This is Possible but a few modifications is required. Please follow the steps below:

  1. Keep just the following CSS Code inside the @media (min-width: 992px) { Media Query instead of the entire .overlay-menu code:
.overlay-menu:not(.top-search-open) #primary-menu-trigger {
	opacity: 1;
	pointer-events: auto;
	left: auto;
	right: 75px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	margin-top: -10px;
}

.overlay-menu:not(.top-search-open) .full-header #primary-menu-trigger { right: 90px; }
  1. Find the following code in the css/responsive.css File:
#primary-menu > ul,
#primary-menu > div > ul {
	display: none;
	float: none !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	-webkit-transition: none;
	-o-transition: none;
	transition: none;
}

and delete the #primary-menu > ul, Code.

  1. Delete the following CSS Code in the css/responsive.css File:
#primary-menu ul li {
	float: none;
	margin: 0 !important;
	text-align: left !important;
	border-top: 1px solid #EEE;
}
  1. Remove the .visible-lg-block and the .visible-md-block Class from the #overlay-menu-close Element.

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