Archived topic
Sticky mobile menu adding button
18 replies · Started by Dax on February 26, 2023
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?
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?
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
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;
}
}