Unable to Make Transparent Right Header Bar

[SuitedCreative]

Hello-

I’m having trouble getting a transparent right header bar to be transparent, and relative, or overlapping content.
This right bar is only there to facilitate what should look like a ‘floating’ cart button off to the side of the screen.
I set a right bar, set color to transparent, bar to 9998 z index, and design the button accordingly in Pro’s Header Builder and it looks fine (see screenshot) but on the front-end live site, the right bar has pushed the site over, and is white. I see no controls to make a right bar absolute/relative, so how do I achieve this? Is there no way to add a transparent header bar on the right that sits ‘under’ the top navbar?

Not appearing now on live site because I cant have that show for my client, but please refer to the screenshots.

Thank you!

[rad]

Hi there,

Thanks for writing in.

The side header has its own spacing to make sure the content are pushed (similar to icon stack sidebar). In your case, you can only remove the space through custom CSS.

Please add this CSS to your global custom CSS

.x-bar-space-right {
display: none !important;
}

This CSS will be applied to all spacers, but if you prefer to apply it to specific header then you should use something like this

.hm1.x-bar-space-right {
display: none !important;
}

It depends on your header ID, if you have one header then it should be hm1. You may use browser developer’s inspector to see which ID or class your header is using.

Thanks!

[SuitedCreative]

Thank you, @Rad. That did the trick!

Best Regards,

Drew

[nabeel]

You’re most welcome!