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

[bertoloo]

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!

[Abdosamer]

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

[bertoloo]

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]

@bertoloo , Can you share your store url ?

[bertoloo]

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

[Abdosamer]

@bertoloo , but you have a similar layout :

[bertoloo]

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]

@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;
}

[bertoloo]

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

[Abdosamer]

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

[bertoloo]

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]

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

[bertoloo]

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]

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

[bertoloo]

Thank you @Abdosamer ! I remove de password.

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

[Abdosamer]

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

[bertoloo]

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

[Abdosamer]

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

[bertoloo]

@Abdosamer please confirm if I follow your instructions correctly

[bertoloo]

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]

@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;
}

[bertoloo]

Hi @Abdosamer ! Thanks for helping me.

[bertoloo]

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