Snippet Responsive Bootstrap Navbar
1
Not solved Solved
3 months ago

Hi, I search a snippet for a navbar bootstrap. I want to make a simple minimalist navbar like https://www.airbnb.fr/. Left: logo, and right : list of links.

3 months ago

Check out the navbar from LeWagon UI Components, and especially the CSS. Check how the logo is being aligned to the left, and all of the other content to the right by putting display: flex; justify-content: space-between; on the main navbar component.
You can read more about flexbox (awesome for positioning in my opinion) in a complete guide here on CSSTricks and here on W3Schools.

An alternative is using float: right; to align the links on the right. It's supported better by browsers than flexbox, but I have found that it's also a bit more iffy. Check out the W3Schools page on float.

As for a snippet, here's a JSFiddle using the LeWagon navbar (with flexbox) template, but every other feature stripped away. Note that this is not very responsive (on mobile, the links will not change into a dropdown menu but just stay the same).

Hope this helps :)

3 months ago

Thank you @JeroenPJ for your help.

Cancel
Submit your answer