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

Solved
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

0 Likes
Varun_Mishra
Explorer
190 20 41

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on This Email regarding any help.
Guleria
Shopify Partner
1781 377 532

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

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
If helpful then please Like and Accept Solution.
Buy me a coffee ☕ My PayPal
Varun_Mishra
Explorer
190 20 41

@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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on This Email regarding any help.
RETROAREA
Excursionist
12 0 7

Thanks for your help, I already received the solution. 

Have a nice day!

0 Likes
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;

  }

Guleria
Shopify Partner
1781 377 532

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

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
If helpful then please Like and Accept Solution.
Buy me a coffee ☕ My PayPal