DEV Community

Discussion on: Creating Navbar Using CSS

Collapse
fcalderan profile image
Fabrizio Calderan • Edited

I'd suggest to use flexbox for the list instead of floating the list-items, but if you still want to use floats I recommend to also use a float-clearing technique on the list.

Collapse
hrushikesh41 profile image
Hrushikesh41 Author

True. But I've created this one keeping in view for the beginner . So float is easy to understand than flexbox

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

Collapse
fcalderan profile image
Fabrizio Calderan

Imho float is not as easy as flexbox because with floats you are in fact removing elements from the static flow of the page and their container (the list) behaves like is empty, unless you apply a clearing technique.

A beginner is not probably aware of this issue so they could likely experience an unexpected behaviour.

Thread Thread
hrushikesh41 profile image
Hrushikesh41 Author

Thank You for your help

Collapse
arvindpdmn profile image
Arvind Padmanabhan

Same suggestion. Try flexbox: devopedia.org/css-flexbox

Collapse
hrushikesh41 profile image
Hrushikesh41 Author

Thank You for suggestion 😃