Support ForumAdding image background to main navigation menu only when it scrolls as sticky – Support Forum

Adding image background to main navigation menu only when it scrolls as sticky

warren — Tue, 17 Feb 2015 00:24:32 +0000

Thanks much for answering all my questions…..

1) I am working with the navigation bar, is it possible to add an image instead of using color scheme. For example with my website I would like for when I scroll the nav image is consistent with the header background image as its custom to my design.
I have created the image for that but was not sure on how to and if it can be done

~~2)The back to top—- how do I scale or change the icon/image?~~

http://www.carolinemarchionna.com/home-3/

Thank you

Reply To: Adding image background to main navigation menu only when it scrolls as sticky

IshYoBoy — Tue, 17 Feb 2015 09:00:00 +0000

Hi Warren,

Please do not combine different issues in one topic. If the title of the topic says “Adding image to nav” then the question about the “back to top link” should not be here. Thanks for understanding to keep the forum easily searchable for other users.

Regarding the navigation bar. Not sure we understand what you mean. Is it that you would like to have an image in the background of the navigation, but only when the menu switches to sticky one? So at first it would be transparent and once scrolling down it should have image in the background? Please try to describe it as precise as possible.

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Adding image background to main navigation menu only when it scrolls as sticky

warren — Tue, 17 Feb 2015 13:01:58 +0000

What you have put in the response to my question is what I am asking…

Is it that you would like to have an image in the background of the navigation, but only when the menu switches to sticky one? So at first it would be transparent and once scrolling down it should have image in the background?

Thanks

Reply To: Adding image background to main navigation menu only when it scrolls as sticky

IshYoBoy — Wed, 18 Feb 2015 08:05:11 +0000

Hey Warren,

Glad we understood it right. Well, the steps would be the same as when you removed the background color in this topic’s answer:

Remove the background color from sticky navigation

Instead of none just use the image’s path you would like to use.

E.g.:

.ish-part_header.ish-sticky-scrolling .ish-row {
	background: url('https://www.carolinemarchionna.com/wp-content/uploads/2015/02/header-31.png') !important;
}

.ish-part_header.ish-sticky-scrolling .ish-row {

background: url('https://www.carolinemarchionna.com/wp-content/uploads/2015/02/header-31.png') !important;

}

If you want it to be transparent please set the transparency inside the image. Also you can play with positions, size, cover, etc.. of the background image.

https://www.w3schools.com/css/css_background.asp
https://www.w3schools.com/cssref/css3_pr_background-size.asp

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market