Menu hovering over image?

juliacole

Instead of the menu bar being all the way at the top, I'd like it to be floating over the background image like in this demo:

http://themes.muffingroup.com/be/mechanic2/

Is there some CSS I can put in my site to do that?  I am currently using the split header semitransparent header layout option.  Here is my website:

http://jmbinteriors.jetwebstudio.com/

Thank you!

juliacole

Also, how do I take away the transparency?  I'd like it to be the full dark red.

Bryan

Hi,

Use this css

#Header {
	top: 50px !important;
}

To change the background, you can use this css

.header-semi #Top_bar:not(.is-sticky) {
	background-color: rgba(148, 34, 36, 1) !important;
}

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

juliacole

Perfect, thank you!  And how would I remove the transparency of the footer also?

juliacole

Also, on the mobile view, the top logo is hidden behind the large kitchen image and the red menu bar.  Is there a way to bring that forward?  Thank you!

http://jmbinteriors.jetwebstudio.com/

Bryan

There is no transparency on the footer.

You can use this css

@media (max-width:767px) {
	#Wrapper #Header {
    top: 0px !important;
}
#Top_bar #logo img.logo-mobile {
	position: relative !important;
	z-index: 999 !important;
}
}

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

juliacole

Is there a way to move the bottom logo so it sits on top of the red footer bar just like it does on the very top with the logo on top of the menu bar?

http://jmbinteriors.jetwebstudio.com/

Bryan

No sorry, we cannot do it with css.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next