To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more

Tearing my hair out trying to add an image background to the nav header - help!

Solved
Rob_H1
Shopify Partner
11 0 2

Hey There,

 

I'm really hoping i can get some advice here, i am using the "Material" theme by roarthemes and I've been trying to add an image background to the header for 5 hours now, it's driving me crazy.  Would anyone have any advice or code that i could use in order to add a background image to the header above the nav bar ?  See attached,  where i was hoping to add the background image (headbg.jpg)

 

https://rt-material.myshopify.com/ 

Accepted Solutions (2)

Accepted Solutions
Denishamakwana
Shopify Partner
1284 160 204

This is an accepted solution.

First of all remove  "(here give new cdn path )"  in css file .

Thank you.

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on denishabhensdadiya@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme

View solution in original post

Denishamakwana
Shopify Partner
1284 160 204

This is an accepted solution.

Also remove (position change as  per requirement) 

Because it is just information not a code

Thank you.

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on denishabhensdadiya@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme

View solution in original post

Replies 9 (9)
Denishamakwana
Shopify Partner
1284 160 204

Hi, here I attached one screenshot for header background  Please confirm look for that .

bg-header.png

Thank you.

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on denishabhensdadiya@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme
Rob_H1
Shopify Partner
11 0 2

Denishamakwana  you are a genius!  that is exactly what im looking to do.  Can you give me the code you used to get that image in the background of the header please.  You're a star!

Denishamakwana
Shopify Partner
1284 160 204

First of all  add image in admin side  which you want to header background.

then see cdn path for that particular image.

then add below css in bottom of assets/rt.style.scss.css file

#header_nav {

      background-image: url(//cdn.shopify.com/s/files/1/0885/9170/t/8/assets/slide_image_2.jpg?v=872245961168612101); (here give new cdn path)

      background-position: top; ( position change as per requirement)

}

Thank you.

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on denishabhensdadiya@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme
Rob_H1
Shopify Partner
11 0 2

Thanks Denishamakwana for your swift replies, much appreciated.

 

I added that code in to the assets/rt.style.scss.css file but it broke the site unfortunately.  It seems that everything above the slider where the nav bar is broke when i put that code in.  Do you have any advice for me ?  How did you get the image background into the nav bar like the picture you posted earlier that was perfect !

 

here is the link to the background image i would like to use in the nav header area like you did earlier

https://cdn.shopify.com/s/files/1/0614/4681/5953/files/headbg.jpg?v=1647394233

 

See attached 

 

Screenshot 2022-03-16 015820.jpg

 

Screenshot 2022-03-16 015922.jpg

Denishamakwana
Shopify Partner
1284 160 204

This is an accepted solution.

First of all remove  "(here give new cdn path )"  in css file .

Thank you.

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on denishabhensdadiya@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme
Rob_H1
Shopify Partner
11 0 2

That worked, THANK YOU so very much !!!  It is perfect, exactly what i needed.

You have been extremely helpful and solved my issue very professionally.  Thanks again Denishamakwana REALLY appreciate your helpful advice and instruction

 

REgards

Rob

 

This is how the header looks now, just like i wanted it !

 

fixws.jpg

Denishamakwana
Shopify Partner
1284 160 204

This is an accepted solution.

Also remove (position change as  per requirement) 

Because it is just information not a code

Thank you.

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on denishabhensdadiya@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme
Denishamakwana
Shopify Partner
1284 160 204

it's my pleasure to help you .

in future any query regarding any customization of your site please contact me.

Thank you.

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on denishabhensdadiya@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme
Rob_H1
Shopify Partner
11 0 2

I certainly will do that.  Thanks again