Canvas Support

Mobile nav bar to compress once section is chosen

3 replies·opened Nov 14, 2016
I
izabelancNov 14, 2016

Hi guys,

Great work with the canvas template!

I have looked around for an answer for this but not found one.

On mobile, once clicked on more for sections on the navigation bar, it collapses as it should by giving me all my options. But once the section is chosen/clicked, the bar remains fully expanded.

Is there a way for it to be set to compress itself automatically once it has been clicked?

Thank you!

S
SemiColonWebSTAFFNov 15, 2016

Hello,

Thank You so much for the Kind Words! :)

We have just checked out your Websites along with the Codes you are using and the issue is that you are using the data-scrollto Functionality in the Primary Menu whereas it is intended to be used only for Anchor Links/Buttons which you plan to add in your Content Area.

For the Primary Menu, you will simply need to use the .one-page-menu Class along with the data-href Functionality. Here's an Example Code: 

<nav id="primary-menu">

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

</nav>

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

I
izabelancNov 17, 2016

Hi there,

Thanks for your reply.

Can you please remove my website details from my previous message? I'm not able to edit it.

Also, I think you misunderstood my question. On mobile, once I click a section e.g. Services, it scrolls to services section as it should, but the menu is fully expanded. For the user to get rid of it, they would have to click on the 3 lines for it to disappear. Is there a way to automise this? Once a section is clicked from the mobile menu, it would take to the section chosen and also minimise the navigation.

Regards

S
SemiColonWebSTAFFNov 18, 2016

Hello,

We have removed your Website Link from your Previous Reply.

Thanks for your Patience! We have definitely understood your Question. We now see that you have added the .one-page-menu Class in your Primary Menu and now you simply need to replace all the data-scrollto to data-href in your Menu Links and you will now see that the Menu automatically collapses and scrolls to the One Page Sections when you click on the One Page Menu Links.

Hope this Helps!

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

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