Free UI/UX design course
Learn how to create exceptional designs by reading my new tutorial.
Start learningNavbar
Step 1 - prepare index.html file
Let's remove unnecessary code so we have a place for our new project.
Below the opening <body> tag you will find the comment Start your project here and above the closing </body> tag End your project here. In between is the code with the MDB welcome message:
Remove it and save the file. You should see a completely blank, white screen.
Step 2 - prepare the basic structure
The same as with the previous projects, our blog also needs a basic structure to keep the code organized.
Add the following code to your index.html file:
After saving the file you will still see a blank page. This is fine, because the structure we added doesn't have any elements to render yet.
Step 3 - add navbar
Go to the navbar documentation page and copy the code of the basic example. Then paste it into the index.html file, inside of the <header> section.
Remember that we are now using the Vite starter, and therefore ES modules. As you remember from previous lessons, in this case we also need to copy the JavaScript code and insert it into the src/js/main.js file to initialize the components.
Insert the code below the imports already existing in the main.js file:
Save the files. You should see the navigation bar.
Step 4 - adjust the navbar
Now we have to customize the default navbar so it looks like the one from the final demo.
We will:
Change the logo using icons available in MDB
Change the links
Change the icons on the right side
Change the color of the links and shadow of the navbar
Note: We've been learning about all these things in previous tutorials. I'm assuming you've followed them all, so I won't go into the details to avoid repeating myself.
However, if something is unclear to you, I suggest you repeat the knowledge from previous lessons or write to me on twitter.
After saving the file you should see the navbar like this:
There is only one thing we did differently from previous lessons. This time, the icons on the right side have been taken out of the collapsible wrapper so that they are visible on the mobile version without having to click on the "hamburger menu".
About author
Michal Szymanski
Co Founder at MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.
Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.