Home>Support>Header menu and logo over header image

Header menu and logo over header image

By NiekP, 8 years ago. Last reply by NiekP, 8 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Hi,

I need some help on the following: On my site I have the North theme and I am trying to create a nice home frontpage.
On my localhost I have an install of consultant which is also based on North.

Now I am trying to get the same effect concerning the header menu and the background image. I want to have exactly the same as what is happening on the frontpage of consultant, so a background image and the logo and menu on top of that.

I have tried a lot already, copying exactly the same hero widget with the same settings and also copied the custom CSS but is just won’t work. I also tried the suggestions from this thread: https://siteorigin.com/thread/transparent-menu-bar-background-body-visible/
What happened is that with setting the transparancy the menu and logo get blurry but still the image is not behind the menu bar.

What am I doing wrong? or is there a setting I haven’t found yet?

Thanks in advance for your support.

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 8 years, 4 months ago Alex S
    Hi, I Work Here

    Hi NiekP,

    The Consultant Site Pack is using CSS (for the menu) and Page Settings settings (to allow for the overlap) to do this. Once you’ve set up your page to use an overlap, please navigate to AppearanceCustom CSS and add the following CSS:

    .page-layout-menu-overlap #masthead {
	background: transparent;
	border-bottom: transparent;
}

.main-navigation ul a {
	font-weight: 600;
	color: #fff !important;
}

#masthead.sticky-menu {
	transition: background .4s ease-in-out !important;
}

#masthead.sticky-menu.floating {
	background: #111 !important;
}

    That’ll allow for the transparent menu and the color change upon scroll.

    You might also need to install the SiteOrigin CSS Editor.

  2. 8 years, 3 months ago NiekP

    Hi Alex,

    I found the page setting did the trick (searched all over for it). The other setting I already had in place.

    Thanks,
    Niek.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More