Canvas Support

A sub menu in one-page with side header

4 replies·opened Jul 25, 2023
K
kimonoJul 25, 2023

I would like to put a sub menu in the main menu of one-page with side header (which would also reflect in the mobile menu)

ex:
Articles >

new articles
old articles

Can you help me with an example?

K
kimonoJul 25, 2023

In my canvas I have this menu:

<!-- Primary Navigation
						============================================= -->
						<nav class="primary-menu text-start text-lg-center">

							<ul class="menu-container one-page-menu" data-easing="easeInOutExpo" data-speed="1250" data-offset="0">
								<li class="menu-item"><a class="menu-link" href="#" data-href="#wrapper"><div>Home</div></a></li>
								<li class="menu-item"><a class="menu-link" href="#" data-href="#section-about"><div>About</div></a></li>
								<li class="menu-item"><a class="menu-link" href="#" data-href="#section-works"><div>Works</div></a></li>
								<li class="menu-item"><a class="menu-link" href="#" data-href="#section-services"><div>Services</div></a></li>
								<li class="menu-item"><a class="menu-link" href="#" data-href="#section-blog"><div>Articles</div></a></li>
								<li class="menu-item"><a class="menu-link" href="#" data-href="#section-contact"><div>Contact</div></a></li>
							</ul>

						</nav><!-- #primary-menu end -->
S
SemiColonWebSTAFFJul 27, 2023

Hello,

This is Definitely Possible! You can consider using this code:

<ul class="menu-container one-page-menu" data-easing="easeInOutExpo" data-speed="1250" data-offset="0">
	<li class="menu-item"><a class="menu-link" href="#" data-href="#wrapper"><div>Home</div></a></li>
	<li class="menu-item"><a class="menu-link" href="#" data-href="#section-about"><div>About</div></a></li>
	<li class="menu-item"><a class="menu-link" href="#" data-href="#section-works"><div>Works</div></a></li>
	<li class="menu-item"><a class="menu-link" href="#" data-href="#section-services"><div>Services</div></a></li>
	<li class="menu-item">
		<a class="menu-link" href="#"><div>Articles</div></a>
		<ul class="sub-menu-container">
			<li class="menu-item"><a class="menu-link" href="#" data-href="#section-about"><div>About</div></a></li>
			<li class="menu-item"><a class="menu-link" href="#" data-href="#section-works"><div>Works</div></a></li>
		</ul>
	</li>
	<li class="menu-item"><a class="menu-link" href="#" data-href="#section-contact"><div>Contact</div></a></li>
</ul>

This will definitely work fine. Please note that Menu Items with Sub-Menus cannot have data-href, as it will conflict with the Default Functionality.

Hope this Helps!

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

K
kimonoJul 28, 2023

Thank you -- I'll try it now :)

K
kimonoJul 28, 2023

Work fine! Thanks.

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