customizing navigation menus in jekyll mediumish theme

By -

Why Customize Navigation Menus

Navigation menus guide visitors through your content and help them find what they need quickly. Customizing these menus improves usability, reinforces branding, and can highlight important sections of your blog.

Default Navigation in Mediumish Theme

The Mediumish theme uses a simple navigation bar typically featuring links to home, categories, about, and contact pages. While functional, it might not fit every blog’s unique structure or branding needs.

Step 1: Locate the Navigation Template

Find the navigation markup, usually in the _includes/header.html or _includes/navigation.html file depending on your setup.

Step 2: Modify Navigation Links

  • Add new links by inserting list items <li><a href="url">Label</a></li> inside the <nav> or <ul> element.
  • Remove or reorder existing links to prioritize your most important content.
  • Use Liquid tags to dynamically generate category or tag links:
{% raw %}
<ul>
  {% for category in site.categories %}
    <li><a href="{{ site.baseurl }}/categories/{{ category[0] }}">{{ category[0] | capitalize }}</a></li>
  {% endfor %}
</ul>
{% endraw %}

Step 3: Add Dropdown Menus (Optional)

To create dropdowns, nest a <ul> inside a <li> and use CSS for hover or click behavior. Example:

<li class="dropdown">
  <a href="#">Topics</a>
  <ul class="submenu">
    <li><a href="/topic1">Topic 1</a></li>
    <li><a href="/topic2">Topic 2</a></li>
  </ul>
</li>

Step 4: Style Your Menu

Update your CSS (often assets/css/style.css) to match your branding and add responsiveness for mobile devices.

Step 5: Test Navigation Across Devices

Verify the menu works well on desktops, tablets, and smartphones. Pay special attention to dropdown accessibility on touch screens.

Case Study: Personalized Navigation for a Marketing Blog

A blog owner restructured their Mediumish navigation to include custom category links and a prominent 'Resources' dropdown. This helped visitors find tutorials faster, boosting page views by 18%.

Conclusion

Customizing your navigation menus in the Jekyll Mediumish theme allows you to tailor your site’s user journey and improve engagement. With simple HTML and CSS tweaks, you can create a navigation system that reflects your brand and content priorities.