Docs

[Transfac]

I have a fixed navbar and would like to attach a form — found within the first section of my page — to it so that the navbar and form will follow the user as they scroll down the page. Also, how would I go about doing the same for mobile?

[Friech]

Hi There,

Thank you for writing in! If you would not mind please provide us the site URL so we can take a closer look, and please clarify how do you want this form to position on desktop and mobile view. Screenshot would be appreciated.

Cheers!

[Transfac]

The website is dev.transfac.com. I would like to have the form located directly under the navbar to be fixed to it so that the form and menu follow the guest as they scroll down the page. I have attached some images for both desktop and mobile versions to give you an idea of what I am looking to do.

[Rupok]

Hi there,

Thanks for clarifying.

You can add this under Custom > JavaScript in the Customizer.

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

Then add this under Custom > CSS in the Customizer.

.x-section-fixed-top {
    position: fixed;
    top: 92px;
    left: 0;
    right: 0;
    z-index: 99;
}

Hope this helps.

[Transfac]

That worked like a charm! Thank you for your help

[Prasant Rai]

You are most welcome. 🙂

[Transfac]

I just did a quick review and saw that the navbar doesn’t follow down the page on mobile. Is there a way to change that?

[Jade]

Hi there,

Would you mind clarifying on what you mean by the navbar does not follow down the page on mobile? I checked the page but I can’t seem to find the issue.

[Transfac]

Also, I placed the text “Better service. Faster financing.” into a separate section to remove it from the fixed navigation and now the form is not scrolling down with the navbar.

[Transfac]

On my phone, the navbar isn’t fixed to the page (it doesn’t follow the user as they scroll down). I am also seeing that the text “Better service. Faster financing.” is being grouped into the buttom “No Obligation Quote.”

[Transfac]

Any update?

[Lely]

Hello There,

It is fixed when I checked on mobile. See attached screenshot. I saw that you have added this custom CSS:

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

Better Financing text is behind the navbar since it is now fixed. To move it below, please also add this CSS:

@media (max-width: 979px){
.hentry:first-child {
    margin-top: 160px;
}
}

Additionally, for future reference we kindly ask that our users not bump their threads as stated in our support policy. Since we answer questions from oldest to newest and bumping a thread makes it appear as brand new, this will only serve to lengthen our response time. Replies in the forum can take up to 24 hours during the week, but oftentimes we are able to get to questions much quicker than that. We request that our users wait patiently while we work our way through the forum as we can assure you that all questions will be addressed as soon as possible.

[Transfac]

My apologies. Everything looks great! Thanks for all your help

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts