Hamburger Menu missing from mobile view

Site URL: https://www.milanopizza.sg/

Hello,
Need help! Been trying to figure out why the main navigation or hamburger icon does not appear on the Home Page when using mobile.  Users cant navigate our site and cant access the other pages. 

This problem only occurs on the Home Page. Succeeding pages would have the hamburger icon. And when we click the hamburger icon from the other pages, the navigation menu would appear (please see screenshots below).   We're on version 7.1   (https://www.milanopizza.sg/)... 

Appreciate if you could help us. Thank you!

=======================
MOBILE VIEW (does not have the navigation menu or hamburger menu):

DESKTOP VIEW:

THE OTHER PAGES have the hamburger menu when using mobile:

The Navigation Menu appears when we click the hamburger menu from the other pages:

The Custom CSS has been set up to hide the header on the homepage.

#collection-60fe53d515592d3e1078688f header {
    display: none;
}

Unfortunately it appears some other manipulations of elements at the top of the page are going on in addition. This doesn't appear to be an easy fix without knowing the intent of the original design. Why was the header hidden in the first place? Nothing wrong with hiding mind you but again without knowing why it was done. It is hard to fix.

8 hours ago, creedon said:

The Custom CSS has been set up to hide the header on the homepage.

#collection-60fe53d515592d3e1078688f header {
    display: none;
}

Unfortunately it appears some other manipulations of elements at the top of the page are going on in addition. This doesn't appear to be an easy fix without knowing the intent of the original design. Why was the header hidden in the first place? Nothing wrong with hiding mind you but again without knowing why it was done. It is hard to fix.

Thank you for answering. I'm not very good with coding and rarely use Custom CSS.  It's not supposed to be hidden though. 

Quote

It's not supposed to be hidden though.

I'm going to take a stab at this.

It appears that the header that is provided by SS wasn't desirable on desktop on the homepage so a section was created at the top to replace the header. The real header was hidden causing unintended consequences.

If I've surmised correctly then here is what I suggest.

Remove (make a copy somewhere) or comment out the following from Design > Custom CSS.

#collection-60fe53d515592d3e1078688f header {
    display: none
}

Please see the following.

This is for the homepage. The first section will be not be used except for some top-padding that is needed for things to work.

Add the following to Page Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection.

<style>

  /*
  
    begin desktop header replace with second section
    
    Version       : 0.1d0
    
    SS Version    : 7.1
    
    Dependancies  : page section first blank hide
    
    By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
    
    */
    
    #header {
    
      display : none;
      
      }
      
    @media only screen and ( pointer : coarse ) and ( max-width : 1024px ), screen and ( max-width : 799px ) {
    
      #header {
      
        display : unset;
        
        }
        
      .page-section:nth-child( 2 ) {
      
        display : none;
        
        }
        
      }
      
    /* end desktop header replace with second section */
    
  </style>

This is for v7.1 and specific to the poster's need.

Let us know how it goes.