Blog

Recently I updated my web site to a new, fresh look. I chose the great OceanWP theme (free version). While the build-in functionality is already awesome, I wanted my header to be sticky and transparent.

I searched for a solution and was inspired by this article, but got better results when using position: sticky instead of position: fixed. Furthermore, I wanted the top-header to always scroll and only the main header to be sticky.

For the transparency, I used a (non-transparent) minimal header in the UI and overrode it in the CSS. I just decided to start with black and make the background as transparent that it fits my desired gray color at the beginning.

To implement this I just added a few lines of CSS in the template customizer (Custom CSS/JS):

@media only screen and (min-width: 768px) {
  #site-header {
    position: sticky;
    top: 0;
    background-color: #000000e1 !important;
    transition: height .3s
  }
}

Then I wanted to add shrinking of the header height and the logo. For that I added a bit JavaScript (could be optimized…):

window.addEventListener('scroll', function (e) {
  if (window.innerWidth > 768) {
    if (window.scrollY >= 30 && document.getElementById('site-header').style.height !== '40px') {
      document.getElementById('site-header').style.height = '40px'
      var list = document.querySelectorAll('#site-navigation-wrap .dropdown-menu >li >a');
      for (i = 0; i < list.length; ++i) {
        list[i].style.setProperty('line-height', '40px', 'important');
      }
      var el = document.querySelector('#site-logo #site-logo-inner a img')
      el.style.setProperty('max-width', '100px', 'important');
      el = document.querySelector('#site-logo #site-logo-inner')
      el.style.setProperty('height', '40px', 'important');
    } else if (window.scrollY < 30 && document.getElementById('site-header').style.height !== '60px') {
      document.getElementById('site-header').style.height = '60px'
      var list = document.querySelectorAll('#site-navigation-wrap .dropdown-menu >li >a');
      for (i = 0; i < list.length; ++i) {
        list[i].style.setProperty('line-height', '60px', 'important');
      }
      var el = document.querySelector('#site-logo #site-logo-inner a img')
      el.style.setProperty('max-width', '130px', 'important');
      el = document.querySelector('#site-logo #site-logo-inner')
      el.style.setProperty('height', '60px', 'important');
    }
  }
});

You can see the result when scrolling this blog post. But my approach is considered to be a quick and dirty solution that may have unexpected side effects. If you want even more features and a more professional implementation, you could take a look at the commercial “Sticky Header” plugin-in from OceanWP.