Changing the sticky header background image ?
Saw on another discussion to use this CSS to change the color of the sticky header:
#Top_bar.is-sticky { background: #fffff; }
But it does not work for me.
Here is all the CSS I have under Theme Options> Custom CSS:
/* Header */
#Top_bar:after { background: url(http://handhdelifranchising.com/wp-content/uploads/2014/11/home_bakery_header_pattern.png) repeat-x; content: ""; display: block; height: 21px; left: 0; position: absolute; width: 100%; z-index: 21; }
/* Subheader */
#Subheader:after { display: none; }
hr { height: 3px; }
blockquote::after {
background: none !important;
}
#Action_bar .social li a { font-size: 30px !important; }
#Footer .footer_copy .social li a { font-size: 30px !important; }
#Top_bar.is-sticky { height: 100px; }
#Top_bar.is-sticky .menu > li > a, #Top_bar.is-sticky .menu > li > a span { line-height: 50px; }
#Top_bar.is-sticky #logo { padding: 12px 0; }
#Top_bar.is-sticky #logo img { max-height: 50px; }
#Top_bar.is-sticky #logo img { max-height: 80px !important; }
#Top_bar.is-sticky { background: #fffff; }
@media only screen and (max-width: 1239px) {
#Top_bar #menu > ul {
text-align: center !important;
}}
#Top_bar {
background: url('http://handhdelifranchising.com/wp-content/uploads/2017/12/NEW-WHITE-HALF-SUBWAY-TILE-BACKGROUND-min.jpg') !important;
}
#Top_bar #menu {
background-color: transparent !important;
}
Can you let me know why its not working or what CSS I need to use to change the BACKGROUND IMAGE
Thanks
Comments
thanks
Its the first thing iin the post
Your css was correct but you need to add !important, like this
#Top_bar.is-sticky { background: #FFF !important; }