Mobile Layout Hamburger menu overlapped by top row with pages and posts

Hello,
I’m using the Sydney theme and the top row overlaps the hamburger menu on both posts and pages.

How can I get the top row on pages and posts from overlapping the hamburger menu?

http://www.alohajam.net/dereks-offroad-adventure/
http://www.alohajam.net/

Thanks!

Hello there,

Please try adding the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 1024px) {
        
      .site-header,
      .site-header.fixed, 
      .site-header.float-header {
        position: absolute !important;
        padding: 20px 0 !important;
      }
      
      .header-clone {
        display: block !important;
      }
      
    } 

Regards,
Kharis

Hi Kharis,
I tried adding it, but I don’t see any changes to the issue.
Check out the links on mobile:
Home page: http://www.alohajam.net/
Post page: http://www.alohajam.net/dereks-offroad-adventure/

Could there be other code overriding it?

Here is my custom CSS page:

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

  .site-header,
  .site-header.fixed, 
  .site-header.float-header {
    position: absolute !important;
    padding: 20px 0 !important;
  }
  
  .header-clone {
    display: block !important;
  }
  
} 

@media screen and (max-width: 320px){
.slides-container .slide-item {
background-size: contain;
}
.header-slider{
height: 213px !important;
}
}

.site-info.container {
display: none;
}

nav#mainnav ul {
margin-top: 70px;
margin-bottom: 10px;

}

nav#mainnav li {
margin-bottom: 10px;

}

.page header.entry-header {
display: none;
}

td, th {
border: none;
}

.panel-grid .row-overlay {
display: none;
}

.single-post .hentry .entry-header {
display: none;
}

.page-wrap {
margin-top: -100px !important;
}

.header-slider {
margin-bottom: -100px !important;
}

.post-navigation {
display: none;
}

.site-header {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background-color: #000000;
padding: 20px 0;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

.page .content-area .panel-grid:last-child .panel-row-style, .single .content-area .panel-grid:last-child .panel-row-style,
.page .page-wrap .content-wrapper, .single .page-wrap .content-wrapper,
.page .page-wrap, .single .page-wrap {
padding-bottom: 0 !important;
}

.site-header.fixed {
position: fixed;
}

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

#primary .panel-grid-cell {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0 !important;
}

}

.page-wrap {
padding-bottom: 0 !important;
}

.entry-footer {
display: none !important;
}

.page .page-wrap .content-wrapper {
padding-bottom: 0 !important;
}

.content-area .hentry {
padding-bottom: 0 !important;
}

.page .page-wrap .content-wrapper {
padding-top: 0 !important;
}

.single-post .page-wrap .content-wrapper {
margin-top: -15px !important;
padding-top: 0 !important;
}

Hi Kharis,
Any further ideas on how to fix the issue?

Thanks!

=Bobby=