Docs

[Jade]

Hi there,

Let try it this way, update the topbar content to:

<div class="x-section pam">
    <a href="new-student-offer" class="topbar-center-text" title=" 10 classes in 1 month">NEW STUDENT OFFER: 10 CLASSES FOR €50 </a>
    <a href="https://clients.mindbodyonline.com/classic/ws?studioid=34277&stype=-98" class="topbar-right-text" >Sign-up | Log in</a>
</div>

Then remove this CSS from the customizer:

.topbar-right-text {
    display: inline-block;
    margin: 0 auto;
    width: 100%;
    position: relative;
    text-align: right;
}

Add this CSS:

.topbar-right-text {
    position: absolute;
    top: 15px;
    right: 0;
}

@media (max-width: 580px) {
    .x-topbar .x-social-global {
        width: 100%;
        position: relative;
    }

    .x-topbar {
        height: auto;
    }

    .topbar-right-text {
        position: relative;
    }
}

Hope this helps.

[Bijan]

you’re a life saver Jade,
many props to you and the team, this theme is ridiculously awesome!

is there any css / php change I can make to make the topbar hide in mobile / tablet view?

because now it’s stacking and making the landing page kind of disappear…

see the attachements

[Rad]

Hi there,

Sure that’s possible, please add this CSS as well.

@media ( max-width: 979px) { //Portrait tablet and mobile

.x-topbar {
display: none !important;
}

}

@media ( max-width: 1024px ) and ( orientation:landscape ) { //Landscape tablet

.x-topbar {
display: none !important;
}

}

Hope this helps.

[Author]

Posts