DEV Community

loading...

Discussion on: Creating Navbar Using CSS

Collapse
ashleyjsheridan profile image
Ashley Sheridan

I'd probably say that flexbox might be easier in a lot of ways. Floats do some very weird things when you're working with multiple floated items, resulting in the hacks of old for "clearing" them, etc.

With Flexbox though, something like this can be done with very minimal CSS:

nav {
    background-color: #30363d;
}

nav ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

nav ul a {
    text-decoration: none;
    color: #fff;
    padding: 14px 16px;
    display: inline-block;
}

nav ul a:hover {
    background-color: #7c7c84;
}
Enter fullscreen mode Exit fullscreen mode

Fewer styles on the <nav> element as there's now no need to specify dimensions, one more style on the <ul> to set it to display using flexbox, but no need for any styles on the <li> elements at all. Then finally, set the links to display: inline-block so that they behave as inline elements for document flow purposes but in a way that lets us specify some dimensions on them (which isn't possible for regular inline elements.)

Thread Thread
hrushikesh41 profile image
Hrushikesh41 Author

Thanks and will look into it