How to Display All Menu Items in BeautifulHugo’s Mobile Hamburger Menu Without Scrolling

Introduction: If you use the BeautifulHugo theme for your Hugo static website, you might have noticed that when your main menu contains many items (e.g., 11 or more), the mobile menu (the “hamburger menu”) can’t display them all at once. Instead, only the first 7–8 items show, and visitors have to scroll down to reveal the rest. This isn’t ideal for user experience, especially if you want easy access to all sections of your site.

In this article, I’ll show you a simple CSS tweak to display every menu item on small screens, no scrolling required.

The Problem

• By default, BeautifulHugo’s mobile navigation uses a fixed height for the collapsed menu.
• If you have a long menu, extra items are hidden and only accessible by scrolling.
• This can make your site navigation less obvious and harder for users.

The Solution: Adjust the Mobile Menu’s CSS

To ensure all your menu items are visible at once, you just need a CSS override adjusting the mobile menu’s height and overflow.

Step-by-Step Instructions

Locate or Create a Custom CSS File

If you already have /static/css/custom.css, open it.

If not, create one in your Hugo site directory.

Insert the Following CSS

@media (max-width: 768px) {
  .navbar-collapse {
    max-height: 100vh !important; /* Allow menu to take up the full viewport height */
    overflow-y: auto !important;  /* Enable vertical scrolling if needed */
  }
  /* Optional: Make each menu item smaller */
  .navbar-nav > li > a {
    font-size: 15px;
    padding: 10px 12px;
  }
}

Reference Your Custom CSS File

Link this file in your site’s configuration (hugo.toml),

Example for hugo.toml using BeautifulHugo:

[params]
  customCSS = ["css/custom.css"]

Test Your Site

Build and serve your Hugo site locally.

Open the site on your phone or shrink your browser to mobile width.

Click the hamburger menu: all items should be visible or scrollable within the viewport.

Bonus Tips

• If 11 items still don’t fit well: Consider reducing the padding or font size in the CSS above.
• Alternative approach: For even larger menus, explore converting to a fullscreen navigation or using multi-level dropdowns.

Conclusion

A simple tweak allows all your menu links to be accessible on mobile, vastly improving your site’s navigation experience. The BeautifulHugo theme is highly customizable, and minor CSS adjustments like this help tailor it perfectly for your needs.