FIXED HEADER PROBLEMS

Technical Q&A
,
1

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!!

2

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

3

Hi @sosober

Can I know what problem you are getting?