Jump to content

Navigation covering blog

Recommended Posts

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 comment
  • Replies 2
  • Created
  • Last Reply

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 comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.