Docs

[chinnailu]

Hello,
I would like to place an Ad on top of the menu header of 320×50 px. It has to appear only on the Mobile Sites. Also, I want it to display only on Posts and Pages. I am looking for something like in attached site.

I am using Ethos and also a child theme. What view do I need to modify and what would be the code snippet ?

Can you please help ?

[Christopher]

Hi there,

You can add it in topbar area, to hide it on larger screen, wrap your code within following <div></div> :

<div class="cs-hide-xl cs-hide-lg">ad code</div>

Hide sidebar on all pages except post and articles by adding following code :

.x-topbar{
display:none;
}
.single-post .x-topbar,.page .x-topbar{
display:block;
}

Hope it helps.

[chinnailu]

This reply has been marked as private.

[Rue Nel]

Hello There,

If you want to have a white background for your topbar, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.site .x-topbar {
  background-color: #fff;
}

Hope this helps. Kindly let us know.

[chinnailu]

Hello,
Thank you, it is much better now. But one help, I see lot of padding space around it. I really do not want any space around the 320×50 image or ad. Maybe 2 px padding. How can this be done ?

[chinnailu]

This reply has been marked as private.

[Christopher]

Hi there,

Please add this:

.x-topbar-inner.x-container.max.width p:empty {
    display: none;
}

Update this code :

.x-topbar{
display:none;
}
.single-post .x-topbar,.page .x-topbar{
display:block;
}

To:

.x-topbar{
display:none;
}
@media (max-width:979px){
.single-post .x-topbar,.page .x-topbar{
display:block;
}
}

Thanks.

[chinnailu]

This reply has been marked as private.

[Thai]

Hi There,

Please add the following CSS:

@media (max-width: 767px){
    .x-topbar .x-social-global {
        display: none;
    }
}

Hope it helps 🙂

[chinnailu]

Thank you ! It works ! Appreciate your quick response.

[Jade]

You’re most welcome.

[Author]

Posts