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

Sign In or Register to comment.