Trying to add padding to an image in header + make it inline with menu

Solved
Highlighted
Shopify Partner
38 0 2

I added a "Free Shipping" text image to the header of my site (see screenshot below). However, I'm trying to add a bit of padding so that it's not right up against the edge of the browser.

 

I'm also trying to figure out if there's a way to get it on the same line (or inline) with the menu? I'm using the District theme (website is cyclelogicalgear.com).

 

Screen Shot 2019-08-08 at 8.09.02 AM.png

0 Likes
Highlighted

This is an accepted solution.

Hello ,
Please remove your code from here,
free.jpg

And this css on your theme.scss.liquid,
This will work for you.

header.site-header nav.nav-bar::after {
content: "";
margin-bottom: 5px;
background-image: url("https://cdn.shopify.com/s/files/1/0092/4798/1628/files/Free-Shipping-Text_copy.png?644");
background-repeat: no-repeat;
width: 112px;
height: 28px;
display: inline-block;
position: absolute;
right: 0;
top: 0;
}
.site-nav {
position: relative;
}

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Shopify Partner
38 0 2

Forgive my ignorance, but do I put that at the very end of the theme.css.liquid?

 

0 Likes
Highlighted
Shopify Partner
38 0 2

Nevermind, it's working now. Thanks so much for your help!

0 Likes
Highlighted
New Member
2 0 0

Hi, 

I'm trying to do the same thing, but is not working.

Where did you paste the code inside the css.liquid?

 

0 Likes