Menu icon Foundation
6.3.0 - sticky header and off canvas

6.3.0 - I am trying to get the sticky header and off canvas and running into issues.   With 6.3.0 when I scroll the page the header sticks, but if I click on the hamburger and off canvas menu pushes in from the right.  The header becomes un-sticky and disappears.   In the version before it would just move to the side.   

Been wracking my head on how to work around this for 2 days now. Does anyone have any suggestions?  

 

 

sticky headeroff canvasscrolling6.3.0

6.3.0 - I am trying to get the sticky header and off canvas and running into issues.   With 6.3.0 when I scroll the page the header sticks, but if I click on the hamburger and off canvas menu pushes in from the right.  The header becomes un-sticky and disappears.   In the version before it would just move to the side.   

Been wracking my head on how to work around this for 2 days now. Does anyone have any suggestions?  

 

 

Nicholas Maietta over 1 year ago

Instead of relying on JS, i've been tinkering with a simple CSS only sticky method as follows:

 

Just apply the sticky class to the elements you want to stay at the top of your page. For a topnav situation, this is my solution. But for others they will need to tweak this. I have not tested this on other browsers.

 

html {

  box-sizing: border-box;

}

html, body {

  overflow: hidden;

}

 

*, *:before, *:after {

  box-sizing: inherit;

}

body {

height: 100%;

overflow: scroll;

}

.sticky {

position: -webkit-sticky;

position: sticky;

top: 0px;

}

manojkumars over 1 year ago

 Old Navy is an e-commerce website to shop online for Women. If you an American resident then you can easily shop from the old navy online platform and then you can get your favorite item to your doorstep. So if you are already on the old navy user, but you couldn’t able to pay your payment via Oldnavy online platform. So to know the steps to et your payment done then you can follow the complete article.ebates login