Sticky Header covering my content

Support
#1

Hey guys

I’ve built a template using Pro with a sticky header/navbar. But when visiting the site, it seems to be covering the top part of the main content.

I’ve searched and tried everything I can figure out - any ideas?

http://2017.oxyfire.co.uk/our-work/

#2

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

header.x-masthead {
    height: 6em;
}
#3

BINGO - thank you guys

#4

You’re welcome.

#5

Next issue:

One page navigation (or the ID section) isn’t respecting the header area,

http://2017.oxyfire.co.uk/what-we-do/ or http://2017.oxyfire.co.uk/what-we-do/#services to be more precise.

Any suggestions?

#6

Hello There,

Regretfully one page navigation is not fully supported in the custom header. I also noticed that the page itself does not use one page navigation menu. You are only linking to the section and since the custom header is fixed, it covers up the section. To resolve this issue, we need to add a custom JS.

jQuery(function($) {

  var $body                = $('body');
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  if ( $('body').hasClass('x-navbar-fixed-top-active') ) {
  	var navbarFixedTopHeight = $('.x-navbar-fixed-top-active .x-navbar').outerHeight();
  } else {
  	var navbarFixedTopHeight = $('.x-masthead .x-bar-fixed').outerHeight();
  } 
  
  var locHash              = null;
  var dragging             = false;

  var locHashIndex = location.href.indexOf('#');
  if ( -1 !== locHashIndex ) {
    locHash = location.href.substr(locHashIndex).split('/')[0];
  }

  $body.on('touchmove', function() {
	  dragging = true;
  } );

  $body.on('touchstart', function() {
	  dragging = false;
  } );


  //
  // Calculate the offset height for various elements and remove it from
  // the element's top offset so that fixed elements don't cover it up.
  //

  function animateOffset( element, ms, easing ) {

    if ( ! element ) {
      return;
    }

    try {
      var $el = $(element);
    } catch(error) {
      // abort on invalid selectors. see #610
      return;
    }

    if ( ! $el || 0 == $el.length ) {
      return;
    }

    $('html, body').animate({
      scrollTop: $el.offset().top - adminbarHeight - navbarFixedTopHeight + 1
    }, ms, easing);

  }


  //
  // Page load offset (if necessary).
  //

  $(window).load(function() {
    animateOffset(locHash, 1, 'linear');
  });


  //
  // Scroll trigger.
  //

  $('a[href*="#"]').on('touchend click', function(e) {
    href        = $(this).attr('href');
    notComments = href.indexOf('#comments') === -1;
    if ( href !== '#' && notComments ) {
      var theId = href.split('#').pop();
      var $el   = $('#' + theId);
      if ( $el.length > 0 ) {
        e.preventDefault();

        if (dragging) {
	        return;
        }

        animateOffset($el, 850, 'easeInOutExpo');
      }
    }
  });

});

Please let us know if this works out for you.

#7

I was having the same issue, but this CSS made no changes…

#8

Hi,

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation.

Thank you.

#9

Hello, I’m experiencing the same issue. I tried adding the code to the global CSS and it seems to have no effect.

You can view our website at http://www.vampsalon.com

Click on the “Location” link or select a stylist from the drop down menu and you can see the Text Headers are cut off at the top of each section.

This only is an issue when I assign a Pro Header, If I unassign the pro header then the scrolling work perfectly.

Thank you very much for your help!

Sincerely,
James Creston

#10

Hi there,

Your issue is different, it’s more on One page naviation issue which is just partially supported by Pro. The height of the sticky bar is not counted when it scrolls due to its dynamic nature. This is still on our issue tracker and our developers are still on it.

Thanks!