Canvas Support

Mega Mobile Menu

9 replies · opened Jun 1, 2023

SsilkysackJun 1, 2023

Hello, I see you have many different main navigation menu options, however the mobile menu has only two basic options. Being that my site traffic is 90% mobile, Id like to upgrade the mobile menu.

Im wanting to create a mobile menu similar to the mega menu style. Specifically I want to mimic exactly what this website has for a mobile menu. They do a fullscreen overlay with 4 main boxes to choose with a few text links below.

https://levainbakery.com/

Could you please point me in the right direction as to what CSS I will need to edit. This would effect mobile menu only Thanks!

SSemicolon WebSTAFFJun 3, 2023

Hello,

This should be possible with the existing structure but will require some Customizations. We will definitely work on this and release an Update shortly within this week. 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.

SsilkysackJun 3, 2023

Awesome, I look forward to that update!
So you think it will be available in under one week?

SSemicolon WebSTAFFJun 4, 2023

Hello,

Yes absolutely! Should be available within this week. We are already working on this as we speak. :)

Let us know if we can help you with anything else.

SsilkysackJun 7, 2023

I see an update was released. Does this include the new mobile menu options?

SSemicolon WebSTAFFJun 8, 2023

Hello,

Not yet. We will provide you with the Files 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 WebSTAFFJun 12, 2023

Hello,

Thanks for your Kind Patience! This will be made available tomorrow.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

SsilkysackJun 14, 2023

That is great! I checked, and the most recent update is June 6th. I will keep checking for the release of this update!

SsilkysackJun 16, 2023

Any update on the release?

SSemicolon WebSTAFFJun 16, 2023

Hello,

Apologies for the Delays. Consider trying the code below:
[ch_pre]<!-- Primary Navigation
============================================= -->
<nav class="primary-menu">

&lt;ul class="menu-container"&gt;
	... Stndard Menu


&lt;div class="menu-container mobile-primary-menu pt-4 pb-5"&gt;
	&lt;div class="portfolio row gx-3 gy-4"&gt;

		&lt;!-- Portfolio Item: Start --&gt;
		&lt;article class="portfolio-item col-sm-6 col-12 pf-media pf-icons"&gt;
			&lt;!-- Grid Inner: Start --&gt;
			&lt;div class="grid-inner"&gt;
				&lt;!-- Image: Start --&gt;
				&lt;div class="portfolio-image"&gt;
					[

attachment

					](portfolio-single.html)
					&lt;!-- Overlay: Start --&gt;
					&lt;div class="bg-overlay"&gt;
						&lt;div class="bg-overlay-content dark" data-hover-animate="fadeIn"&gt;
							[](images/portfolio/full/1.jpg)
							[](portfolio-single.html)
						&lt;/div&gt;
						&lt;div class="bg-overlay-bg dark" data-hover-animate="fadeIn"&gt;&lt;/div&gt;
					&lt;/div&gt;
					&lt;!-- Overlay: End --&gt;
				&lt;/div&gt;
				&lt;!-- Image: End --&gt;
				&lt;!-- Decription: Start --&gt;
				&lt;div class="portfolio-desc"&gt;
					&lt;h3&gt;[Open Imagination](portfolio-single.html)&lt;/h3&gt;
					&lt;span&gt;[Media](#), [Icons](#)&lt;/span&gt;
				&lt;/div&gt;
				&lt;!-- Description: End --&gt;
			&lt;/div&gt;
			&lt;!-- Grid Inner: End --&gt;
		&lt;/article&gt;
		&lt;!-- Portfolio Item: End --&gt;

		&lt;article class="portfolio-item col-sm-6 col-12 pf-illustrations"&gt;
			&lt;div class="grid-inner"&gt;
				&lt;div class="portfolio-image"&gt;
					[

attachment

					](portfolio-single.html)
					&lt;div class="bg-overlay"&gt;
						&lt;div class="bg-overlay-content dark" data-hover-animate="fadeIn"&gt;
							[](images/portfolio/full/2.jpg)
							[](portfolio-single.html)
						&lt;/div&gt;
						&lt;div class="bg-overlay-bg dark" data-hover-animate="fadeIn"&gt;&lt;/div&gt;
					&lt;/div&gt;
				&lt;/div&gt;
				&lt;div class="portfolio-desc"&gt;
					&lt;h3&gt;[Locked Steel Gate](portfolio-single.html)&lt;/h3&gt;
					&lt;span&gt;[Illustrations](#)&lt;/span&gt;
				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/article&gt;

		&lt;article class="portfolio-item col-sm-6 col-12 pf-graphics pf-uielements"&gt;
			&lt;div class="grid-inner"&gt;
				&lt;div class="portfolio-image"&gt;
					[

attachment

					](#)
					&lt;div class="bg-overlay"&gt;
						&lt;div class="bg-overlay-content dark" data-hover-animate="fadeIn"&gt;
							[](https://vimeo.com/89396394)
							[](portfolio-single.html)
						&lt;/div&gt;
						&lt;div class="bg-overlay-bg dark" data-hover-animate="fadeIn"&gt;&lt;/div&gt;
					&lt;/div&gt;
				&lt;/div&gt;
				&lt;div class="portfolio-desc"&gt;
					&lt;h3&gt;[Mac Sunglasses](portfolio-single-video.html)&lt;/h3&gt;
					&lt;span&gt;[Graphics](#), [UI Elements](#)&lt;/span&gt;
				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/article&gt;

		&lt;article class="portfolio-item col-sm-6 col-12 pf-uielements pf-media"&gt;
			&lt;div class="grid-inner"&gt;
				&lt;div class="portfolio-image"&gt;
					[

attachment

					](portfolio-single.html)
					&lt;div class="bg-overlay"&gt;
						&lt;div class="bg-overlay-content dark" data-hover-animate="fadeIn"&gt;
							[](images/portfolio/full/5.jpg)
							[](portfolio-single.html)
						&lt;/div&gt;
						&lt;div class="bg-overlay-bg dark" data-hover-animate="fadeIn"&gt;&lt;/div&gt;
					&lt;/div&gt;
				&lt;/div&gt;
				&lt;div class="portfolio-desc"&gt;
					&lt;h3&gt;[Console Activity](portfolio-single.html)&lt;/h3&gt;
					&lt;span&gt;[UI Elements](#), [Media](#)&lt;/span&gt;
				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/article&gt;
	&lt;/div&gt;
&lt;/div&gt;

</nav><!-- #primary-menu end -->[/ch_pre]

This should work fine and display anything inside the .mobile-primary-menu DIV. Like a Portfolio or an Image Grid, anything but preferably not JS related and something simple and quick to be displayed. 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