From the course: Advanced Responsive Layouts with CSS Flexbox

Unlock the full course today

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

Using Flexbox to control advanced menus

Using Flexbox to control advanced menus - CSS Tutorial

From the course: Advanced Responsive Layouts with CSS Flexbox

Start my 1-month free trial

Using Flexbox to control advanced menus

“

- In the Advanced menu we're gonna use multiple Flexboxes nested inside of one another to change the display of not only the menu itself, but also the individual menu items. As you see right now the menu items look a bit strange. They each have an icon followed by a sentence. But the design calls for the icon to be displayed in a large format on the left with the first word from each of the sentences, so Home, Food, Recipes, and News displayed equally sized on the right and then the rest of the words displayed below the first word in cursive and smaller font. We could do this using positioning and negative margins but it would be really clunky. So instead we're gonna use Flexbox to change this display. In the Code Editor I go to the Exercise Files movie 02_04 and find menus.html. And here I'm gonna scroll down until I find the advanced menu. We can see the advanced menu is again, nested inside of nav with the class advanced-nav. Then we have an unordered list, list items, and within…

Contents