Canvas Support

implementing static- sticky across all break points

7 replies · opened Jun 2, 2016

HheadrushJun 2, 2016

I want to keep the static sticky top nav across all, at the moment I see the default is to only have it at the large screen sizes.

Is it possible to have across all including mobile.

Thank You
Matt

SSemicolon WebSTAFFJun 3, 2016

Hello,

This is Definitely Possible. Find the following codes in the css/responsive.css File: 

#header.responsive-sticky-header:not(.sticky-style-2):not(.sticky-style-3) { min-height: 60px; }

.responsive-sticky-header #logo,
.responsive-sticky-header #logo img { height: 60px; }

.responsive-sticky-header #primary-menu-trigger { top: 5px; }
.responsive-sticky-header #top-search a,
.responsive-sticky-header #top-cart,
.responsive-sticky-header #side-panel-trigger { margin: 20px 0; }

.responsive-sticky-header #top-search form { height: 60px !important; }

.responsive-sticky-header #top-cart .top-cart-content { top: 40px; }

and replace it with: 

#header.responsive-sticky-header:not(.sticky-style-2):not(.sticky-style-3):not(.static-sticky) { min-height: 60px; }

.responsive-sticky-header:not(.static-sticky) #logo,
.responsive-sticky-header:not(.static-sticky) #logo img { height: 60px; }

.responsive-sticky-header:not(.static-sticky) #primary-menu-trigger { top: 5px; }
.responsive-sticky-header:not(.static-sticky) #top-search a,
.responsive-sticky-header:not(.static-sticky) #top-cart,
.responsive-sticky-header:not(.static-sticky) #side-panel-trigger { margin: 20px 0; }

.responsive-sticky-header:not(.static-sticky) #top-search form { height: 60px !important; }

.responsive-sticky-header:not(.static-sticky) #top-cart .top-cart-content { top: 40px; }

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

HheadrushJun 6, 2016

Hmm that doesnt seem to have worked.

My responsive css has an extra class after line 1 that is not mentioned in your advice, I included this and inserted this in the same place in your updated css, is that wrong?:

.responsive-sticky-header #header-wrap {
z-index: 199;
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #FFF;
border-bottom: 1px solid #EEE;
-webkit-backface-visibility: hidden;
}

I have a live instance here with the update you suggest where it does not seem to have any effect.

http://www.matthewardmills.co.uk/OPL4/side-panel-left-overlay-9.html

Any ideas what could be wrong?

Thank you

SSemicolon WebSTAFFJun 7, 2016

Hello,

We have just checked out your Website and the issues are:

  1. You will need to add the .sticky-responsive-menu to the <body> to activate the Responsive Headers on Mobile Devices.

  2. Make sure you change the Codes mentioned above Directly in the css/responsive.css File only.

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

HheadrushJun 13, 2016

My responsive.css seems different it has more classes in between so from lines 738-772 it has:

#header.responsive-sticky-header:not(.sticky-style-2):not(.sticky-style-3) { min-height: 60px; }

.responsive-sticky-header #header-wrap {
	z-index: 199;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #FFF;
	border-bottom: 1px solid #EEE;
	-webkit-backface-visibility: hidden;
}

.responsive-sticky-header #logo,
.responsive-sticky-header #logo img { height: 60px; }

.responsive-sticky-header #primary-menu-trigger { top: 5px; }

.responsive-sticky-header #primary-menu > ul,
.responsive-sticky-header #primary-menu > .container > ul {
	max-height: 300px;
	overflow-y: scroll;
	margin-bottom: 20px;
}

.responsive-sticky-header #primary-menu > ul,
.responsive-sticky-header #primary-menu > .container > ul { margin-bottom: 20px !important; }

.responsive-sticky-header #top-search a,
.responsive-sticky-header #top-cart,
.responsive-sticky-header #side-panel-trigger { margin: 20px 0; }

.responsive-sticky-header #top-search form { height: 60px !important; }

.responsive-sticky-header #top-cart .top-cart-content { top: 40px; }

DO i simply overpaste the whole section or do i need to leave these extra classes in place and only replace the specific matching lines

thank you

SSemicolon WebSTAFFJun 14, 2016

Hello,

Yes you will need to Replace only the Lines that we have posted above. Here is the Breakdown:

#header.responsive-sticky-header:not(.sticky-style-2):not(.sticky-style-3) { min-height: 60px; }

to this: 

#header.responsive-sticky-header:not(.sticky-style-2):not(.sticky-style-3):not(.static-sticky) { min-height: 60px; }

then: 

.responsive-sticky-header #logo,
.responsive-sticky-header #logo img { height: 60px; }

to this: 

.responsive-sticky-header:not(.static-sticky) #logo,
.responsive-sticky-header:not(.static-sticky) #logo img { height: 60px; }

and so on...

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

HheadrushJun 14, 2016

I have updated it as instructed, it seems to have worked almost perfectly but there is one thing that is happening. On scroll the whole nav is expanding down a little so I removed the 20px bottom padding from this line which is one of the lines that didn't get an edit:

.responsive-sticky-header #primary-menu > .container > ul { margin-bottom: 20px !important; }

It seems to have stopped the nav bar expanding on scroll, is that right?

SSemicolon WebSTAFFJun 15, 2016

Hello,

We Really Apologize that we had accidentally missed this part! The Deleted Code would definitely fix this issue and would work fine.

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