Fixed header

[Billeskov]

Hello,

I have installed Fixed Header by Mypresta.eu.

But when I scroll, some of the content disappears.

What code should i change?

I need my logo, seachbar and menu bar to be fixed.

URL: www.billeskov.nu

[Ewonta]

Hello, if possible, send a screenshot so that it would be clear what you are talking about.

[Billeskov]

See video.

I want fixed logo with seach and menu.

[Ewonta]

There are no such problems in the chrome browser, which browser do you have?

[Billeskov]

I use Chrome.

Can you se the banner missing some content when i scrool. Is the samme on mobilephone.

You can see it on the video, when it switch from fixed to non fixed.

[Ewonta]

To ensure your header stays fixed without issues and doesn’t shift the layout upward, you need to add a margin equal to the height of the fixed header.

For example, if you pay attention to the class added during scrolling, omg_im_fixed, it indicates that the header has been fixed. In this case, we add a layout offset equal to the height of the header.
 

.omg_im_fixed main { 
	margin-top: 379px; 
}

In this scenario, the layout won’t jump unexpectedly.

However, it’s better to calculate the header height using a JavaScript script and automatically set the offset distance for the layout.

This is a concept and requires further refinement.

[Billeskov]

I have change:

Fixedheader.css

@media (min-width: 576px){
    .omg_im_fixed .modal-dialog {
        margin-top:379px!important;
    }
}

But it not work.

"However, it’s better to calculate the header height using a JavaScript script and automatically set the offset distance for the layout."

Have you a eksmpel on that?

I have this javascript rigt now.

$(document).ready(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('#header').addClass("header_omg_im_scrolled");
            $('body').addClass("omg_im_fixed");
        } else {
            $('#header').removeClass("header_omg_im_scrolled");
            $('body').removeClass("omg_im_fixed");
        }
    });
});

 

[Ewonta]

    var headerHeight = $('#header').outerHeight();

    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('#header').addClass("header_omg_im_scrolled");
            $('body').addClass("omg_im_fixed");
 
            $('main').css('padding-top', headerHeight + 'px');
        } else {
            $('#header').removeClass("header_omg_im_scrolled");
            $('body').removeClass("omg_im_fixed");
  
            $('main').css('padding-top', '0');
        }
    });