Return management just got easier! We’ve launched Customer Self-Serve Returns to all Shopify merchants. Click here to learn more!

Reduce size of header/announcement bar

juexle
New Member
8 0 0

Hi, 

 

Could someone help me with reducing the size of this block where my gradient coloured announcement bar is?Screen Shot 2020-12-28 at 4.58.20 PM.png

Replies 6 (6)
neeravmakwana
Shopify Partner
164 29 36

Hi,

Can you please find this code block in timber.scss.liquid and reduce the first number after padding:

.announcement-bar__message {
  display: block;
  font-weight: $headerFontWeight;
  padding: 10px $gutter;
  margin: 0;
}

 

Try making that number smaller. 

juexle
New Member
8 0 0

 Not working, this is what it changes my page to.Screen Shot 2020-12-28 at 6.38.50 PM.png

My theme.scss.liquid looks like this:

.site-header__upper .small--text-center {
text-align: right !important;
padding-right: 9% !important;

}
#SiteNavParent {
text-align: center !important;
padding-left: 22%!important;
}
.announcement-bar__message {
padding: 0px 0 !important;
font-size: 10px !important;

}

@media (max-width: 767px){
.announcement-bar__message {
font-size: 5px !important;

}
}
.site-header, .site-header__mobile-nav, .announcement-bar {
background-image: linear-gradient(to right, #f6e6b4, #f8d0a7, #f3bcba, #eec0c6, #e9c5d7, #e4c9e7, #decfec, #d8dcf7, #d5e0f9, #d1eaf6, #d0f1ee);


}
.announcement--text.font--accent { padding: 0; }

 

#NotificationPromo .notification__close{ display:none;}

/* -- code to remove border below navigation -- */
.site-header { border-bottom: none; }
/* - end - */

 

I'm also using the Venture theme.

neeravmakwana
Shopify Partner
164 29 36

That's strange. Is that the only change you made?

 

Also, what happens if you change the 0 padding to something like 5px?

juexle
New Member
8 0 0

Nothing changes when I reduce the padding. I could delete the entire code I added if I was able to make the gradient announcement bar Smaller

neeravmakwana
Shopify Partner
164 29 36

Would you be able to give me development access to your store? In case you do, please reverse the changes so that the announcement bar is exactly like it was in your first page. Thanks.

juexle
New Member
8 0 0

I've revert the changes I just made to the previous page. My collaboration code is 9482