Docs

[educainventions]

With this code the navbar becomes fixed. Unfortunately the content is covered by the navbar:

@media (max-width: 979px) {
.x-navbar-fixed-top {
position: fixed !important;
}
}

I found the following code which did not work because the breadcrumbs remained below:

@media (max-width:979px){
.x-main {
margin-top: 67px;
}
}

It seems the problem is only in mobile.

[Nico]

Hi There,

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.

Thanks.

[educainventions]

Sure: http://www.educainventions.com 🙂

[Rupok]

Hi there,

Thanks for the URL. What you are getting is pretty expected. As you are making the Navbar “Fixed”, surely it will be on top of the Content. Would you clarify what you are trying to achieve?

Cheers!

[educainventions]

Sure. In my Android device (Samsung S4 with Android Lollipop and Chrome), I opne http://www.educainventions.com/team . Right after opening it, we can see the following:

Then we scroll down. Everything seem all right. Then we scroll up again till the top. Now the content is below the navbar (if we observe carefully, we will realice the breadcrumbs of the previous screenshot are now below the navbar).

[Rupok]

Hi there,

Thanks for updating. You can add this JavaScript under Custom > JavaScrip in the Customizer.:

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

setInterval(function() {
    if ($('.x-navbar').hasClass("x-navbar-fixed-top")) {
        $('.x-breadcrumb-wrap').addClass('x-breadcrumb-fixed-top');
    } else {
        $('.x-breadcrumb-wrap').removeClass('x-breadcrumb-fixed-top');
    }

}, 300);

});

And this CSS as well under Custom > CSS in the Customizer. :

@media (max-width: 979px) {
.x-breadcrumb-wrap.x-breadcrumb-fixed-top {
  margin-top: 63px;
}
}

Let us know how it goes.

Cheers!

[educainventions]

It works in that page (educainventions.com/contact). Unfortunately that’s not working in the main page. If we click on the down arrow:

We can see the content is below the navbar:

[Rupok]

Hi there,

Thanks for updating. It’s because you don’t have breadcrumb for homepage. You can try this CSS as well :

@media only screen and (max-width: 979px) {
body.home.x-navbar-fixed-top-active .x-navbar-wrap {
  height: 20px !important;
}
}

Cheers!

[educainventions]

It works. Unfortunately I’m observing a non nice behaviour I guess because a conflict with some other part of the code. It is specially noticeable in the educainventions.com/team page. If you swipe down, it shakes a lot. It is like a code of the css is trying to correct the position pushing it up, an another part of the code is trying to push it down. This is the global css code:

/* Sticky navbar in mobile*/
@media (max-width: 979px) {
.x-navbar-fixed-top {
position: fixed !important;
}
}

/* Transparency in navbar */
.x-navbar {
  background-color: rgba(255,255,255,0.90) !important; /* the last value .35 represents transparency*/
}

/* Shrink navbar when scroll down*/
.x-navbar.x-navbar-fixed-top .x-navbar-inner {
    min-height: 60px;
}

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
    height: 60px;
    padding-top: 30px;
    font-size: 16px !important;
}

/* Fixes content below navbar
in mobile. It also need js
code to work (see the 
Javascript custom code too)
*/
@media (max-width: 979px) {
.x-breadcrumb-wrap.x-breadcrumb-fixed-top {
  margin-top: 63px;
}
}

/* Fixes content below navbar
in mobile. It also need js
code to work (see the 
Javascript custom code too)
*/
@media (max-width: 979px) {
.x-breadcrumb-wrap.x-breadcrumb-fixed-top {
  margin-top: 63px;
}
}

Then I added the last custom css you gave at the custom css of that page (not global). The rest of the pages don’t have any custom css or javascript.

[Rupok]

Hi there,

Thanks for updating. Would you kindly provide your login credentials in a private reply so that we can check with some JS and provide the solution that works?

Cheers!

[educainventions]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for the credentials. I have tested and found an optimal solution for this. You need to update your JavaScript to following :

jQuery( function($) {    
      $(window).on("scroll", function () {    
    if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
      $('.x-breadcrumb-wrap').addClass('x-breadcrumb-fixed-top');
                }else {
                        $('.x-breadcrumb-wrap').removeClass('x-breadcrumb-fixed-top');
                }   
  }).scroll();
});

You still might see a small lag if you scroll very slowly but it won’t affect the usual behavior of site. Since fixed Navbar is not suitable for mobile rather you are forcing it to be fixed, so there is no better solution than this and further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities.

Hope this makes sense.

[educainventions]

It makes sense. However, your solution is working beautifully! Thank you very much! 🙂

[Paul R]

You’re welcome! 🙂

[Author]

Posts