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

Navigation covering blog


Slimders

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;

}

Link to post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Posts

Thanks so much, that worked!! 🙂

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

 

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...