Canvas Support

variation of left side push panel

18 replies · opened Apr 12, 2016

HheadrushApr 12, 2016

I would like to use the left push menu but with a few additions to the behaviour.

Have the menu permanently visible by 40 px (I have edited the body.side-panel-left #side-panel css to achieve this, and given it a 260px value rather than a 300px which now leaves it permanently visible by 40px), but I would like to know how I achieve the following:

  1. No black semi opacity overlay
  2. No "close" cursor icon (as this stops the user interacting with the content on page when the menu is in active state.)
  3. To have a reorder icon in the 40px side menu at the top that allows the user to to close and open the menu on click
    4 have the all content page moved over by 40 px so that the side menu does not obscure the left hand side of the logo it in when its minimised state

Is this difficult to achieve with minimal code. (I did also post a basic version of this this in the comments section on themeforest).

Thanks for any help.

SSemicolon WebSTAFFApr 13, 2016

Hello,

  • Please remove the following HTML Code from the Page that has the Side Panel:

  • This will be automatically removed once you remove the above code.

  • Add the following CSS Code:

body.side-panel-left #side-panel { left: -260px; }

body.side-panel-left.side-push-panel.stretched:not(.side-panel-open) #wrapper { padding-left: 40px; }
body.side-panel-left.side-push-panel.stretched:not(.side-panel-open) #header.sticky-header .container { padding-left: 70px; }
  • Add the following CSS Code:
#side-panel-trigger-open {
	position: absolute;
	top: 0;
	left: auto;
	right: 0;
	width: 40px;
	height: 40px;
	font-size: 20px;
	line-height: 40px;
	text-align: center;
	z-index: 1;
}

#side-panel-trigger-open a { color: #FFF; }

Now add the following HTML Code just before #side-panel-trigger-close Element: 

[](#)

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

HheadrushApr 14, 2016

Thank you very much guys that all worked brilliantly. really appreciate the help.

One small thing, when in mobile mode there is a close icon that appears over the reorder icon in the menu, how would that close icon be hidden.

Thank you
Matt

SSemicolon WebSTAFFApr 14, 2016

Hello,

You can simply remove the #side-panel-trigger-close Element from the HTML Code as the Side Panel Triggers act as Toggles. They either Open or Close the Side Panels based on their current state.

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

HheadrushApr 15, 2016

Again thank you very much, really appreciate the help here.

Please see:

http://headrushdesign.co.uk/sidemenu/side-panel-left-push3.html

There's a small issue. When I click the left menu the elements are jumping a little bit on transition across the page ie:

On menu expand, for instance look at the logo it jumps a few pixels to the left first before moving to the right meaning that it's not smooth like your original side menu page.

It does the same when collapsing the menu too look at the header background, you see a gap when collapsing.

I believe this would be some positioning CSS values somewhere but not sure?

I'm sure it's something you will know immediately, hope so :)

Regards
Matt

SSemicolon WebSTAFFApr 18, 2016

Hello,

Thank You so much for the Kind Words. :)

Apologize about this Error as this happens when we adjust the Padding on the Wrapper and Header Container. This can be fixed by simply adding the following CSS code:

body.side-panel-left.side-push-panel.stretched #wrapper,
body.side-panel-left.side-push-panel.stretched #header .container {
	-webkit-transition: left .4s ease, padding-left .4s ease;
	-o-transition: left .4s ease, padding-left .4s ease;
	transition: left .4s ease, padding-left .4s ease;
}

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

SSemicolon WebSTAFFApr 19, 2016

Hello,

It is Highly Recommended that you keep the Default Codes intact and add the Custom CSS Codes in the css/custom.css File and Link it in your Header. For Full Instructions, please check Documentation > Start > Customization Section. This will ensure that when we release an Update, you do not have to worry about Updating the Files and Losing your Customizations.

Using the css/custom.css File to override the Default CSS for the Side Panel with the Code we have provided above will work fine.

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

HheadrushApr 19, 2016

Thank you very much.

Ok will put that in practice

Thanks

SSemicolon WebSTAFFApr 20, 2016

Hello,

Really Happy that we could help you out this. Do let us know if you are still facing any issues with this.

HheadrushApr 20, 2016

Hello and thank you for helping with this

I have applied the css updates to the custom.css stylesheet from the original untouched HTML and CSS pages as you suggest.

There's now one small issue:

When the left menu is expanded the logo is fine when the page scrolls and the logo in the navigation is fine

However, when the left menu is collapsed and the page is scrolled the logo still jumps about.

Regards
Matt

SSemicolon WebSTAFFApr 21, 2016

Hello,

Please consider using this CSS Code replacing all the Previous Codes: 

body.side-panel-left #side-panel { left: -260px; }

body.side-panel-left.side-push-panel.stretched:not(.side-panel-open) #wrapper { padding-left: 40px; }
body.side-panel-left.side-push-panel.stretched:not(.side-panel-open) #header.sticky-header #logo { left: 40px; }

#side-panel-trigger-open {
	position: absolute;
	top: 0;
	left: auto;
	right: 0;
	width: 40px;
	height: 40px;
	font-size: 20px;
	line-height: 40px;
	text-align: center;
	z-index: 1;
}

#side-panel-trigger-open a { color: #333; }

body.side-panel-left.side-push-panel.stretched #wrapper,
body.side-panel-left.side-push-panel.stretched #header .container {
	-webkit-transition: left .4s ease, padding .4s ease;
	-o-transition: left .4s ease, padding .4s ease;
	transition: left .4s ease, padding .4s ease;
}

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

HheadrushApr 21, 2016

Yes :)

Hmm... that has fixed the scrolling jitter but has introduced a jitter on the expand collapse :(

Thank you very much for the help.

Best Regards
Matt

SSemicolon WebSTAFFApr 21, 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.

HheadrushApr 21, 2016

Hmm… that has fixed the scrolling jitter but has introduced a jitter to the logo on the expand collapse.

Thank you very much for the help.

Best Regards
Matt

SSemicolon WebSTAFFApr 21, 2016

Hello,

Apologize about the Issue. Please add the following CSS Code after the Previous CSS we have provided: 

body.side-panel-left.side-push-panel.stretched #header.sticky-header #logo {
	-webkit-transition: height .4s ease, margin .4s ease, opacity .2s .2s ease, left 0.4s ease;
	-o-transition: height .4s ease, margin .4s ease, opacity .2s .2s ease, left 0.4s ease;
	transition: height .4s ease, margin .4s ease, opacity .2s .2s ease, left 0.4s ease;
	left: 0;
}

Please let us know if you are still facing any further issues with 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.

HheadrushApr 21, 2016

Yes that has worked...

That's great and thanks again ;)

SSemicolon WebSTAFFApr 21, 2016

Hello,

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.

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