As a frontend developer, I've created numerous menus over the years. These menus have typically been the most intricate element of a website, incor...
For further actions, you may consider blocking this person and/or reporting abuse
Great menu!
Is it possible to fix the effect of increasing the distance between items when you enlarge the window horizontally in mobile?
Yes! There are multiple gap's in use, though.
In
.menu-main(the main items), the gap is usingclamp, so it changes dynamically, depending on the viewport-width:gap: clamp(0.5rem, -3.875rem + 14vw, 4rem);You can adjust these, or make your own here, or simply enter a static value in a "mobile-only" media-query.
The gap between the CTA-items is using the same method, but with smaller values.
Desktop:
On the wrapper, the space between the logo, the main items and the CTA is spaced with
justify-content: space-between, but you can add agap-property, if you want.Thank you!
This is a very clever and elegant solution to create a responsive menu in CSS. I love how you have used the :hover and :focus-within pseudo-classes to toggle the menu visibility. I also appreciate how you have explained the code and provided a demo link. This is a very useful tip for web developers. Thank you for sharing!
Thank you!
Great post! Really useful!
Thanks!
Great content!
Thank you!
This is super helpful, I’d like to try this out on my next project. Appreciate you sharing it.
Thank you!