Top bar over left bar part 2

[Vexcel]

Hey Guys,
since my old topic was closed I have to bring up a new one. https://theme.co/apex/forum/t/top-bar-over-left-bar/28106

I had the problem with a not overlapping top bar over the sidebar. The solution works when my top bar is not sticky. When I start to scroll the whole top bar goes left.
How can I prevent this?

I hope you can help me again

thanks
regards
plump

[Prasant]

Hello @Vexcel,

Thanks for asking.

Please do the following:

1. Please change the z-index value of topbar under Bar > Setup > Z-index. Right now it’s higher then then the left bar.
2. After that please add following code under Topbar > Customize > Element CSS:

$el{
width: 100wv;
margin-left: calc(100wv - {width of left bar} );
}

In above code you need to change width of left bar with the left bar width values.

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

[Vexcel]

Hi Prasant,
thanks for the reply. Sorry, I wrote this topic with the wrong account.

I’ve changed the z-index of my topbar and set the margin to the size of my left bar but it didn’t change a thing. I’m aware that the topbar should have a higher z-index value like 1000 and the left bar should have a lower number like 50.
It still looks like the left bar is strechted over the whole height of the site (i hope this makes sense).

Why does the top bar jump to the right when I scroll down a little?

Thanks
regards
plump

PS.: Thanks for the videos, I’ll take a look at them when I have a minute

[christopher]

Hi @Vexcel,

Unfortunately, I do not know exactly which website you are talking about. The only thing I can suggest at the moment is that you make sure you use the Pro version 2.0.4 and if not you update the theme.

Also, you need to make sure that you set the top bar to sticky and as my colleague mentioned the z-index properly. But we need to access your website to be able to check the case and give you a better suggestion. Please give us the exact problem you are experiencing.

kindly get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case if you still have problems.

Thank you.

[plumpkinn]

Hi Christopher,
sorry for the confusion with the Users and Topics. I’ve created this Topic with one of my clients users (vexcel). In this topic I linked to an old Topic I’ve cretaed with my user
plumpkinn. Just for the sake of good Order it’s the same website I’m talking about. I hope this makes sense?

Back to the problem with my topbar.
My site is on the latest release and the Z-Index on the topbar has the value 1000, the Z-Index of my leftbar is 50.
It’s hard to describe and for sure you know what I mean when you take a picture by yourself.

I hope youn can help me out

Thank you very much

Thanks
regards
plump

[Alaa]

Hi @plumpkinn

I’ve checked your website and I can see you have this CSS code in the top bar element CSS:

$el{ left: -11em; width: calc(100vw); }

Please replace it with this one:

$el {
    left: 0;
    width: 100%;
    position: fixed;
} 
$el.x-bar-fixed {
    width: 100%!important;
}

This should fix this issue.

Thanks.

[plumpkinn]

Hey Alaa,
I’ve tried your code and now it works
Thank you very much.

As always, you guys are the best.

Thanks
regards
plump

[Prasant]

You are most welcome.