BugWP logo BugWP
Back to Community
Home / Community / Theme → Twenty seventeen

How to Customize the Twenty Seventeen Theme Navigation Menu

16 threads Sep 9, 2025 Theme → Twenty seventeen

Content

Many users of the popular Twenty Seventeen WordPress theme encounter challenges when trying to customize their site's navigation. This can range from simple styling changes to more complex structural modifications for mobile and desktop views. Based on common community questions, this guide outlines the most frequent navigation issues and their solutions.

Common Navigation Challenges

Users often want to modify how the main menu behaves and appears. Frequent requests include:

  • Changing the mobile menu breakpoint (the screen width at which the desktop menu switches to a hamburger button).
  • Adding a search bar or other elements to the top navigation menu.
  • Styling menu items specifically for mobile or desktop (e.g., link color).
  • Creating a multi-line menu or forcing a line break.
  • Making the sub-menu a full-width bar instead of a dropdown box.

Why These Issues Occur

The Twenty Seventeen theme uses a responsive design that automatically adjusts the menu layout based on screen size. This behavior is controlled by a combination of CSS media queries and JavaScript. Customizations that only address one part of this system (e.g., only CSS) may not work completely, leading to the menu toggle button not functioning or styles not applying correctly on all devices.

Most Common Solutions

1. Changing the Mobile Menu Breakpoint

The default breakpoint is 48em. To change it to 59em (or 916px), you must override both the CSS and the JavaScript logic. Inserting the following code in the Additional CSS section is a start, but it is often not sufficient on its own:

@media screen and (max-width: 59em) {
  .js .menu-toggle,
  .js .dropdown-toggle { 
    display: block;
   }
  .main-navigation ul {
    display: none;
  }
}
@media screen and (min-width: 59.001em) {
  .main-navigation ul {
    display: block;
  }
}

As noted in the community threads, this CSS change may make the button visible, but the JavaScript file that controls the toggle functionality may still be using the original breakpoint. For a complete solution, creating a child theme and enqueuing a modified JavaScript file that updates the breakpoint value is often necessary.

2. Adding a Search Bar to the Top Menu

This requires modifying a theme file. The safest method is to use a child theme. In the child theme's header.php file, locate the <nav> element with the class .main-navigation. You can add the WordPress search form function inside this element, after the menu, to place it within the navigation bar.

<?php get_search_form(); ?>

You will then need to use CSS to style and position the search form appropriately within the menu bar.

3. Mobile-Only Styling

To change the color of top menu links only on mobile devices, use a CSS media query that targets smaller screen sizes. Avoid using PHP conditionals like wp_is_mobile() in the header, as this can cause caching issues. The following code added to Additional CSS is more reliable:

@media screen and (max-width: 48em) {
  ul#top-menu a { 
    color: #fff;
  }
}

4. Creating a Multi-Line Menu

To force a menu to wrap after a specific item, you can use CSS. First, identify the unique ID or class of the menu item you want to be the last on the first line. Using browser developer tools (F12) is the easiest way to find this. Then, add a line break using the ::after pseudo-element.

#menu-item-123::after {
  content: "A";
  white-space: pre;
}

Important Recommendation: Use a Child Theme

For any solution that involves modifying theme files (PHP, JS), it is highly recommended to use a child theme. This ensures your customizations are not overwritten when the Twenty Seventeen theme receives an update.

Customizing theme navigation often requires a mix of CSS and PHP adjustments. For more complex changes, such as registering a new navigation menu area or significantly altering the menu's structure, custom development work is typically needed beyond simple snippets.

Related Support Threads Support