Left sticky bar transparent

Support
#1

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…?

#2

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

#3

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.

#4

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.

#5

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:

#6

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.

#7

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:

#8

Hi there,

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

Hope this helps.

#9

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.

#10

Hi Ying,

You can try this code instead

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

Hope that helps.

#11

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

#12

You’re most welcome!

#13

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