Sticky Header and NavBar won't align with top of page

• 

  scruzzer · Member · Aug 11, 2018 at 10:31 pm

  • Copy link
  • Add topic to favorites

  Hi – I’m using Header Footer Elementor and built a header with a nav bar below it. If the header is sticky, it works great. But I want the header and the navbar to BOTH be sticky. If I use Elementor to make them both sticky, the navbar with slide up over the header upon scrolling. I created a section and nested both header and navbar in that section. Now they’re both sticky and not scrolling over each other. Great, but now there’s a space between the top of the page and my header. When I scroll I can the page scroll up in the space between the header and top of page.

  I just want my header to be at the top of the page with the nav bar firmly attached to it. If anyone can help I’d be so appreciative.

  Here’s the site: http://musiciansmobile.com

  I’m using GeneratePress. The header css for the theme is:
  <?php
  /**
  * The template for displaying the header.
  *
  * @package GeneratePress
  */
  [redacted]

• 

  dkmyta · Member · Aug 11, 2018 at 10:42 pm

  • Copy link

  Hey there,

  It looks like Elementor by default sets the padding for the sticky section to 10px. The following CSS should clear it up.

  .elementor-column-gap-default>.elementor-row>.elementor-column>.elementor-element-populated {
      padding: 0px;
  }
  

  For future reference though, this website is actually a self-hosted WordPress.org site rather than WordPress.com.

  This forum is designed to help clients hosted by WordPress.com. For more information on the difference between the two please check out this link: https://en.support.wordpress.com/com-vs-org.

  If you are in need of any further support for your self-hosted website you may be able to find an answer on the WordPress.org support page at the link provided: https://wordpress.org/support/ or as an alternative you may want to contact your hosting provider.

  Hopefully this helps!

  Cheers