Solved

Minimal Theme: Sticky/Fixed Header for Desktop and Mobile without including Logo Section

RETROAREA
Excursionist
12 0 7

Hey Shopify Community! I hope a Shopify Coding Pro can help me out with this important design issue. I am currently really struggling to adjust the design/placement of the header of my shop with scss-liquid. I am using the Minimal theme and my URL is: www.retroarea.de

If anyone has an idea how to solve the issue of letting the header appear fixed/sticky (mobile and desktop) but without including the logo section, as shown in the example pictures shown below. Here is the issue I still have with the code that exists for now:

1. Logo section is still included and I just want the light purple part to be fixed here.

 

Example pictures for ideal fixed header:

1. MOBILE

IMG_1623.jpg

2. DESKTOP

Bildschirmfoto 2021-08-26 um 15.08.06.png

 

 

My attempted coding, I have put in the end of my theme.scss.liquid:

#shopify-section-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99;
  background-color: $colorBody;
}

body {
  margin-top: 120px; 

 

Thanks a lot!

David / RETROAREA

Accepted Solution (1)

Developer-G
Shopify Partner
3032 593 846

This is an accepted solution.

Hello @RETROAREA ,

Use this css

  .header-bar{
  position: fixed;
    width: 100%;
    z-index: 9;
  }
  .site-header .wrapper{
  margin-top: -40px;
  }

 

Thanks

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter

View solution in original post

Replies 8 (8)

Not applicable

hii, @RETROAREA 
Do you want this part sticky?download (8).png
Thank You.

Developer-G
Shopify Partner
3032 593 846

This is an accepted solution.

Hello @RETROAREA ,

Use this css

  .header-bar{
  position: fixed;
    width: 100%;
    z-index: 9;
  }
  .site-header .wrapper{
  margin-top: -40px;
  }

 

Thanks

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
Not applicable

@RETROAREA 
Paste this code on top of the theme.scss file.

.header-bar {
    position: fixed !important;
    z-index: 1000 !important;
    width: 100% !important;
}

And Paste this code on top of the timber.scss file.

.logo__image-wrapper {
    position: relative !important;
    top: 32px !important;
}

Thank You.

RETROAREA
Excursionist
12 0 7

Thanks for your help, I already received the solution. 

Have a nice day!

RETROAREA
Excursionist
12 0 7

This worked great! I had to change the margin top to 60px and everything made sense. Thank you so much! David

RETROAREA
Excursionist
12 0 7

I NEED YOUR HELP

Hey there! 

I would need your help once again if possible! I just discovered that as a user of the mobile version of my website, you cannot scroll through all of the menu points, since the header was fixed / made sticky. I deleted the coding part down below to make it work again. Do you have any clue what was coded wrong or is missing that you can scroll through the whole menu again when using the site via mobile?

My theme: Minimal Theme
My url: www.retroarea.de

 

This one was my final coding that helped fixing my header bar in the desktop as well as mobile version:

@media only screen and (max-width: 768px) {

.slides__title {display: inline-block;}

.slides__title+.slides__btn {

    margin-top: 20px;

    display: inline-block;

}

.shopify-section:first-child .index-section {padding: 0 !important;}

.slideshow__mobile-text-container {display: none;}

}

.header-bar{

  position: fixed;

    width: 100%;

    z-index: 9;

  }

  .site-header .wrapper{

  margin-top: 65px;

  }

RETROAREA
Excursionist
12 0 7

*Sry, Coding only from header-bar part down:

.header-bar{

  position: fixed;

    width: 100%;

    z-index: 9;

  }

  .site-header .wrapper{

  margin-top: 65px;

  }

Developer-G
Shopify Partner
3032 593 846

Got it but it's beyond the help. If can share the idea how you can do it.
Use the code which was working for you as it was but in mobile remove it on click of menu hamburger.
In this way fixed header will work in both desktop/mobile and when customer open the mobile menu fixed header will disable and customer can scroll.

Thank

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter