Canvas Support

demo-shop.html navigation bar submenu reduce excess space

2 replies·opened Mar 13, 2023
B
bagginsMar 13, 2023

Hi,
Using v7, I'm altering demo-shop navigation bar> submenu with only one column but it has excess space on right side that I would like to reduce.
Here is part of the code:

<li class="menu-item mega-menu mega-menu-small">
<a class="menu-link" href="#"><div>Programs</div></a>
<div class="mega-menu-content mega-menu-style-2">
<div class="container">
<div class="row">
<ul class="sub-menu-container mega-menu-column col-lg-6">
<li class="menu-item mega-menu-title"><a class="menu-link" href="test.php"><div><i class="icon-sun21"></i> 2023 Summer</div></a></li>
<li class="menu-item mega-menu-title"><a class="menu-link" href="test.php?inptuityr=2024"><div><i class="icon-user-graduate"></i> 2023/24 Post HS - Apprentice /Trainee /2nd Company</div></a></li>
<li class="menu-item"><a class="menu-link" href="test.php"><div>Submit New Program</div></a></li>
</ul>

What do I need to change?

S
SemiColonWebSTAFFMar 14, 2023

Hello,

We recommend using this code instead:

<li class="menu-item mega-menu mega-menu-small" style="--cnvs-mega-menu-width-sm: 220px">
	<a class="menu-link" href="#"><div>Women</div></a>
	<div class="mega-menu-content mega-menu-style-2">
		<div class="container">
			<div class="row">
				<ul class="sub-menu-container mega-menu-column col-lg-12">
					<li class="menu-item mega-menu-title"><a class="menu-link" href="#"><div>Footwear</div></a>
						<ul class="sub-menu-container">
							<li class="menu-item"><a class="menu-link" href="#"><div>Casual Shoes</div></a></li>
							<li class="menu-item"><a class="menu-link" href="#"><div>Formal Shoes</div></a></li>
							<li class="menu-item"><a class="menu-link" href="#"><div>Sports shoes</div></a></li>
							<li class="menu-item"><a class="menu-link" href="#"><div>Flip Flops</div></a></li>
							<li class="menu-item"><a class="menu-link" href="#"><div>Slippers</div></a></li>
							<li class="menu-item"><a class="menu-link" href="#"><div>Sandals</div></a></li>
							<li class="menu-item"><a class="menu-link" href="#"><div>Party Shoes</div></a></li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>
</li>

This should definitely work fine. Hope this Helps!

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

B
bagginsMar 14, 2023

Yup. That worked!

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