[Elizabet LParticipant]

I’m using the Integrity 01 template.

I’d like to have the logo and the navbar fixed on the left side but as a transparent layer on top of the content. E.g. like here:

http://vr-live.sandovalcustom.website/

Any idea how to achive this?

[Paul RModerator]

Hi Elizabet,

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

.x-navbar .desktop .x-nav>li {
    float: none;
}

.x-navbar {
    top: 0;
    position: absolute;
    border-bottom: 0;
    background-color: transparent;
    box-shadow: none;
}

.x-navbar .desktop .x-nav > li > a {
    height: auto;
    padding-top: 20px;
}

Hope that helps.

[Elizabet LParticipant]

Hi Paul,

thank you for the response, but using the code makes the logo & the navbar static and scrolls away when scrolling down, but we need to have it stay on the position (top / left) at all time while we scroll down the content.

FYI: In the header section, I have the navbar position set to fixed left and the layout to Inline.

Again, I want to accomplish that the Logo & the Navbar stays on the top/left position but as a transparent overlay
while I’m scrolling down the side, e.g. http://vr-live.sandovalcustom.website/

The current ‘fixed left’setup (without CSS modification) creates an unwanted sidebar and moves the content to the right (depending Navbar Side Width).

Any other ideas?

I know you guys can make the impossible possible 🙂

Best

Lisa

[LelyModerator]

Hi Lisa,

Please update this part:

.x-navbar {
    top: 0;
    position: absolute;
    border-bottom: 0;
    background-color: transparent;
    box-shadow: none;
}

To this:

.x-navbar {
    top: 0;
    position: fixed;
    border-bottom: 0;
    background-color: transparent;
    box-shadow: none;
    left:0;
    right:initial;
}

Please share your site URL if this doesn’t do the trick.

[Elizabet LParticipant]

This reply has been marked as private.

[FriechModerator]

Hi Lisa,

You can add this under Custom > CSS in the Customizer.

@media (min-width:  978px) {
	header.masthead.masthead-inline {
	    display: inline-block;
	    background-color: transparent;
	}
	.x-navbar-fixed-top {
		right: auto;
	}
}

Hope it helps, Cheers!

[Elizabet LParticipant]

This reply has been marked as private.

[JoaoModerator]

Hi There,

Please add the following code to your Appereance > Customizer > Custom > CSS

.x-main.full {

margin-left: -220px;

}

.x-navbar-fixed-left {

border-right: 0;

}

Hope that helps,

Joao

[Elizabet LParticipant]

Hey…

Yehaaa 🙂 That did the trick!

I knew you guys can do it.

Thank you so much for your help!

I might come back with another question pretty soon 🙂

Best

Lisa

[Prasant RaiModerator]

You are most welcome, Lisa. 🙂

[Author]

Posts