Docs

[oap5432]

I have placed the revolution slider between the top bar and the main navigation bar ( reference: https://community.theme.co/forums/topic/place-revolution-slider-between-the-topbar-navbar/ ). However, the top bar overlaps on the slider instead of pushing it down.
What is the css change that is required to achieve that?

[Rupok]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[oap5432]

This reply has been marked as private.

[Jade]

Hi there,

You can add this under Custom > CSS in the Customizer.

.x-topbar {
    position: absolute;
    width: 100%;
    background: transparent;
    border: 0;
}

Hope this helps.

[oap5432]

Unfortunately, I tried but it did not work. The top bar has a height of 50px; I would like the revolution slider to move down 50px from the top so that the top bar does not overlaps.

[Christopher]

Hi there,

Upon checking your site, I don’t see overlapping issue.

Please see the attachment.
Please clear cache and check again.

Thanks.

[oap5432]

Thank you for your help. I cleared the cache but the overlap is there. I am attaching screenshot.jpg (no top bar) and screenshot2.jpg (with top bar).

[Rad]

Hi there,

Please change this CSS

.x-topbar {
    position: absolute;
    width: 100%;
    background: transparent;
    border: 0;
}

to this

.x-topbar {
    position: absolute;
    width: 100%;
    background: transparent;
    border: 0;
    top: 0;
}
.site {
padding-top: 46px;
}

Hope this helps.

[oap5432]

It worked! Thank you very much for your help. Now, if I want to change the height of the topbar (or the top padding) just for mobile, what should I do? Thank you in advance.

[Joao]

Hi There,

Please add the following code to Appereance > Custonmizer > Custom > CSS

@media (max-width: 767px) {
.x-topbar .p-info {
    background: none;
} 
.x-topbar {
padding: 20px;
} }

Hope it helps

Joao

[Author]

Posts