Docs

[Raul M]

Hey X

I have the same issue explained by Bryan on this post: anchors on the One Page Navigation cut of by the navigation bar
https://community.theme.co/forums/topic/offsetting-anchor-so-top-of-content-is-not-cut-off-by-nav-bar/

I put the div you propose on my page and it’s working for my laptop version… but not for my mobile version, the bars still being cutted by the nav bar

http://awaodoriparis.com/fr/home2016/#programme

Thanks for your precious help!

[Christopher]

Hi there,

Please remove fixed height from divs, see the attachment.
If it doesn’t help, please remove following code and check again :

@media (max-width: 979px){
.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
    position: fixed;
}
}

Hope it helps.

[Raul M]

Hello Christopher,

Thanks for your answer but it doesn’t works AND your proposal make dissapears the navbar on the mobile version.

I need both :
– in mobile version the top bar has to be fixed
– and not cut the anchors by the nav bar (in desktop and mobile)

I made the modifications you proposed on the Japanese version
http://awaodoriparis.com/jp/home-jp-2016/#programme

And I keep unchanged (with the mobile nav bar fixed + the anchors OK on desktop version) on the French version
http://awaodoriparis.com/fr/home2016/#programme

Hoping you can find something to fix both 😉
Thanks for trying
Raul

[Paul R]

Hi Raul,

You can add this under Custom > Edit Global Javascript in the Customizer.

jQuery(function($) {
 
  
    $(window).scroll(function() {

      if ( $(this).scrollTop() >= topbarOffset() ) {        
        $('.x-topbar').addClass('x-topbar-fixed-top');
      } else {       
        $('.x-topbar').removeClass('x-topbar-fixed-top');
      }

    });
  function topbarOffset() {
    return $('.x-topbar').offset().top - $('#wpadminbar').outerHeight();
  }
});

Then add this in Custom > Edit Global Css

.x-topbar.x-topbar-fixed-top {
    position:fixed;
    width:100%;
    top:0;
    z-index:9999;
}

body .x-navbar.x-navbar-fixed-top {
   top:46px;
}

Hope that helps.

[Raul M]

Hello there !

Tried but nothing happens 🙁
the Japanese version still having the same problem with the java + css
http://awaodoriparis.com/jp/home-jp-2016/#programme

And the French version is working better without (but still not working on the mobile version)
http://awaodoriparis.com/fr/home2016/#programme

Maybe another solution?
Thanks for trying

[Nabeel A]

Hi there,

Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

@media screen and (max-width: 979px) {
.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
    position: fixed !important;
    top: 0 !important;
}
.x-topbar.x-topbar-fixed-top {
    position: relative !important;
}
}

Let us know how this goes!

[Raul M]

Still not working 🙁
But now the barnav is fixed on the mobile

You can have a look on the JP version (with you modifications proposal). If you click on the first red bouton プログラム on the yellow zone (top of the page) the anchor still arriving too low.

http://awaodoriparis.com/jp/home-jp-2016/

OLD CODE FOUND
I had a look to the Custom > Edit Global Javascript in the Customizer and I found this script you give me last year (I think is to try to resolve the same problem but sorry I can’t understand the code). I erased it to check only with your code… but still not working. I put it again. Maybe you can have a look and tell me if I keep it or not (I think the last part if for another fonction but I don’t know where to cut):

jQuery(document).ready(function($) {

  var $body           = $('body');
  var $bodyHeight     = $body.outerHeight();
  var $adminbarHeight = $('#wpadminbar').outerHeight();
  var $navbarHeight   = $('.x-navbar').outerHeight();

  $('.x-nav-scrollspy > li > a[href^="#"], a[href^="#"]').click(function(e) {
    e.preventDefault();
    var $contentBand = $(this).attr('href');
    $('html, body').animate({
      scrollTop: $($contentBand).offset().top - $adminbarHeight - $navbarHeight + 1
    }, 850, 'easeInOutExpo');
  });

});

(function($) {
  if (window.location.hash){
    var id = window.location.hash.substring(1);
  }

  $(window).load(function() {
    if (window.location.hash && $( window ).width() > 979 ){
      $('html, body').animate({
        scrollTop: $('#'+id).offset().top - 100
      }, 300);
   }
  }); 
})(jQuery);

(function( $ ) {
	$('.x-portfolio-filters').html('<i class="x-icon-sort"></i> アルバムを選択する');
})( jQuery );

I hope you can found a solution for this 🙁
Thanks
Raul

[Rad]

Hi there,

That code is only applicable for the navbar, your red buttons are part of the slider. And it’s not even a standard link <a></a>, it’s just standard layer and linking is executed by javascript.

<div class="tp-caption tp-resizeme noSwipe" id="slide-44-layer-17" data-x="['left','left','left','center']" data-hoffset="['-154','-154','-154','-2']" data-y="['top','top','top','top']" data-voffset="['813','813','813','551']" data-width="['500','500','500','1000']" data-height="73" data-whitespace="normal" data-transform_idle="o:1;" data-transform_in="opacity:0;s:1.875;e:Power2.easeInOut;" data-transform_out="opacity:0;s:280;" data-start="0" data-splitin="none" data-splitout="none" data-actions="[{&quot;event&quot;:&quot;click&quot;,&quot;action&quot;:&quot;simplelink&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;url&quot;:&quot;http:\/\/awaodoriparis.com\/jp\/home-jp-2016\/#programme&quot;,&quot;delay&quot;:&quot;&quot;}]" data-responsive_offset="on" style="z-index: 19; min-width: 366px; max-width: 366px; white-space: normal; font-size: 15px; line-height: 16px; font-weight: 400; color: rgb(255, 255, 255); visibility: inherit; transition: none; border-width: 0px; margin: 0px; padding: 0px; letter-spacing: 0px; min-height: 53px; max-height: 53px; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform-origin: 50% 50% 0px;"> </div>

The button itself is just text with no links

<div class="tp-caption tp-resizeme" id="slide-44-layer-16" data-x="['left','left','left','right']" data-hoffset="['42','42','42','10']" data-y="['bottom','bottom','bottom','bottom']" data-voffset="['13','13','13','111']" data-fontweight="['800','800','800','700']" data-width="none" data-height="none" data-whitespace="nowrap" data-visibility="['on','on','on','off']" data-transform_idle="o:1;" data-transform_in="opacity:0;s:310;e:Power2.easeInOut;" data-transform_out="opacity:0;s:310;" data-start="0" data-splitin="none" data-splitout="none" data-responsive_offset="on" style="z-index: 18; white-space: nowrap; font-size: 11px; line-height: 16px; font-weight: 800; color: rgb(255, 255, 255); font-family: Raleway; visibility: inherit; transition: none; border-width: 0px; margin: 0px; padding: 0px; letter-spacing: 0px; min-height: 0px; min-width: 0px; max-height: none; max-width: none; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform-origin: 50% 50% 0px;">プログラム </div>

How about adding those buttons as normal links within text layer? Then add unique class for each link.

Thanks!

[Raul M]

Thanks for your explanation.
I think we are arriving to the solution.

I create real buttons with links as you propose. And now EVERYTHING is going perfect on my French page (http://awaodoriparis.com/fr/home2016/)
– anchors arrive to the good place on the desktop AND mobile version
– barnav is fixed on the top for the mobile version

But I can’t understand why on my JP version when I put the same code the solution is not working. Can you please have a (last?) look here please : http://awaodoriparis.com/jp/home-jp-2016/
– anchors DON’T arrive to the good place on the desktop AND NEITHER mobile version
– barnav is OK and fixed on the top for the mobile version

Thanks for your help… we are close!

[Raul M]

AH apparently it was a cache problem!
NOW THAT’S WORKING 😀

Thanks for all your help
You’re awesome!
Merci beaucoup

[Joao]

Glad to hear it Raul

Let us know if we can help with anything else.

Joao

[Author]

Posts