Mobile Menu Item/Button Help

[vaughanmatt]

Is it possible to add a button to only the mobile menu or an additional menu item?

I would like to add the “Book Online” button I have in my header to the bottom of my mobile menu but am unsure how to do so. See images attached.

Or, if that isn’t possible, to add a “Book Online” menu item only visible in mobile.

I received a response previously to this inquiry but I was not notified by email and by the time I got back to it the ticket was closed. Also, the response I was given did not help me and I still am unsure what to do.

I am using the PRO theme and have multiple headers set up. I just need the header to function exactly as it is but add that button to the mobile version of the site.

[marc_a]

Hi @vaughanmatt,

Thanks for reaching out!

I suggest that you add a new custom menu in your Main Menu called Book Now, then in your Book menu please add a CSS class book-now.

Then add the CSS code below in your Pro > Theme Options > CSS.

.book-now {
  display: none !important;
}
@media (max-width: 978px) {
  .book-now {
    display: block !important;
  }
}

Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps.

Thank you.

[vaughanmatt]

@marc_a

.book-now {
  display: none !important;
}
@media (max-width: 978px) {
  .book-now {
    display: block !important;
  }
}

Thanks! That works perfect.

[matt]

You’re very welcome, @vaughanmatt!