Docs

[JAshwell]

Hi all.

Loving the theme, great flexibility and speed. Pretty much finished the build but I’m just having a few issues.

I’m building a site using a child theme on integrity stack using one page navigation. The versions can be seen below;
WP version: 4.6.1
Xtheme version: 4.6.4
Cornerstone version: 1.3.3

The issues I’m having are as follows:
1) The heading has been selected as fixed-top, but it’s not staying fixed on the screen as you scroll, its acting as a static-top.
2) The heading was selected as transparent and i then used jQuery to change the background colour to white as you scroll. (Both issues 1 & 2 worked fine whilst the website only had one section. But when the rest of the sections were added and the site was built they stopped working.)
3) The internal links aren’t scrolling when the navigation items are clicked on. The page seems to get stuck at the bottom of the first section. (BTW Each section has the correct id associated to the navigation item href)
4) The mobile menu (nav-collapsed) doesn’t disappear when you select an item.
5) If you select a fade effect on a section / row it works in the cornerstone preview, however when you view the actual site the corresponding section / row just doesn’t show!

Thanks in advance! 🙂

[Joao]

Thanks for writing in! 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. Once you have provided us with your URL, we will be happy to assist you with everything.

[JAshwell]

This reply has been marked as private.

[Joao]

Hi There,

As you have under construction plugin activated, please provide your admin credentials in a private reply.

Thanks

Joao

[JAshwell]

This reply has been marked as private.

[Lely]

Hi There,

1.) Please remove this custom CSS:

.home {
    height: 100vh;
}

It is not recommended to add fixed height.

2.) and #3 This is because of the same custom CSS on #1. That height forces your page just the same height with your browser thus cannot accommodate any more sections. This in turn make the scrolling irrelevant.

4.) Please try the suggestion here:https://community.theme.co/forums/topic/one-page-navigation-auto-hide-on-mobile-upon-anchor-click/#post-375409

5.)Can you clarify on which specific section this issue is present?

Hope this helps.

[JAshwell]

This reply has been marked as private.

[Lely]

Hello Jo,

Min-height will work on sections.

The issue I am seeing is, the button to open the header widget on the upper right part with the plus sign interferes with the position of your menu button. We either this widget to OFF on Appearance > Customize > Header >Header Widget Areas: Choose None. This is only applicable if you’re not intended to add widgets. In case, you have plans for the widget, we can move the button a little lower by adding the following custom CSS on Appearance > Customize > Custom > Edit Global CSS:

#nav-toggle {
   margin-top: 41px;
}
.x-navbar-fixed-top.alt-color .desktop .x-nav > li > a>span {
    color: #000000; /*Change navbar span to black*/
}

Hope this helps.

[JAshwell]

This reply has been marked as private.

[Rue Nel]

Hello Joe,

Please have the portion of your JS code updated and make use of this code instead:

(function($){
  $('.x-navbar .x-nav-wrap.mobile a').on('touchend click', function(){
    $('.x-nav-wrap.mobile').toggleClass('in').css('height', 0);
    $('.x-btn-navbar').toggleClass('collapsed');
  });
})(jQuery);

Please let us know how it goes.

[JAshwell]

This reply has been marked as private.

[JAshwell]

This reply has been marked as private.

[Rue Nel]

Hello There,

There is still a JS error on the page. Please have your code updated and use this whole JS code:

jQuery(document).ready(function($) {
  $(window).scroll(function() {
    var scrollPos = $(window).scrollTop(),
        navbar = $('.x-navbar-fixed-top');
    if (scrollPos > 500) {
      navbar.addClass('alt-color');
    } else {
      navbar.removeClass('alt-color');
    }
  });
});

jQuery(document).querySelector( "#nav-toggle" ).addEventListener( "click", function() {
  this.classList.toggle( "active" );
});

jQuery(function($){

  $(window).scroll(function(){
    if( $(this).scrollTop() == 0 ) {
      $('.x-navbar-fixed-top').removeClass('x-navbar-fixed-top');
    }
  });

  $( ".x-btn-navbar" ).on( "click", function() {
     $('.x-navbar').toggleClass('navbar-solid');
  });

  $(document).on('touchend click','.x-nav-collapse.in .x-nav-wrap.mobile.in .x-navbar-inner.in',function(e) {
    if( $(e.target).is('a') ) {
        $(this).collapse('hide');
    }
  });
});

Hope this helps.

[JAshwell]

Nope! No luck! The background of ‘navbar-solid’ now also only doesn’t work Ideally i’d have a one page overlay like this: http://advntr.co/

Thank you for your help so far. The last stubborn issues are as follows;
– mobile nav doesn’t auto collapse when an item is selected
– burger icon doesn’t change to black when the scroll position is reached.
– Mobile ‘collapsed’ menu should have a background regardless of its position so you can see the items.

Thanks in advance.

[JAshwell]

This reply has been marked as private.

[Author]

Posts