Update the Navbar
Explore how to update a Bootstrap 4 navbar by comparing visual differences, editing CSS directly in index.html, and using browser DevTools to inspect and adjust styles. Learn techniques to modify dropdown borders, search input styling, and add a bottom border to navigation, along with updating navbar branding correctly using HTML entities.
Visually comparing the navbars
Before changing our new navbar’s CSS, let's visually compare the two navbars.
With this quick comparison, we see there are just two main differences between the two navbars:
The dropdowns’ borders are not rounded in the source theme. The search input’s borders are rounded.
There’s a bottom border on the nav element in the source theme.
Make the needed changes
Let's try to fix the things mentioned above quickly by editing the code.