How can I split the header section into two parts in code?

bertoloo
Excursionist
22 0 6

Hi guys! 

I know that it is possible to divide the Header into two sections, but I am having some difficulty understanding how to do it in code. I haven't worked on this for years and in the meantime I forgot some things.
The website that has an example of what I want is this https://www.eliesaab.com/

In addition to the Header being divided, the menu disappears when scrolled (this part I already understand, more or less, how to do).
I want to do it exactly like the one on the website I mentioned, which happened to be made on Shopify.

Can you help me?

Thank you in advance!

Replies 22 (22)

Abdosamer
Shopify Partner
821 146 165

Hi @bertoloo , you mean by divided in two part that the logo on top and the navigation on bottom?

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Work samples
bertoloo
Excursionist
22 0 6

Yes! That's right.
The Header has the logo, icons and menu together in the same section. I want to divide it into two, that is, in one line are the logo and icons and in a line below that is the menu (mega menu).
See the website I mentioned to better understand what I'm talking about.

https://www.eliesaab.com/

Abdosamer
Shopify Partner
821 146 165

@bertoloo , Can you share your store url ?

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Work samples
bertoloo
Excursionist
22 0 6
Abdosamer
Shopify Partner
821 146 165

@bertoloo , but you have a similar layout :

Abdosamer_0-1704585921238.png

 

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Work samples
bertoloo
Excursionist
22 0 6

Yes, but I want to divide the Header in two to make the menu disappear when scrolling down. And when you scroll up, the menu reappears. That's why I need to split the Header otherwise everything disappears together, and I don't want that.

Abdosamer
Shopify Partner
821 146 165

@bertoloo , you don't need to split the header to that , you can use this code to make the menu disappears without affecting anything else:

ul.list-menu.list-menu--inline {
    display: none;
}

 

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Work samples
bertoloo
Excursionist
22 0 6

Thanks! Do I put it in base.css or theme.liquid?

Abdosamer
Shopify Partner
821 146 165

@bertoloo , this piece of code was to show you that the menu could be invisible without dividing anything, but to implement the functionality that  when you scroll it disappear and when scroll up it appear again, we will need to add  javascript code.

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Work samples
bertoloo
Excursionist
22 0 6

You just answered the question I was going to ask now 😄
I found a website that explains how to do this, but Javascript is already at a level where I don't have much knowledge. 😅

https://css-tricks.com/scroll-fix-content/

Abdosamer
Shopify Partner
821 146 165

@bertoloo , I can send you an access request and implement the code for you.

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Work samples
bertoloo
Excursionist
22 0 6

If it's not too much trouble, would it be possible to share the code here? I know that more people will find this help very useful.

Thanks!

Abdosamer
Shopify Partner
821 146 165

@bertoloo , Sure , if you are comfortable with adding code , but first can you share your password of your store, I refreshed the page and now I can't enter without  a password.

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Work samples
bertoloo
Excursionist
22 0 6

Thank you @Abdosamer ! I remove de password.

https://c4478e-4.myshopify.com/

Abdosamer
Shopify Partner
821 146 165

@bertoloo , it seems that you add my code to remove the menu, can you please remove this code?

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Work samples
bertoloo
Excursionist
22 0 6

Yes, I did. But I already removed it again 😉
Please confirm.

Abdosamer
Shopify Partner
821 146 165

@bertoloo ,ok, follow these steps :
1-Go to base.css and add the following code :

.hide {
    display:none;
} 

2- Go to theme.liquid and add this code at the bottom before </body> tag :

<script>
 document.addEventListener('DOMContentLoaded', function() {
     let prevScrollPos = window.pageYOffset;
     window.addEventListener('scroll', function() { 
        const currentScrollPos = window.pageYOffset;
        
        if (prevScrollPos < currentScrollPos) {  
         document.querySelector('.list-menu--inline').classList.add('hide');
           
         else{
             document.querySelector('.list-menu--inline').classList.remove('hide');
          }  
          prevScrollPos = currentScrollPos;

   }
         

    }
      
});


</script>

 

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Work samples
bertoloo
Excursionist
22 0 6

@Abdosamer please confirm if I follow your instructions correctly

Screenshot 2024-01-07 at 01.25.43.pngScreenshot 2024-01-07 at 01.25.52.png

bertoloo
Excursionist
22 0 6

I refreshed the page, I closed it and opened it again but it's not working. Have I done something wrong?

I really need to go back to studying web programming 😅

Abdosamer
Shopify Partner
821 146 165

@bertoloo , I made a syntax error, anyway I found a better solutions with less code add this to base.css :

h1.header__heading {
    position: fixed !important;
    top: 50px !important;
}
Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Work samples
bertoloo
Excursionist
22 0 6

Hi @Abdosamer ! Thanks for helping me.

bertoloo
Excursionist
22 0 6

Screenshot 2024-01-07 at 00.14.07.pngFrom reading the website that has the Header as I intend, you can see that it is divided. What I don't realize is that I have to rewrite my site's theme code for the Header or if it's enough to make small changes.