Creating a nav bar with flexbox

Question

I've been learning code only for a couple of weeks, so I have a very basic knowledge. I got stuck trying to build a navbar using flexbox.

For some reason I can't get my nav buttons (

) to stand in a horizontal way. I've been trying and rewritting my code, but I can't figure it out.

Here's the link to my code: https://codepen.io/kokazp/pen/xxORovj?editors=1100

Thanks in advance.

 body{ font-family: 'Yanone Kaffeesatz', sans-serif; background-color: lightGray; } navbar { background: white; box-shadow: 0px 0px 10px var(--clr-gray200); padding: 1rem 0; border-radius: var(--radius); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; } #header-img{ height: 70px; width: 70px; margin-right: auto; margin-left: 10px; } ul{ list-style: none; margin: 0; padding: 0; } li, a{ background-color:white; text-decoration: none; padding: 8px; color:black; } li a:hover{ background-color: black; color: white; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@300&display=swap" rel="stylesheet"> <link rel=StyleSheet HREF="estilo.css"> </head> <body> <header id="header"> <navbar id="nav-bar"> <ul> <li><img src="https://blog.spoongraphics.co.uk/wp-content/uploads/2017/craft-brewery-logos/1.jpg" id="header-img" alt="Company logo"></li> <li><a href="#form">Contact</a></li> <li><a href="#beers">Beers</a></li> <li><a href="#video">Video</a></li> </ul> </navbar> </header> </body> </html>

Answer 1

let's make it clear when you use a flex-box it applies to children not to grand children, when you apply display:flex to ur navbar it will make the ul a flex child, so li tags are not flex, secondly you're making it columns so it will make it in a vertical way. solution: you can make the ul

ul{display:flex;}

and it will make the li go to row direction by default

Creating a nav bar with flexbox

Question

1 answers

solution1
1 2020-10-23 01:41:23

Creating a nav bar with flexbox

Question

1 answers

solution1 1 2020-10-23 01:41:23

solution1
1 2020-10-23 01:41:23