Add Top Margin/ Padding on a header table cell in Supply theme

Store Design
1

Hi everyone,

I added a search to my site (honolulutime.com) so that the search will appear at the top of the header when viewed in MOBILE.

How can I adjust the padding/margin to push the search cell down?

Also, how can I change the font color to white so that it is readable?

Thanks in advance!

2 Likes
2

Hi,
Add this rule at the bottom of theme.scss.css

@media screen and (max-width: 768px) {
    .search-bar {
      margin-top: 12px; 
    } 
}

@media screen and (max-width: 768px) {
.search-bar input[type="search"]::placeholder{
  color: #fff;
  opacity: 1;
}
}

Result:

2021-08-10 20_51_01.png
2021-08-10 20_51_01.png637×154 5.03 KB

1 Like
3

@ac5a

Please add the following code at the bottom of your assets/theme.scss.liquid file.

@media screen and (max-width: 768px){
input[type="search"]::placeholder {
    color: #fff;
}
.search-bar { margin-top: 15px; }
}

Hope this works.

Thanks!