Docs

[Hugo Gerritsen]

Dear Themeco,

On a website of my client http://szensa.nl the navbar covers the titels of each section when clicking on the menu links. This only happens with the sticky navbar. Do you have any solution for this? I’ve been working on it for hours now, but I can’t seem to find the solution yet.

Thanks!

[Hugo Gerritsen]

This reply has been marked as private.

[Nico]

Hi There,

Thanks for writing in

You could follow the link below on how to adjust the offset

https://community.theme.co/forums/topic/onepage-section-offset/

Hope it helps.

Let us know how it goes.

Thanks.

[Hugo Gerritsen]

Dear Nico,

Thanks! I already tried that one, but that made the menu item ‘active’ state incorrect. It added the .current-menu-item state too late, which led to showing another menu item active, when clicking on the one I wanted to scroll to.

I also found a section doing this in ScrollSpy, but I can’t seem to find a solution to this matter.

Kind regards,

Hugo

[Rue Nel]

Hello There,

The issue was a result your custom JS code to make your topbar positioned as fixed. Perhaps, you can try this thread and see how it goes; https://community.theme.co/forums/topic/sticky-topbar/#post-795687

At the moment and with your current JS code, to correct the position of the section upon clicking on the menu, please add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

(function($){

  if ( $('body').hasClass('x-one-page-navigation-active') ) {

    $('.menu-item a').each(function(){
      var pageAddress = $(this).attr('href');
      var yloc = $(pageAddress).offset().top - 92;

      console.log($(pageAddress).offset().top);
      console.log('tab: ' + pageAddress + ', yloc: ' + yloc);

      $(this).on('touchend click', function(){
        $('html, body').animate({
          scrollTop: yloc
        }, 850, 'easeInOutExpo');
      });

    });

  }
  
})(jQuery);

Please let us know how it goes.

[Hugo Gerritsen]

Thank you! I used to ‘fixed topbar’ solution, but had to alter it a bit.

In my case I needed to fix the brand section of the stacked header. So I included the brand coding inside the navbar-wrap. See below. Might come in handy when someone else gets stuck with the same thing.

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAVBAR.PHP
// -----------------------------------------------------------------------------
// Outputs the navbar.
// =============================================================================

$navbar_position = x_get_navbar_positioning();
$logo_nav_layout = x_get_logo_navigation_layout();
$is_one_page_nav = x_is_one_page_navigation();

?>

<?php if ( ( $navbar_position == 'static-top' || $navbar_position == 'fixed-top' || $is_one_page_nav ) && $logo_nav_layout == 'stacked' ) : ?>

  <div class="x-navbar-wrap">
    <div class="<?php x_navbar_class(); ?>">

      <?php x_get_view( 'global', '_topbar' ); ?>

      <div class="x-logobar">
        <div class="x-logobar-inner">
          <div class="x-container max width">
            <?php x_get_view( 'global', '_brand' ); ?>
        </div>
      </div>
    </div>

      <div class="x-navbar-inner">
        <div class="x-container max width">
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
        </div>
      </div>
    </div>
  </div>

<?php else : ?>

  <div class="x-navbar-wrap">
    <div class="<?php x_navbar_class(); ?>">

      <?php x_get_view( 'global', '_topbar' ); ?>

      <div class="x-navbar-inner">
        <div class="x-container max width">
          <?php x_get_view( 'global', '_brand' ); ?>
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
        </div>
      </div>
    </div>
  </div>

<?php endif; ?>

You guys are awesome!

[Rue Nel]

Hello There,

We are just glad that you have figured it out a way to correct the said issue. Thanks for letting us know!
If you need anything else we can help you with, don’t hesitate to open another thread.

Best Regards.

[Author]

Posts