Canvas Support

Menu Button

9 replies · opened Apr 22, 2016

IisfxJul 3, 2016

Hi,

The demo and the template you did for lawmotorsports both show the button outside of the burger menu when viewing on half-screen or mobile, which I don’t really like personally.

Is it possible to add the button as the last item of the menu (so it is included within the burger menu)? I’ve added the button like this on my site, but the button does not auto-adjust like other menu items when I scroll down the page (see the attachment please).

Could you help please?

Thanks

SSemicolon WebSTAFFJul 4, 2016

Hello,

This is Definitely Possible. However, minor Custom CSS Codes would be required since the Button is used inside the Menu. Please add the following CSS code to adjust position of the Menu by simply adding margin-top and margin-bottom according to what suits your needs best: 

#header.sticky-header .menu-item {
	margin-top: 30px;
	margin-bottom: 30px;
}

Make sure you change the 30px Margins according to your needs.

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

IisfxJul 4, 2016

Thanks for your reply.
I added the code, however it does not work.

#header .button {
margin: 30px 10px;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}

body.top-search-open #header .button { opacity: 0; }

#header.sticky-header:not(.static-sticky) .button {
margin-top: 10px;
margin-bottom: 10px;
}

#header.sticky-header .menu-item {
margin-top: 30px;
margin-bottom: 30px;
}

What did I miss? Can you help please?

Thanks.

SSemicolon WebSTAFFJul 7, 2016

Hello,

The Code you are attempting to use appears to be working fine. However, since this is still not working for you, can you please provide us with a Live URL so that we can check out the exact issue and provide you with a more accurate solution for this. 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.

IisfxJul 7, 2016

Hi,

Thanks for your help.

The live test URL is: http://scrollmenu.isfx.uk/

I really appreciate your help with this.

Thank you

SSemicolon WebSTAFFJul 8, 2016

Hello,

We are Very Happy to Help you! :)

The issue is that you are using the .topmargin-sm Class on the Header Button which is not required. Please remove that Class and then consider adding the following CSS Code: 

#header .button {
	margin-top: 33px;
	margin-bottom: 33px;
}

#header.sticky-header:not(.static-sticky) .button {
	margin-top: 13px;
	margin-bottom: 13px;
}

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

IisfxJul 8, 2016

Hi,

That's great, it works. Thank you very much for all your help and quick responses.

Best regards

SSemicolon WebSTAFFJul 8, 2016

Hello,

Really Glad that your issues were resolved. Very Happy to Help! Thanks for your Patience.

Do let us know if we can help you with anything else or if you find any further issues with Canvas. 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