This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Header menu and logo over header image

Resolved 2 replies customizationthemetheme-north
NiekP
8 years ago · Last reply by NiekP 8 years ago

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.

Need fast email support? Get SiteOrigin Premium

Replies

2
  1. Alex S Staff 8 years, 11 months ago

    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. NiekP 8 years, 11 months ago

    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.

Have a different question or issue?

Start New Thread