Canvas Support

toggle dropdown menu problem

3 replies·opened Jul 8, 2019
O
org3ikkemtJul 8, 2019

hi im editing your "conference" demo, my url is this

my dropdown menu doesnt work properly on mobile devices, when you click ETKİNLİK button, it expands but not enough to show all sub-menu elements.
also after your click, dropdown menu or menu doesnt close.

while you are using desktop version, if you click the ETKİNLİK (dropdown button) it opens dropdown menu but doesnt close after click again. Need your help thanks.

	<nav id="primary-menu" class="d-lg-flex d-xl-flex align-items-center justify-content-xl-between justify-content-lg-between fnone">

						<ul class="not-dark align-self-start"></ul>
						<ul class="not-dark align-self-center one-page-menu" data-easing="easeInOutExpo" data-speed="1250" data-offset="160">
							<li><a href="#" data-href="#section-about"><div>HAKKIMIZDA</div></a></li>
							<li><a href="#" data-href="#section-kimlerkatilmali"><div>KİMLER KATILMALI</div></a></li>
                             <li><a href="#">ETKİNLİK</a>
								<ul>
                                    <li><a href="#"  data-href="#section-sponsors"><div>SPONSORLAR</div></a></li>
                                    <li><a href="#"  data-href="#section-speakers"><div>KONUŞMACILAR</div></a></li>
                                    <li><a href="#"  data-href="#section-schedule"><div>PROGRAM</div></a></li>
                                    <li><a href="#"  data-href="#section-katilimcigorusleri"><div>KATILIMCI GÖRÜŞLERİ</div></a></li>
                                    <li><a href="#"  data-href="#section-schedule"><div>GALERİ</div></a></li>

								</ul>
							</li>
							<li><a href="#" data-href="#section-contact"><div>İLETİŞİM</div></a></li>

						</ul>

						<ul class="pr-0 header-button">
							<li>
								<a href="#section-sss" class="button button-effect" data-scrollto="#section-sss">S.S.S.</a>
							</li>
						</ul>

					</nav><!-- #primary-menu end -->
S
SemiColonWebSTAFFJul 8, 2019

Hello,

We have just checked out your Website and the Menu Appears to be working fine for us on Mobile Devices with the Toggle Open/Close working correctly and also showing all the Menu Items (consider scrolling inside the Menu Area to reveal more items). If you are still facing issues regarding this, please let us know which Browser/OS you are using so that we can make more tests for this.

Additionally, for the Desktop, the Menus open and close on Mouse Hover. If you would like to enable Open/Close on Click, you will need to add the .on-click Class on the #primary-menu Element.

Moreover, we have found some HTML Validation errors on your Page: https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.gcs-summit.org%2Ftr%2F which could cause unexpected issues. Consider fixing them.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

O
org3ikkemtJul 9, 2019

My problem is if you click the dropdown menu (ETKİNLİK button), after you click sub-menu elements, dropdown menu doesnt close until you click it again.

And i dont want to dropdown menus (ETKİNLİK button) scroll behavior on mobile, (ETKİNLİK button) menu expands to the bottom but not enough space for displaying sub-menu elements. I can't expect to the visitors scroll through menu. What should i do?

S
SemiColonWebSTAFFJul 15, 2019

Hello,

Thanks for your Patience!

We have tested your Pages extensively and we noticed that the Primary Menus are working as expected and the Menu is closing when you click on them before scrolling to the Section. We apologize if we have not understood your issue properly, in which case a Screenshot or a Screencast will be very helpful of what functionality you are looking for. If you mean that the Sub-Menus don't close after the Main Menu closes, simply find the following code inside the onePageScroll: function() Function Block in the js/functions.js File: 

if( windowWidth < 768 || $body.hasClass('overlay-menu') ) {
	if( $('#primary-menu').find('ul.mobile-primary-menu').length > 0 ) {
		$('#primary-menu > ul.mobile-primary-menu, #primary-menu > div > ul.mobile-primary-menu').toggleClass('d-block', false);
	} else {
		$('#primary-menu > ul, #primary-menu > div > ul').toggleClass('d-block', false);
	}
	$pagemenu.toggleClass('pagemenu-active', false);
	$body.toggleClass('primary-menu-open', false);
}

and replace it with: 

if( windowWidth < 768 || $body.hasClass('overlay-menu') ) {
	if( $('#primary-menu').find('ul.mobile-primary-menu').length > 0 ) {
		$('#primary-menu > ul.mobile-primary-menu, #primary-menu > div > ul.mobile-primary-menu').toggleClass('d-block', false);
	} else {
		$('#primary-menu > ul, #primary-menu > div > ul').toggleClass('d-block', false);
	}
	$('#primary-menu ul').find('ul,.mega-menu-content').toggleClass('d-block', false);
	$pagemenu.toggleClass('pagemenu-active', false);
	$body.toggleClass('primary-menu-open', false);
}

Additionally, the Scroll Behavior of the Primary Menu is only on Sticky Responsive Headers to prevent the Headers from overflowing the Screen which will make the Menus unresponsive. So you will either disable the Sticky Responsive Header or delete the following code from the css/responsive.css File if you want to allow the Primary Menus overflow from the Header: 

.responsive-sticky-header #primary-menu > ul,
.responsive-sticky-header #primary-menu > .container > ul {
	max-height: 300px;
	overflow-y: scroll;
}

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