Staff replied Templates

Button "Booking now£ on mobile device

Asked by giampaolo 6 months ago Last activity 6 months ago

Good morning, I would like to know how to display the "Booking Now" button in the Travelkit template, which is located at the top right in the "menu" position on mobile devices.

7 replies

Ziaul Kabir Staff

6 months ago

Hello,

Thanks for reaching out to us.

Please, use this custom css, you may check this documentation from here: https://www.joomshaper.com/documentation/helix-framework/custom-code-css-js-meta#documentation-heading-3

@media (max-width: 575px) {
    #sp-header .sp-module {
        display: block !important;
    }
}

Thanks

giampaolo Asked this

6 months ago

OK thanks but I would like to see only the button and not the language flags

Ziaul Kabir Staff

6 months ago

Could you please let me know which language flag?

Thanks,

giampaolo Asked this

6 months ago

I don't understand what the language of the flag has to do with it, but the flags are Italian and English. Maybe I didn't explain the ones I need well. I'd like the "Book Now" button to appear in the top bar of the mobile version, but not the little flags where you switch languages. I hope I was clear.

Ziaul Kabir Staff

6 months ago

Please, share your website url with me.

Thanks

giampaolo Asked this

6 months ago

https://www.pugliandgo.com/

Ziaul Kabir Staff

6 months ago

Go to Content → Site Modules, where you’ll find the module assigned for the language switcher. Disable that module.

Then, create a new module using SP Page Builder, add a “Book Now” button, and assign it to the same position.

Thanks 🙂

giampaolo Asked this

6 months ago

Maybe I didn't explain myself clearly. So the desktop version is fine as is, including the language switcher module. In the mobile version, I only need the "Book Now" button to be visible and not the flags in the language switcher module. Is that possible?

Ziaul Kabir Staff

6 months ago

Yes, you can—but it requires a bit of CSS to control visibility based on screen size.

Create a new module and assign it to the same position as the language switcher. Then use CSS to hide one module on mobile and the other on desktop.

Thanks