Fix header

[NOT1]

Stick announcemnt bar and header all time 

[BSSCommerce-HDL · Accepted solution]

Hi @NOT1, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

  <style>
.utility-bar:has(.announcement-bar) {
    position: fixed !important;
    width: 100vw;
    top: 0;
    left: 0;
    height: 38px;
}

.header-wrapper {
    position: fixed !important;
    width: 100vw;
    top: 38px;
    left: 0;
}

main#MainContent {
    margin-top: 103px;
}
  </style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-HDL · Accepted solution]

Hi @NOT1, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

  <style>
.utility-bar:has(.announcement-bar) {
    position: fixed !important;
    width: 100vw;
    top: 0;
    left: 0;
    height: 38px;
}

.header-wrapper {
    position: fixed !important;
    width: 100vw;
    top: 38px;
    left: 0;
}

main#MainContent {
    margin-top: 103px;
}
  </style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[NOT1]

It worked

[BSSCommerce-HDL]

@NOT1, Glad to help you. Have a good day 😍

[NOT1]

Thanks 

[NOT1]

Hey i just want it for pc is it possible 

[BSSCommerce-HDL · Accepted solution]

Hi @NOT1, Pls replace old code to new code: 

  <style>
@media only screen and (min-width: 768px) {
.utility-bar:has(.announcement-bar) {
    position: fixed !important;
    width: 100vw;
    top: 0;
    left: 0;
    height: 38px;
}

.header-wrapper {
    position: fixed !important;
    width: 100vw;
    top: 38px;
    left: 0;
}

main#MainContent {
    margin-top: 103px;
}
}
  </style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[NOT1]

Cảm ơn rất nhiều

[BSSCommerce-HDL]

@NOT1, No problem. If you have any problem please let me know 😍