srumery

Well, hello there, @kimkzoo! 😉

Moving the tab to the bottom is not an option in the settings so it must be done using CSS only. Give this a shot and let me know how it goes.

@media screen and (max-width: 767px) {
    a#rum_sst_tab {
        position: fixed;
        bottom: -1px;
        left: 50%;
        transform: translateX(-50%);
        cursor: pointer;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        top: auto;
        right: auto;
    }
}

Hi @groggy72,

Thanks for using Simple Side Tab.

From what I can see, it actually IS working on mobile but it looks like it isn’t when you are on the homepage. Let me explain my findings.

The tab URL is set to “https://suzielucks.com.au/#book” so the expected behavior is when you press the “Book” tab, it will take you to the homepage and scroll down to the #book anchor location further down the page.

Non-homepage: Open any page that is not the home page, like the about page, open the mobile menu, then press the “Book” tab. That takes you to the specified URL which is the homepage and scrolls down to the #book anchor.

Home page: When you are on the homepage and press the “Book” tab, it scrolls down to the same #book anchor location, however you can’t see it because the mobile menu is still open. If you close the menu you will see that you are where you expect to be.

So I think there are three options.

1. Add some JavaScript that closes the mobile menu when the Book tab is pressed. (best but requires code)
2. Hide the tab on the homepage for mobile only so it is not confusing. (not great but easy)
3. Create a new page for the booking form and change the URL of the tab to that new page. (easy but maybe not the best if you don’t want to move your content.)

There are trade offs for each one but something has to give in order to get the functionality you are looking for.

Cheers!

Great! I’m glad you were able to get this to work the way you need it to.

The fix has been deployed. Thanks for the heads up on that @jarstan.

Cheers!

Thank you, @sheilawiley!

You made my day! 🙂

Are you able to target the anchor tag using CSS id of “rum_sst_tab”?

id="rum_sst_tab"

String translation on that should work for you. Give that a shot and let me know how it goes.