Canvas Support

How to match the one page scroll after having changed the header height?

4 replies · opened Nov 2, 2016

MmakemeaWPNov 2, 2016

Hello,

First of all, congrats for your theme.

Second, I wanted to ask you how to do for matching the scroll in one page style menu after having changed the header height (I've used the Header Height CSS Generator to do it). I've changed the height from 70px to 90px (header and sticky header have the same height), but when you click on menu items the scroll position of the menu section doesn't match because the header is 20px higher. When the scroll reachs the section position, the sticky header overlaps this amount of pixels. I suppose that I have to put this change also in somewhere else, but where, maybe in functions.js?

Thanks in advance.

SSemicolon WebSTAFFNov 3, 2016

Hello,

We Really Apologize about the Inconveniences caused! Please find the topScrollOffset: function() Function Block in the js/functions.js File and replace the entire Block with the following code: 

topScrollOffset: function() {
	var topOffsetScroll = 0
		headerHeight = $headerWrap.outerHeight(),
		basePadding = 40;

	if( ( $body.hasClass('device-lg') || $body.hasClass('device-md') ) && !SEMICOLON.isMobile.any() ) {
		if( $header.hasClass('sticky-header') ) {
			if( $pagemenu.hasClass('dots-menu') ) { topOffsetScroll = headerHeight + basePadding; } else { topOffsetScroll = headerHeight + basePadding + 44; }
		} else {
			if( $pagemenu.hasClass('dots-menu') ) { topOffsetScroll = headerHeight + basePadding; } else { topOffsetScroll = headerHeight + basePadding + 44; }
		}

		if( !$pagemenu.length ) {
			if( $header.hasClass('sticky-header') ) { topOffsetScroll = headerHeight + basePadding; } else { topOffsetScroll = headerHeight + basePadding; }
		}
	} else {
		topOffsetScroll = basePadding;
	}

	return topOffsetScroll;
},

This should definitely fix your issue.

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

MmakemeaWPNov 3, 2016

Hello,

Thanks for replying. The new piece of code didn't change anything, but I've realized that I only had to change de data-offset value in menu, adding the pixel difference, and this works like a charm. So, problem solved!

Thank you very much.

:)

SSemicolon WebSTAFFNov 4, 2016

Hello,

We Really Apologize about the Inconveniences caused. We had checked out the Codes ourselves before providing them to you, so not really sure why it did not work for you. We will work on it again and try providing you with a Better Solution.

Yes, the data-offset always does the Trick, however since you are changing the Header Height, this should have worked automatically without needing to use the data-offset. We Really Apologize about 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.

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