Buttons look terrible when screen width is 1280px Please HELP!

Hello,

I’m fairly new to Webflow and am just getting the hang of it now, I have built a generic navigation bar but when I’m testing out the buttons that I have placed on the right-hand side they get really wonky when the viewport is at 1280px at 100%. Does anyone have any ideas on how I can make my buttons more responsive to smaller laptop screens?

Thank you Webflow Community!


Here is my site Read-Only: https://preview.webflow.com/preview/1ig-print-2-3?utm_medium=preview_link&utm_source=designer&utm_content=1ig-print-2-3&preview=de43f0822336af6d9919d7803fa67609&pageId=5f6ba838f0e8654f1701e194&mode=preview

One option is to text-align the buttons & NAV-ITEM to the center (Looks better):

The other option is by custom CSS code to show the hamburger menu on a width from 1280px and below (Instead of 991px and below).

More ideas: Use Less margin/padding around (Use small margin - and max-width container instead).

1 Like

@Siton_Systems makes some great points and suggestions.

Another idea is to start with a fully fledged design before moving to Webflow stage. Not knowing your process, I know this has helped me better imagine how the page is structured.

In this case, you have a wide logo, several wide nav text buttons, and two more wide and tracked-out buttons with heavy padding. This all just fills the space rather quickly.

Again, not to judge your skills or process, get familiar with how the breakpoints affect the nav components in Webflow, then decide which elements you can comfortably fit here.

  1. Perhaps text navigation should live below the logo?
  2. Combine text nav items with the two buttons?
  3. Reduce text and/or combine navigation elements (1IG Stories → Stories, 1IG Blog → Blog), etc.?
  4. Perhaps Contact and About can live together under one item?

I hope this helps. You’re making great progress.

2 Likes

Thank you all for the great suggestions, I greatly appreciate it!
The hardest thing I have been working with lately is the client I am making this for feels VERY strongly about the Navigation and what is showing on the navigation so I, unfortunately, can’t change or combine any of the elements as I would like and as you have suggested. :frowning:

I am interested in trying out the elements underneath the logo since it is very wide. Do you have any tips for how I can do that? Do I make the logo a block element and left align it?

Thanks again for your suggestions!!

Thank you for the tip! I will definitely do this.