From the course: Advanced Responsive Layouts with CSS Flexbox

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Using Flexbox to control multiple menus

Using Flexbox to control multiple menus - CSS Tutorial

From the course: Advanced Responsive Layouts with CSS Flexbox

Start my 1-month free trial

Using Flexbox to control multiple menus

“

- With both the multi-level drop down menu and the social media menu complete we can combine the two of them into what I call a mixed menu. Now mixed menus have become a fairly common design pattern you see all over the web. And you can see it here on my website where you have the main menu on the left and then you have a social menu, or some other type of menu on the right. And then on smaller screens the two will fall below each other. Now if you've ever tried to do this using regular CSS, you will have discovered that this can really be challenging. That's because when you display a menu like you see here with a menu bar, you have to make it a block level element. But once it's a block level element and this social menu is also a block level element, you have to do some CSS alchemy to get them to display on top of one another. Essentially you have to take the social menu and shift it to appear on top of the other one. And it's kind of tricky and requires a lot of CSS. This is a…

Contents