Understanding the grid... Issues controlling the sort/filter over each collection

New Member
5 0 0

Hello!  I have edited a standard theme to move my logo up and attached to the top of the page rather than having a bunch of free floating space by adding:  to my timber.scss.liquid.  

.grid--full { 
  margin-top: -100px;
  margin-bottom: -60px;
}


.site-header .hr--small {
  margin-top: 5px;
    margin-bottom: 15px;
}

But this has caused my filter drop down menus to cover the title of each collection.  Can anyone point the way for which file I would edit to fix either the filter box or collection title header?    It appears that the filter box and my logo are bound to eachother and I really cant figure out which is relying on which and where that relationship is located.
 

 

0 Likes
New Member
5 0 0

also here is my website, live with the defects.   www.elevateshrimp.com

0 Likes
Highlighted
Astronaut
1890 0 373

You made some additions to the SCSS file.  Try replacing it with this:

.site-header {
  padding-top: 0;
}
.site-header .hr--small{
  margin-top:5px;
  margin-bottom:10px
}
.site-header .header-logo {
    margin-bottom: 0;
}

Typically you do not want to modify the grid classes (e.g. .grid--full) too much because these classes likely appear in many other areas of the shop.  As you can see, .grid--full appears around the filter box and was affected by the CSS that you had added.

1 Like
New Member
5 0 0

Thank you very much for helping me!    It looks like this moved my logo back down :(  Im trying to add more space for sidebar/menu items 

 

Can you give me a good starting resource to learn about scss (I understand css implementation)?

0 Likes
Astronaut
1890 0 373

You added padding-top: 0 to .site-header, which is correct.  But below that, the padding gets overridden.  Remove that override.

  @include at-query ($min, $large) {
    
    height: 100%;
    overflow-y: auto;
    left: 0;
    padding: ($gutter * 3) 0 0;          // <-- Try removing this line of code.
    position: fixed;
    width: $navSize;

 

0 Likes