Streaming live at 10am (PST)

Best way to create responsive two column nav header with same height?


#1

Hello!

I am trying to achieve what is in this image:

Six nav buttons on the left, with a header box filling the same height as the nav items on the right. I also need the possibility to add more nav buttons in the future, and for the header box to continue filling the height, whatever height that may be.

I’ve found a few ways to achieve this, but I’m wondering what is the most proper way? I don’t want to hurt the responsiveness of the site.

Any advice is appreciated, thank you!!!


Here is my public share link: PUBLIC SHARE LINK
(how to access public share link)


#2

Hi. Webflow Grid use FLEXBOX - so this is the default behavior of cols on display:flex:

Option 1 - columns

Create layout by columns - one col for the list and one for the heading (add style to change the space between columns)

Option 2 - Flexbox

For more complex layout you can use flexbox boxes (in your case the layout is very simple so columns should work better - easy to set and control responsive)

“Page heading” Center-Center always

If you want “page heading” (right col) to be always Center V and H - do this again by flexbox

Related HTML-CSS links:



#3

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.