Change Background Menu with Image

agungandika · September 2017

Hello

How to change background on menu with image (jpg / png)?

Thank you

Bryan · September 2017

Hi,
Please always attach a link so we can check it out. If the page is offline(localhost) then our help will be limited, you will have to contact us when the page is online. Also please make sure that the page is not under maintenance before you provide us the link.
It is always a good idea to also attach a screenshot, for that use services like snag.gy or pasteboard.co
thanks

agungandika · September 2017

Hi,

I'm sorry for my ignorance.

The website address is https://cmaindonesia.id/

for screenshot https://pasteboard.co/GK2ZGiz.jpg

I've tried uploading the image on

theme options - header & subheader - layout - background - and upload Image

but has no effect

Please give me tutorial to be able to provide background on menu part or gradation of two colors like background logo

thank you

Bryan · September 2017

Try this custom css, if it does not fit we can only apply one color

#Top_bar {
background: -moz-linear-gradient(top, rgba(1,187,244,1) 0%, rgba(83,203,241,1) 0%, rgba(1,75,140,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(1,187,244,1) 0%,rgba(83,203,241,1) 0%,rgba(1,75,140,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(1,187,244,1) 0%,rgba(83,203,241,1) 0%,rgba(1,75,140,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#01bbf4', endColorstr='#014b8c',GradientType=0 ); /* IE6-9 */
}

agungandika · September 2017

thanks for his help, and changed. But how also changes in the background menu when responsive mobile. Because while in mobile mode is responsive, the background menu does not change and remains white.

And how to change the menu background in the sub menu and search box. so have a background gradation as well

Bryan · September 2017

Well, you have turned off responsive so we cannot really check.

agungandika · September 2017

sory ... and mobile responsive I have activated

Bryan · September 2017

Add this css as well

@media (max-width:767px) {
	#Top_bar {
background: -moz-linear-gradient(top, rgba(1,187,244,1) 0%, rgba(83,203,241,1) 0%, rgba(1,75,140,1) 100%) !important; /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(1,187,244,1) 0%,rgba(83,203,241,1) 0%,rgba(1,75,140,1) 100%) !important; /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(1,187,244,1) 0%,rgba(83,203,241,1) 0%,rgba(1,75,140,1) 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#01bbf4', endColorstr='#014b8c',GradientType=0 ); /* IE6-9 */
}
}

agungandika · September 2017

Succeed on the website logo, but when entered in the mobile responsive mode, the background menu remains white, so the white text is the same as the background menu

https://pasteboard.co/GKt94t1.jpg

Bryan · September 2017

Okay, I understand now. Try this css

@media (max-width:767px) {
	#Top_bar #menu {
	background: blue !important;
}
}

agungandika · September 2017

Okay, sucess

agungandika · September 2017

because I can not insert an image in the action bar, I try another layout on the menu using the layout of the stack center menu.

https://pasteboard.co/GKSL61F.png

but covered with white background

How to keep removing or transparant backgrouground?

Bryan · September 2017

instead of background:white just use background:transparent

Change Background Menu with Image

Comments