Logo

The logo is an essential element of brand identification in any business. Using one of the free tools from the MDBootstrap environment - Logo Generator, we will create a simple logo that we will add to the navbar in our portfolio.

Of course, such a logo will not replace a fully professional logotype created by a designer, but it will certainly be enough to start.

Step 1 - create a logo

Go to the Logo generator page. Here you can see a few available options.

You can change the text:

You can change the font:

You can change the icon:

You can change the size, colors, shadows and roundings:

So after you play a bit with it, remove the text, choose the icons you like and adjust it according to your preferences.

Step 2 - download the logo you created

Below you will find a blue "DOWNLOAD LOGO" button. Click on it and the logo you created will be downloaded to your computer.

Step 3 - compress your logo

Simple but important step - use Compressor tool (or any other similar tool) to make any of your images lighter.

Then move your logo to the img folder in your project.

Step 4 - add logo to the navbar

Add navbar-brand element to your navbar (as a first element of the list of the links inside of the codecollapsible wrapper) and specify the path to your logo.

Don't forget to specify the height of the logo. 20px should be fine.

        
            
  
      <!-- Navbar -->
      <nav class="navbar navbar-expand-lg navbar-light bg-body-tertiary fixed-top">
        
        [...]
  
          <!-- Collapsible wrapper -->
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">

              <!-- Logo -->
              <a class="navbar-brand me-1" href="#"><img src="./img/logo.png"  height="20px" alt="Logo"
                loading="lazy" /></a>
                
              <li class="nav-item">
                <a class="nav-link text-dark" href="#!">Projects</a>
              </li>

              [...]