Left sticky bar transparent

Hi,

How can I make the left Menu Bar transparent so you see part of the website through it? I have set it to ‘transparent’ but with that it only shows the background color you set in Theme Options.

The site is this: https://sundayfolk.nl

As you can see the background color for the site is black and that shows underneath the menu bar. I’d like to not be off canvas as it were…?

Hi Ying,

To achieve that, you can add this in Theme Options > CSS

.x-bar-space.x-bar-space-left {
   display:none;
}

I was able to came up with this code using google inpect element. In case you want to learn how to use it kindly refer to the videos below


Thanks

Thanks. Yeah, I know how to inspect elements, but just overlook things sometimes :wink:

Now that I have used the CSS it only looks good on large desktop, smaller screens the bar now moves over the content, haha.

Hello @yingfuli,

Thanks for updating the thread. :slight_smile:

It seems that you have removed the CSS code from the website. Also can you please clarify or elaborate following:

Thanks.

What I meant was that on a desktop screen it looks quite nice, but on smaller screens the content of the page moves to the left and as a result moves underneath the bar :wink:

Hello @yingfuli,

Thanks for updating the thread.

On my end it seems to be working fine. Please see screenshot. Kindly let me know if I am missing something. Also will it be possible for you to share some screenshots?

Thanks.

Hi,

For mobile I have another menu set up so that’s no problem.

The problem arises on screens for laptop of landscape tablets, see images:

Large screen:

Smaller screen:

Hi there,

Please set the background setting of the Bar to transparent then the box shadow to 0.

Hope this helps.

I’m sorry for not explaining it correctly.

This is on desktop. It shows a nice menu bar with a transparent background:

This is on a smaller screen like a laptop or tablet landscape. As you can see the content (‘the woman’) is now partly covered by the menu bar:

That is why I decided to not have the menu bar transparent, because it only looks good on desktop. Hope I clarified what I meant.

Hi Ying,

You can try this code instead

@media(min-width:1500px) {
.x-bar-space.x-bar-space-left {
   display:none;
}
}


Hope that helps.

Now why didn’t I think of that!? Thank you, that is a great solution!

You’re most welcome!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.