Fixed header menu overlaps anchors sections

joshpell
22 Posts
joshpell posted this 28 April 2016

I know this question has been asked before and I have had a looked at the solutions proposed solutions and they don't actually answer the question. As you can be seen the fixed navbar overlays the top of the section (attached image) and you can't see the Why Choose US.

This is a one page design in Wordpress using sections, this section is structured like this

<section class id data-section-title>
CONTENT
</section>

I have been trying to implement a solution using pure CSS as suggest here:

http://fellowtuts.com/html-css/offsetting-anchor-hash-tag-links-to-adjust-for-fixed-header/

For the example section above I have the following CSS.

#whuchooseus:before { 
    display: block; 
    content: " "; 
    height: 150px;      /* Give height of your fixed element */
    margin-top: -150px; /* Give negative margin of your fixed element */    
    visibility: hidden; 
}

I can see the before selector working when using firebug however when you navigate to the section it still headbutts the top of the browser window and the navbar overlays the top of the section (which is the standard behavior).

I have also tried to implement a JS solution based on using:

"While some of the proposed solutions work for fragment links (= hash links) within the same page (like a menu link that scrolls down), I found that none of them worked in current Chrome when you want to use fragment links coming in from other pages.
So calling www.mydomain.com/page.html#foo from scratch will NOT offset your target in current Chrome with any of the given CSS solutions or JS solutions.
There is also a jQuery bug report describing some details of the problem.

SOLUTION
The only option I found so far that really works in Chrome is JavaScript that is not called onDomReady but with a delay."

// set timeout onDomReady
$(function() {
    setTimeout(delayedFragmentTargetOffset, 500);
});



// add scroll offset to fragment target (if there is one)
function delayedFragmentTargetOffset(){
    var offset = $(':target').offset();
    if(offset){
        var scrollto = offset.top - 95; // minus fixed header height
        $('html, body').animate({scrollTop:scrollto}, 0);
    }
}

The above is based on the solution from here:
http://stackoverflow.com/questions/4086107/html-positionfixed-page-header-and-in-page-anchors

It would be greatly appreciated if I could get help to get either one of these solutions working for the site, I do also feel a number of people could use a general solution that could be fairly easily implement in any themler one page theme with a fixed navbar.

I know this question has been asked before and I have had a looked at the solutions proposed solutions and they don't actually answer the question. As you can be seen the fixed navbar overlays the top of the section (attached image) and you can't see the Why Choose US. This is a one page design in Wordpress using sections, this section is structured like this &lt;section class id data-section-title&gt; CONTENT &lt;/section&gt; I have been trying to implement a solution using pure CSS as suggest here: http://fellowtuts.com/html-css/offsetting-anchor-hash-tag-links-to-adjust-for-fixed-header/ For the example section above I have the following CSS. #whuchooseus:before { display: block; content: " "; height: 150px; /* Give height of your fixed element */ margin-top: -150px; /* Give negative margin of your fixed element */ visibility: hidden; } I can see the before selector working when using firebug however when you navigate to the section it still headbutts the top of the browser window and the navbar overlays the top of the section (which is the standard behavior). I have also tried to implement a JS solution based on using: "While some of the proposed solutions work for fragment links (= hash links) within the same page (like a menu link that scrolls down), I found that none of them worked in current Chrome when you want to use fragment links coming in from other pages. So calling www.mydomain.com/page.html#foo from scratch will NOT offset your target in current Chrome with any of the given CSS solutions or JS solutions. There is also a jQuery bug report describing some details of the problem. *SOLUTION* The only option I found so far that really works in Chrome is JavaScript that is not called onDomReady but with a delay." // set timeout onDomReady $(function() { setTimeout(delayedFragmentTargetOffset, 500); }); // add scroll offset to fragment target (if there is one) function delayedFragmentTargetOffset(){ var offset = $(':target').offset(); if(offset){ var scrollto = offset.top - 95; // minus fixed header height $('html, body').animate({scrollTop:scrollto}, 0); } } The above is based on the solution from here: http://stackoverflow.com/questions/4086107/html-positionfixed-page-header-and-in-page-anchors It would be greatly appreciated if I could get help to get either one of these solutions working for the site, I do also feel a number of people could use a general solution that could be fairly easily implement in any themler one page theme with a fixed navbar.
Vote to pay developers attention to this features or issue.
17 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 05 May 2016

Hi,

In general you just need to add some space at the very top of the Section.
This could be a margin-top of the first Text control or you can try Spacer control added to the top of the Section:

spacer.png

This control creates empty blocks with specified height. Simply set the height of the Spacer to be equal to the height of the menu bar.

Please keep us posted about the progress.

Thank you,
Olivia

Hi, In general you just need to add some space at the very top of the Section. This could be a margin-top of the first Text control or you can try Spacer control added to the top of the Section: !spacer.png! This control creates empty blocks with specified height. Simply set the height of the Spacer to be equal to the height of the menu bar. Please keep us posted about the progress. Thank you, Olivia
joshpell
22 Posts
joshpell posted this 09 May 2016

Hi Olivia,

I have used the spacer solution for the time being, however its not the "neat" solution that I wanted as it is adding extra spacing in each section which I wanted to avoid, Ill keep trying to get a working JS solution similar to the one above.

Hi Olivia, I have used the spacer solution for the time being, however its not the "neat" solution that I wanted as it is adding extra spacing in each section which I wanted to avoid, Ill keep trying to get a working JS solution similar to the one above.
shaulhadar
400 Posts
shaulhadar posted this 06 September 2016

Hi, did you find any solution for for this..?

Hi, did you find any solution for for this..?
joshpell
22 Posts
joshpell posted this 12 September 2016

No I didn't get to the elegant solution I wanted. I will be attempting again as I do have another one page design and if I figure it out this time I will post the solution here.

No I didn't get to the elegant solution I wanted. I will be attempting again as I do have another one page design and if I figure it out this time I will post the solution here.
shaulhadar
400 Posts
shaulhadar posted this 22 February 2017

is there any solution to this?

the extra space is kind of a problem to me to...
isn't there any way to add a constant offset so themler calculates the fixed header's height each time it scrolls to an anchor?

is there any solution to this? the extra space is kind of a problem to me to... isn't there any way to add a constant offset so themler calculates the fixed header's height each time it scrolls to an anchor?
joshpell
22 Posts
joshpell posted this 22 February 2017

I ended up just using additional padding, could not get consistent working solution using any other manner. The only other solution i would have is placing an anchor in the section you want to navigate set the display to hidden and pulling a negative margin on it equal to the height of the navbar, works but makes giving each section an id for a bit redundant. Hope that helps a bit.

I ended up just using additional padding, could not get consistent working solution using any other manner. The only other solution i would have is placing an anchor in the section you want to navigate set the display to hidden and pulling a negative margin on it equal to the height of the navbar, works but makes giving each section an id for a bit redundant. Hope that helps a bit.
gcg
45 Posts
gcg posted this 22 February 2017

Come on guys!

This have a very simple solution, create your ancho like this:

<div style="margin: -50px 0px 50px 0px; position: absolute;">
    <a id="myanchor"></a>
</div>

With -50px margin what i make is upper the anchor div, and with 50px margin, i push down the next content. You only have to make your test with your custom margins.

Works like a charm. I use this trick in all one page design websites.

Bye

Come on guys! This have a very simple solution, create your ancho like this: <div style="margin: -50px 0px 50px 0px; position: absolute;"> <a id="myanchor"></a> </div> With -50px margin what i make is upper the anchor div, and with 50px margin, i push down the next content. You only have to make your test with your custom margins. Works like a charm. I use this trick in all one page design websites. Bye
joshpell
22 Posts
joshpell posted this 22 February 2017

Yes this works (which was what I suggested in my last post) but it does make each section having its ID a bit redundant as this is what should ideally be used for "quick" setup of the nav on a single page instead of having to manually add an anchor to each section. But sometimes this is just the way it is when building.

Yes this works (which was what I suggested in my last post) but it does make each section having its ID a bit redundant as this is what should ideally be used for "quick" setup of the nav on a single page instead of having to manually add an anchor to each section. But sometimes this is just the way it is when building.
shaulhadar
400 Posts
shaulhadar posted this 23 February 2017

isn't there any way to create a css style for all the id's with a minus top margin and to put it in the custom css window in themler?

Also , another problem with the html code, it that it breaks the scroll spy plugin...
it does work good, but autonav does not work with this at all..

anyone has autonav working with this?

isn't there any way to create a css style for all the id's with a minus top margin and to put it in the custom css window in themler? Also , another problem with the html code, it that it breaks the scroll spy plugin... it does work good, but autonav does not work with this at all.. anyone has autonav working with this?

Last edited 23 February 2017 by shaulhadar

Support Team
Support Team posted this 27 February 2017

shaulhadar,

We've answered you in your Private topic.

Thank you,
Themler Team

shaulhadar, We've answered you in your Private topic. Thank you, Themler Team
shaulhadar
400 Posts
shaulhadar posted this 28 February 2017

Thanks , I read it and fixed the problem.

Thank you so much Themler team !!

Thanks , I read it and fixed the problem. Thank you so much Themler team !!
Support Team
Support Team posted this 28 February 2017

You are welcome. Feel free to contact us in any other occasion.

Sincerely,
Hella

You are welcome. Feel free to contact us in any other occasion. Sincerely, Hella
johnzeiger
8 Posts
johnzeiger posted this 14 March 2017

@shaulhadar - What was the solution that was given to you via your private topic?

@shaulhadar - What was the solution that was given to you via your private topic?

Last edited 14 March 2017 by johnzeiger

Bon-ICT
3 Posts
Bon-ICT posted this 20 March 2017

Can you please let me know what was the solution??

Thank you, Anne

Can you please let me know what was the solution?? Thank you, Anne
mburgener
19 Posts
mburgener posted this 27 April 2017

i am also interested in the final provided solution you gave to shaulhadar

regards

Mike

i am also interested in the final provided solution you gave to shaulhadar regards Mike
mburgener
19 Posts
mburgener posted this 12 May 2017

shaulhadar,

We've answered you in your Private topic.

Thank you,
Themler Team

Hi,

I need the same solution

kind regards

Mike

> shaulhadar, > > We've answered you in your Private topic. > > Thank you, > Themler Team Hi, I need the same solution kind regards Mike
Support Team
Support Team posted this 18 May 2017

Hello Mike,
the solution is not private, so I share it here:

This is typical problem for one page websites. And there are a few way to solve it:

  • add Spacer control with height equal to menu height into each Section
  • use anchor moved a little top. For example, an empty link with ID which moved with absolute positioning a little top from Section.
  • use special script which controls the scrolling. Unfortunately, Themler does not provide such script.

regards,
Aileen

Hello Mike, the solution is not private, so I share it here: This is typical problem for one page websites. And there are a few way to solve it: - add Spacer control with height equal to menu height into each Section - use anchor moved a little top. For example, an empty link with ID which moved with absolute positioning a little top from Section. - use special script which controls the scrolling. Unfortunately, Themler does not provide such script. regards, Aileen
You must log in or register to leave comments