Jump to content

Sidebar height match section height

Recommended Posts

https://pelican-mayflower-36wy.squarespace.com/

Password: Lincoln22

Hi!

I'm taking over a site that had some existing code.  There are certain pages that have sidebar navigation.  Each page the side bar is either too short, or overlapping the footer.  The client would like the sidebar to be the same height as the section.  Starting at the top, and ending at the footer.

I've tried a few different code adjustments and can't seem to find one that works.

Is there a way to stop the sidebar at the footer or fix the height for each section?  You can see from the photo how the sidebar overlaps the footer.

image.thumb.png.42f25385e2ae80a63d86e3f8415e5593.png

 

Thanks!!
Blayne

Edited by BlayneG87
Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Hi @tuanphan,

This is the full CSS:

//sidebar
  #block-yui_3_17_2_1_1652426977679_38936 {
    .sidebar {
  position:relative;
  background:#7B7D81;
  min-height:calc(150vh-150px);
  padding-top:100px;
      padding-bottom: 100px;
  @media @mobile{
      height:auto;
      padding:20px;
    border-radius:3px;
    }
  h4{
    color:#fff !important;
    z-index:999;
    position:relative;
  }
  ul{
    position:relative;
    padding:0;
    list-style:none;
    li{
      margin:5px 0;
      a{
        font-weight:500;
        transition: all ease-in-out 150ms !important;
        -webkit-transition: all ease-in-out 150ms !important;
        -moz-transition: all ease-in-out 150ms !important;
        -ms-transition: all ease-in-out 150ms !important;
        color:#fff;

        &:hover{
          color:#FDD505;
          font-weight:600;
          i{
            opacity:0.5;
          }
        }
      }
    }
  }
  &:before{
      position:absolute;
      content:'';
      width:200%;
      height:150%;
      background:#7B7D81;
      top:-20%;
      right:0;
    @media @mobile{
      display:none;
    }
  }
}
}

Link to comment

Create an account or sign in to comment

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

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