Navigation covering blog

Hello, 

Hoping someone can help. I have customised my navigation which works fine on all pages except the blog page - which it covers the top of the post. I have tried what another member recommended in this forum but it didn't work. It temporarily fixes it on the demo site, but not on the actual live website.

This is the page: https://yogawithemilyhexham.com/blog

I have the following custom code in place:

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

  .Footer h3 {

    text-align: center !important;

  }

  .Footer p, h1 {

    text-align: center !important;

  }

#block-yui_3_17_2_1_1573592583666_35107{ 

display: block;

  margin-left: auto;

  margin-right: auto;

  width: 40%;

  }

  

#block-yui_3_17_2_1_1573592583666_40998{ 

display: block;

  margin-left: auto;

  margin-right: auto;

  width: 40%;

  }

  #block-yui_3_17_2_1_1575574235567_13445{ 

display: none;

  margin-left: 68px;

  margin-right: 10px;

  width: 40%;

  }

  h2 { 

    text-align: center;}

}

 

b,strong {

   font-family: 'Libre Baskerville', serif;

   font-weight: 900;

   font-style: italic;

   font-size: 1em;

   letter-spacing: .2em;

   line-height: .7em;

}

 

/* remove hyphens */

 

p, h1, h2, h3 {

    -webkit-hyphens: manual !important;

  

  /* remove gray bar on mobile footer */

.Mobile-bar.Mobile-bar--bottom {

  padding: 0;

}

  

#block-yui_3_17_2_1_1574966063081_15230, #block-yui_3_17_2_1_1574967366666_6867 {

text-align: center;

  }

       -moz-hyphens: manual !important;

        -ms-hyphens: manual !important;

            hyphens: manual !important;

  }

 

.Header { 

  position: fixed;

   z-index: 9999;

  width: 100%;

-webkit-box-shadow: 0px 3px 15px rgba(100, 100, 100, 0.49);

-moz-box-shadow: 0px 3px 15px rgba(100, 100, 100, 0.49);

box-shadow: 0px 3px 15px rgba(100, 100, 100, 0.49);

}

 

.Mobile-overlay-nav-item, .Mobile-overlay-folder-item { text-align: center;} 

.Mobile-overlay-menu {width: 100%; z-index: 1;}

 

#block-yui_3_17_2_1_1576006037918_5357 {padding-left:20px; text-align:left;

padding-bottom:20px; padding-top:20px; color: #424444!important; textalign:right!important; border-top: 1px solid

#E0BAB9!important; margin-top:10px!important;

text-transform:none; font-size: 14px!important;

  letter-spacing:.1em;}

span:first-child { display:none; } .quote-block

blockquote>span:first-child, .quote-block

blockquote>span:last-child { display:none;}

  figcaption::first-letter { font-size: 0;}

 

#yui_3_17_2_1_1577997923960_436{

    padding-top: 150px;

}

Try adding this to your Custom CSS to increase the top padding of the blog list page. You may need to target it just for desktop depending on your code and settings, but this should get you started:

.Main--blog-list {
    padding-top: 100px !important;
}

 

Thanks so much, that worked!! 🙂