Keeping the navbar transparent without content showing underneath

[MaltMUN]

I have been having difficulties with getting correct CSS regarding the navbar on a website i’m designing.

While it remains transparent when scrolling, content is visible underneath it. What I am trying to get it to do is to stay the same but instead the content ends when it hits the menu (not goes hidden underneath it).

This part above I would like to apply it to the global CSS.

I am also doing a one page menu for a particular page and have managed to get the first section ‘Founding’ to start below the header but the other section 'Executive Committee is starting under the transparent menu. This ties in with the first issue above - that I would like the menu to stay transparent and have content start underneath it instead of being hidden).

Here is the website dev.maltmun.org.mt/about

Thanks in advance.

[rad]

Hi @MaltMUN,

Thanks for reaching out.

That’s not possible, a transparent background means it’s a see-through element. It’s not possible to stay transparent without a see-through effect. Or do you wish to make it solid color so it won’t display the view behind it?

Thanks!

[MaltMUN]

Hi Rad

A solid color wouldn’t be an option. Would it be possible for content to end when it hits the menu rather than it going under the menu?

Thank you

[thai]

Hi There,

To achieve that, please add this custom JS under Theme Options > JS:

jQuery(function($) {
	$(window).scroll(function(){
        if($(window).scrollTop() == 0 ){
        	$('.x-navbar').removeClass('x-navbar-fixed-top');
        }
    });
});

After that add this custom CSS under Theme Options > CSS:

.x-navbar.x-navbar-fixed-top {
    background: rgba(29, 28, 28, 0.75);
}

Hope it helps

[MaltMUN]

Isn’t that merely putting an opaque color to a transparent header?

I was asking if the content can start to load up once it hits the bottom of the menu.

Seeing as it cannot, does x theme allow the menu to shift to the right or left when scrolling?

[thai]

@MaltMUN

I was asking if the content can start to load up once it hits the bottom of the menu.

Seeing as it cannot, does x theme allow the menu to shift to the right or left when scrolling?

Hi There,

Both features are required the custom development which is outside the scope of our support.

You need to consult with a 3rd party developer to help you with this.

Thank you for understanding!