[Support request] Sticky mobile menu adding button

[Dax]

Hi again,

It no longer appears as a button though?

Is it not possible to have it appear as a button? Surely it can be done, I’ve seen multiple sites like that.

Do I need to change the size of the elements maybe?

[Ying]

It no longer appears as a button though?

Do you mean the Get Boiler Quotes button on mobile?

If so, the CSS should not affect the button style.
Can you take a screenshot of what you mean as It no longer appears as a button?

[Dax]

Hi again,

What I mean is that the button is now the same height as the mobile header.

What I want is it to be a smaller button i.e. a rectangle that will look more like a traditional website CTA button.

Please see example here: https://snipboard.io/sQEmS2.jpg

Thank you

[David]

You need to make some choices, as making it auto responsive by scaling the size of logo, button, hamburger, could be a bit of a car crash.

For example, try adding this CSS:

nav .navigation-branding {
    margin-left: 0;
    margin-right: 10px !important;
}
.navigation-branding img.is-logo-image {
    height: auto;
    width: 100%;
    max-width: 184px;
    
}
.navigation-branding {
    flex: 1 1 0;
}

This will make it so the Logo will adjust its size to accommodate the other items on smaller screens.
And then so as the Logo doesn’t do all the work, you can use this to reduce the CTA button font size on small screens:

@media(max-width: 420px) {
    nav .cta-button {
        font-size: 12px !important;
    }
}

[Author]

Posts