How to display the "Book here" button on mobile version

andrewwinkler

I was wondering how I can display the "book here" button on the mobile version of the site, not necessarily on all pages, but at least on some, such as the "home" page or the "my services" pages.

saguaros

Hi andrewwinkler

May I know where you want to show that button? as on mobile screenshot, there is not enough space to show logo + button + menu button on the same row now.

Regards

andrewwinkler

Maybe in a row just below the row with logo and menu button?

saguaros

Hi andrewwinkler

The 'book here' button now is a part of mainnav block. I recommend this way:

1 - In the Layout settings of template, you can add a new section below the header
2 - Load the module 'Head Actions' into this section
3 - In row options >> Responsive tab >> hide this section in desktop / large screen so it can display on mobile view only.

Regards

andrewwinkler

I have added a section below header and called it 'booking' and made it invisible to all devices but mobile phones. I have also "loaded" the "head actions" module into that 'booking' section. It is showing now in the mobile phones layout, however the button looks different. There is no margin on the left and the right of the button text and the menu button on the top right corner has moved underneath the logo.

saguaros

andrewwinkler

You can try this custom css:

.t4-headactionsmobile .btn.nav-link {
    padding: 1.06rem 2.857rem;
}

@media (max-width: 575px){
.btn.t4-offcanvas-toggle {
    padding-right: 0px !important;
}}

andrewwinkler

Perfect. Many thanks.