Docs

[fabipaolini]

Hi guys! I realize there’s a lot of info in the forum regarding this question, but I’m still a bit lost! (sorry! I’m a designer, not really a developer).
Ok, so basically, what I want to do, is have the transparent nav bar on top of an image (not a slider), and once you scroll out of the image, the navbar to have a color. Something similar to this:

Home

Can you guide me through this? I’m just starting on the site built with integrity (but I could change it if it’s necessary). I put “transparent background” in the options, but how do I get the image behind it?

Thanks a lot!
Fabi

[Paul R]

Hi Fabi,

Thanks for writing in!

To achieve that, you can add this under Custom > Edit Global CSS in the Customizer.

.x-navbar.x-navbar-fixed-top {
    background-color:#fff;
    position: fixed !important;
    height: 50px !important;
    transition: .5s all;
}

.x-navbar {
    background-color:transparent;
    width:100%;
    position:absolute;
    height: 90px; 
}

You may change background color and height to achieve your desired result.

Hope that helps.

[fabipaolini]

Thanks! It worked perfectly! 🙂

[Paul R]

You’re welcome! 🙂

[fabipaolini]

Hi! So, I have 2 other questions:

1. I need to add a topbar and would like its background to be transparent and the image that’s added in the section through cornerstone to show up in the background (hope that made sense). So basically, it would be the top bar and nav bar being transparent with the image from the page in the back. Can you help?

2. On the blog page, the blog header comes on top of the navbar, how do I change this?

Thanks!
Fabi

[Nabeel A]

Hey Fabi,

1. Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

2. You want to display blog heading on top of the Navbar? Please share the URL of your site so we can take a look?

Thanks for understanding. Take care!

[fabipaolini]

This reply has been marked as private.

[Lely]

Hi Fabi,

Thank you for the credentials.
The issue is caused by the following custom CSS:

.x-navbar {
    background-color:transparent;
    width:100%;
    position:absolute;
    height: 90px;
    border-bottom: none;
      box-shadow: none;
}

Please remove position:absolute;. It should be like this:

.x-navbar {
    background-color:transparent;
    width:100%;
    height: 90px;
    border-bottom: none;
      box-shadow: none;
}

Then add the following CSS instead to move the image on homepage behind the navigation:

.home div#x-section-1 {
    margin-top: -91px !important;
}

Hope this helps.

[fabipaolini]

Thanks! Worked perfectly. Now, I want to do this:

.home div#x-section-1 {
margin-top: -91px !important;
}

with all of the sections (except blog page), what should I put instead of .home?
thanks!

[Friech]

Hi There,

You can update the code to:

body:not(.blog) div#x-section-1 {
	margin-top: -91px !important;
}

Hope it helps, Cheers!

[Author]

Posts