How do I make the header "not fixed" at the top?

[WestervilleGIS]

I wanted to know how I could modify the CSS and/or HTML to make the header of my Hub page "not fixed" so that it will go away when scrolling through the page.  I have attached the CSS and HTML which was just the basic code that was generated by the site when I clicked on Custom HTML/CSS as the option.  All I have done is updated some colors and the image and links.  Any help would be appreciated!

[KlaraSchmitt]

Hello,

Unfortunately, changing your header from fixed to static is currently not offered. It was implemented as fixed at a level is above the Custom Header option, so you wouldn't be able to affect it from our code editors. The reason we use a fixed header is because in many parts of the app, especially portions that have long lists of content (such as search results), you wind up doing a lot of scrolling on mobile devices. It's a usability best practice to keep the header visible because it lets people get around quickly, rerun searches, or exit their current page without having to scroll all the way back up. 

If you find your custom-header takes up too much space on mobile devices, you might be able to use media queries to change the height and style of it.

[joe_allen]

There a couple ways. The one below is probably the safest. (Be sure to test as much as possible, on all screen sizes).

Add the following to the Header custom css section:

header {
  position: relative;
  margin-top: calc(var(--header-height) * -1);
}

,