Project:

My Portfolio Blog: flaakira

This post documents how I converted the site's top navigation into a compact hamburger (☰) menu that stays collapsed on every screen size and opens to reveal the links. It covers the folders involved, the exact code edits, and how the changes were committed on GitHub.

Where the navigation lives

The Clean Blog Jekyll theme keeps its navigation in an include file, and its styling comes from a vendored SCSS file:

• Navbar markup: _includes/navbar.html
• Styles (imported): _sass/styles.scss, which imports assets/vendor/startbootstrap-clean-blog/scss/styles.scss

Step 1 — Always show the ☰ icon

Bootstrap's navbar-expand-lg class spreads the links across the top on wide screens and hides the toggle. Removing that class keeps the navbar collapsed at all sizes, so the ☰ toggle is always visible and the links only appear when clicked.

<!-- Before -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">

<!-- After -->
<nav class="navbar navbar-light fixed-top" id="mainNav">

Step 2 — Clean up the toggle button

The original button showed the word "Menu" next to the icon. Removing that text leaves just the clean three-dashes icon.

<button class="navbar-toggler navbar-toggler-right" type="button"
        data-toggle="collapse" data-target="#navbarResponsive"
        aria-controls="navbarResponsive" aria-expanded="false"
        aria-label="Toggle navigation">
  <i class="fa fa-bars"></i>
</button>

Step 3 — Make the icon white

To make the ☰ icon stand out against the hero image, a small CSS rule was added to _sass/styles.scss to color it white:

#mainNav .navbar-toggler {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.6);
}
#mainNav .navbar-toggler i {
    color: #ffffff;
}

Step 4 — Commit on GitHub

The edits were made through GitHub's web editor and committed to the master branch. Because the site is hosted on GitHub Pages, Jekyll rebuilds automatically, and the new ☰ menu goes live within a minute.

• Edited _includes/navbar.html and committed.
• Added the white-icon CSS rule to _sass/styles.scss and committed.
• Verified the result on the live site: flaakira.github.io.

Result

The navigation is now a single ☰ icon in the top-left corner. Clicking it opens a vertical list of links (Home, Posts, Linkedin, Github, About me), giving the site a cleaner, more modern header that behaves consistently across desktop and mobile.

Learning Project & Final Update

This was a learning project: a hands-on exercise in customizing a Jekyll theme, understanding how Bootstrap's responsive navbar works, editing include and SCSS files, and committing changes through GitHub Pages. Along the way I also learned a practical lesson — keeping emojis and special characters out of post filenames (while still using them freely in the post title) so Jekyll builds every page reliably.

This marks the final update to my portfolio website. It wraps up the customization work on the site's design and navigation, leaving a cleaner, more modern portfolio to showcase my projects.

---