FIXED HEADER PROBLEMS

[sosober]

I am having some problems with my header as on my setting I selected the fixed header but it is not working.

How can I solve it?

www.sosober.it
password: mohwhi

Thank you!!

[Olamzstudio]

To fixed this kind of issues 

Add Custom CSS Code

You can add custom CSS code to your theme's stylesheet to make the header sticky. Here's an example:

- Go to Online Store > Themes > Actions > Edit code

- Open the `theme.scss.liquid` file in the Assets folder

- Add the following code at the bottom:

#shopify-section-header {

  position: fixed;

  z-index: 1000;

  left: 0;

  right: 0;

  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);

  background-color: {{ settings.color_body_bg }};

}

#PageContainer {

  padding-top: 80px;

}

- Save the changes

Or try to Modify JavaScript Code

You may also need to modify the JavaScript code to adjust the header's position dynamically:

- Open the `theme.js` file in the Assets folder

- Add the following code at the bottom:

function headerSize() {

  var $headerHeight = $('div#shopify-section-header').outerHeight();

  $('#PageContainer').css('padding-top', $headerHeight);

}

$(window).on("load", headerSize);

$(window).on("resize", $.debounce(500, headerSize));

- Save the changes

Using of Alternative CSS also 

- Add the following code to your stylesheet:

header#SiteHeader {

  position: fixed !important;

  width: 100% !important;

}

- Save the changes

If none of these

solutions work, feel free to let me know 

[Dan-From-Ryviu]

Hi @sosober 

Can I know what problem you are getting?