Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Slimders

Navigation covering blog

Question

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;

}

Share this post


Link to post

2 answers to this question

Recommended Posts

  • 0

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

 

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...