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
Started · Latest reply by NiekP

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

    Hi NiekP,

    The Consultant Site Pack is using CSS (for the menu) and North Page Settings: Layout, Header and Footer | SiteOrigin 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

    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