Responsive menu background and footer

rizwanikram · July 2016

Hello I searched for my question on forum and found the below answer but when I apply this it also changes the main menu background I am currently using transparent menu with background image and custom color skin please help check http://obnoxiousart.gallery I just want to change responsive menu background and responsive menu hover background. and one more thing I want to remove <hr> from footer.

To change responsive menu background, please use:

#Top_bar #menu > ul { background: #FFF !important; }

Albert · July 2016

Hi,

to change those colors, please use the following css:

#Header .top_bar_left, .header-classic #Top_bar, .header-plain #Top_bar, .header-stack #Top_bar, .header-split #Top_bar, .header-fixed #Top_bar, .header-below #Top_bar, #Header_creative, #Top_bar #menu, .sticky-tb-color #Top_bar.is-sticky { background: #000 !important; }

But to remove top border of the footer copy, please use:

#Footer .footer_copy { border-top: 0 !important; }

rizwanikram · July 2016

It also changes the main menu background to black and I want main menu transparent background and black background only for 'responsive' menu.

The footer CSS is fine

Albert · July 2016

So if you want to do this for mobile only, just wrap above css into right @media tag, like:

@media only screen and (max-width: 767px) {
    #Header .top_bar_left, .header-classic #Top_bar, .header-plain #Top_bar, .header-stack #Top_bar, .header-split #Top_bar, .header-fixed #Top_bar, .header-below #Top_bar, #Header_creative, #Top_bar #menu, .sticky-tb-color #Top_bar.is-sticky { background: #000 !important; }
}

For more details about @media, please visit http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

rizwanikram · July 2016

Thanks a lot!

Albert · July 2016

You're welcome!

Responsive menu background and footer

Comments