Creating a nav bar with flexbox

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>

Related Posts:

  1. How to center a navigation bar with CSS or HTML?
  2. PHP Include Nav-bar For Every Page Techniques?
  3. Half circle with CSS (border, outline only)
  4. Unblur content inside blurring background div
  5. Failed to load resource: the server responded with a status of 404 (Not Found) css
  6. CSS background-image-opacity?
  7. Resize image proportionally with CSS?
  8. Setting table column width
  9. How do I vertically align text in a div?
  10. Embed image in a
  11. How do I vertically center text with CSS?
  12. What is difference between png8 and png24
  13. How do I vertically center text with CSS?
  14. How to center an iframe horizontally?
  15. Can I have an onclick effect in CSS?
  16. How to style a checkbox using CSS
  17. How do I auto-resize an image to fit a ‘div’ container?
  18. CSS Background Image Not Displaying
  19. CSS: Moving the text down a few pixels but keeping the background still?
  20. Fix footer to bottom of page
  21. CSS no text wrap
  22. How to position text over an image in css
  23. shifting a piece of text down using CSS
  24. Display Two
  25. Add border-bottom to table row
  26. Bootstrap 4 Sticky Footer Not Sticking
  27. How to change css property using javascript
  28. Center form submit buttons HTML / CSS
  29. CSS: Moving the text down a few pixels but keeping the background still?
  30. How to use css first-child with :not()
  31. How to “crop” a rectangular image into a square with CSS?
  32. Should I use px or rem value units in my CSS?
  33. Flexbox: center horizontally and vertically
  34. Maintain the aspect ratio of a div with CSS
  35. How to draw diagonal lines with css
  36. How to keep footer at bottom of screen [duplicate]
  37. What is the difference between id and class in CSS, and when should I use them?
  38. How do I set vertical space between list items?
  39. Does bootstrap 4 have a built in horizontal divider?
  40. Check if an element contains a class in JavaScript?
  41. How to move image with css/html
  42. How can I set the image opacity for body background
  43. How to style the option of an html “select” element?
  44. CSS pick a random color from array
  45. html div background image not showing up
  46. Bring element to front using CSS
  47. Adding background image to div using CSS
  48. How to apply style classes to td elements?
  49. Align DIV’s to bottom or baseline
  50. how to overlap two div in css?
  51. Center a DIV horizontally and vertically
  52. CSS hover effect is not working on my code
  53. How can I center a div within another div?
  54. How to align content of a div to the bottom
  55. How do I style a dropdown with only CSS?
  56. Remove scrollbar from iframe
  57. Make a div fill the height of the remaining screen space
  58. Dynamic height of div with css
  59. Add image in title bar
  60. Removing ul indentation with CSS
  61. vertical divider between two columns in bootstrap
  62. Why an inline “background-image” style doesn’t work in Chrome 10 and Internet Explorer 8?
  63. Why write script type=”text/javascript” when the mime type is set by the server?
  64. My CSS won’t link to my HTML file
  65. Table fixed header and scrollable body
  66. How to make a div 100% height of the browser window
  67. css display table cell requires percentage width
  68. Setting a max character length in CSS
  69. Why doesn’t min-height not work on my page?
  70. How to write a:hover in inline CSS?
  71. CSS Resize/Zoom-In effect on Image while keeping Dimensions
  72. How to draw a trapezium/trapezoid with css3?
  73. How can I change the Bootstrap default font family using font from Google?
  74. External CSS not working
  75. Add stroke around text – on the outside – with css?
  76. How to exclude particular class name in CSS selector?
  77. How to create a text box in PHP to output data
  78. Full Page < iframe >
  79. Change cursor to hand when mouse goes over a row in table
  80. CSS table td width – fixed, not flexible
  81. Set textarea width to 100% in bootstrap modal
  82. Can I apply a CSS style to an element name?
  83. CSS max-height not working
  84. How to create a hidden in JavaScript?
  85. How can I make a div not larger than its contents?
  86. Horizontal list items
  87. How to make Bootstrap Panel body with fixed height
  88. word-wrap break-word does not work in this example
  89. CSS “and” selector – Can I select elements that have multiple classes?
  90. Change navbar text color Bootstrap
  91. position fixed is not working
  92. Create a slanted edge to a div [duplicate]
  93. Override USER AGENT STYLE SHEET – Chrome
  94. Place a button right aligned
  95. aking a flex item float right
  96. td widths, not working?
  97. How put links in wordpress dynamic sidebar?
  98. Firefox CSS Animations Broke [closed]
  99. Using custom HTML tags to WordPress [closed]
  100. Main menu effect visited

Leave a Comment