How to make buttons & drop-downs responsive?

Hi,

As you can see in the below images, the (yellow, red & white) buttons in the nav-bar look nice & tidy, but as I make the screen smaller, they get cramped.

Here, the (blue) drop-down menu overflows when I make the screen smaller.

image

image

Instead of the text spanning to the next line, is it possible to make the button and drop-down smaller as the screen size becomes smaller? So that they look visually presentable.

Thank you.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

How exactly do you envision this? Responsive text? As in text gets smaller with the button or something?

Yes. Is that possible?

Use vw’s for the text size and see if you can make it look good. I’d rather not - the text is too small as it is, it will look blurry on some devices. You can also simply change text size on different breakpoints

1 Like

How about the (blue) drop-down? The text isn’t spanning there.

You didn’t publish your read-only so I don’t know what’s up with it

Sorry. Here it is: https://preview.webflow.com/preview/online-lubricants?utm_medium=preview_link&utm_source=designer&utm_content=online-lubricants&preview=606df8459450b2cb45518e1c7cc1aea2&pageId=5cee803d3c0d6cc9bd89a6c8&mode=preview

I think that’s just the way dropdowns are. You can either cut it when it reaches some width (won’t look good) or create a custom dropdown (from a button for example).

When you say custom drop-down, is it a button with an interaction to show/hide menu on click?

Exactly. You can use those that already there, put icon for visual distinction to the right of the text, style the button, add hidden dropdown list, reveal it on click and hide on second click.

1 Like

@dram My design looks neat for monitor sizes from 1300 px width and upward. But my client wants the website to be responsive down to the smallest of desktop screens.

This is how it looks like on a 10" notebook.

This is how it looks like on a 992 px width in webflow.

There are too many variables - buttons, texts, divs, images, etc. I know I need to use % and VW to make things responsive. But the Min. Width doesn’t always work as expected.

Would you have some advice on what to do?

Can’t see a problem tbh. Why won’t you just make your filter controls smaller?

Is it possible to not change the font style, instead make the buttons smaller as the screen size reduces?

You can add custom breakpoints and style your elements the way you want. And yes, you can make paddings on buttons responsive by using vw’s. It won’t help much though - the text is unnecessary large for the filter section. Either reduce it or increase the filter panel width.