Hi there,
I’m building a blog here:
http://blog.padthaiwokbar.com/
Thing is, everything looks great as is, however the header menu looks messed up on 4k displays, and 1024px small laptops. Messed up means that the nav menu is too long and it goes right through the social icons on the right.
How can I fix this without making the menu items smaller. I could maybe go with @media, but I’m guessing it is worth it to learn how flex works. ^^
Thanks!
Hi there,
Thanks for posting in.
Your page layout max width is just 1200px, but your menu width is more than that.
In 4k display, the page content will stay in 1200px since it’s the max you set for the layout, so it’s only recommended that you make your header max width the same. I believe, there is a setting in header builder (especially the header bar or container) where you can set max width. Imagine that your header responds the same way page content’s respond, because the dimension is the same. Currently, it looks messy on 4k display since there is no limit in your header’s width.
Now, if you set your header’s max width to 1200px, you can change its font size or remove some items to fit it. The menu itself is already a 1250px width (larger than 1200px). You also need to create room for the icons.
Once you’re done, I can further check to see what’s missing 
Thanks!