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

Sydney
#1

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

IMG_0821
IMG_0821.jpg1125×2001 256 KB
IMG_0820
IMG_0820.jpg1125×2001 477 KB

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!

#2

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

#3

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

#4

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

Thanks!

=Bobby=