How to Make a Sticky Menu in WordPress

Website navigation menus are crucial design elements. Instead of simply adding a menu without careful consideration, designers should prioritize menu design, page space allocation, and user interaction.

Sticky menus, popular for their persistent top-of-browser placement during scrolling, offer continuous accessibility regardless of page position. This enhances site navigation.

When to Use Sticky Menus

Sticky menus aren't universally suitable. They work best with small, single-line menus at the page top, lacking submenus.

Effective sticky menu examples include:

• Apple's website: Its simple, space-efficient top menu is ideal for sticky implementation.

• Ted Baker's site: Its single-line menu employs a mega-menu expanding on hover, demonstrating a successful sticky mega-menu integration.

However, sticky menus aren't always appropriate. For instance:

• The Guardian website: Its large header and lower-placed menu would create excessive screen occupation if made sticky.

• IBM's site: Its top menu with dropdowns isn't sticky, likely due to potential dropdown functionality conflicts within a sticky context.

Optimal sticky menu use involves a simple, top-placed, single-line menu. While mega-menus can work, careful implementation is crucial to avoid poor user experiences (e.g., unexpected mega-menu appearances during scrolling).

Adding a Sticky Menu: A Practical Guide

Let's explore the code for creating a sticky navigation menu.

Requirements:

• An editable theme (see below).
• A WordPress development environment (avoid live site modifications).
• A code editor.
• Access to your theme files.

For this example, a custom theme will be used. For third-party themes, create a child theme to preserve edits during updates.

Initial Code Example

Consider this website example:

The menu disappears upon scrolling:

The CSS will be modified to maintain the menu's top position during scrolling. The header.php file contains the menu code:

<div class="header-bg"><br></br><br></br><br></br><br></br><hgroup class="site-name one-third left"><br></br><br></br><h1 id="br-br-php-if-is-singular-array-rmcc-landing-rmcc-signup-is-page-template-page-tripwire-php-br-bloginfo-name-br-br-br-br-else-br-br-a-href-https-www-php-cn-link-c-cf-f-df-d-d-bf-rel-home-title-php-echo-esc-attr-get-bloginfo-name-display-php-bloginfo-name-a-br-br-php-br-br"><br></br><?php if ( is_singular( array( 'rmcc_landing', 'rmcc_signup') )  || is_page_template( 'page-tripwire.php' ) ) {<br?>                       bloginfo( 'name' );<br></br>                 } <br></br>                  else { ?><br></br><a href="https://www.php.cn/link/0783683c446cf52f9df7d90d92bf5239'/' ); ?>" rel="home" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ??></a><br></br><?php } ??><br></br></h1><br></br><h2 id="site-description"><?php bloginfo( 'description' ); ??></h2><br></br></hgroup><br></br><br></br><div class="right two-thirds"><br></br><br></br><br></br><?php if ( ! is_singular(array( 'rmcc_landing', 'rmcc_signup' ) ) && ! is_page_template( 'page-tripwire.php' ) ) { ??><br></br><a class="toggle-nav" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">☰</a><br></br><?php } ??><br></br><br></br><br></br><?php if ( ! is_singular(array( 'rmcc_landing', 'rmcc_signup' ) ) && ! is_page_template( 'page-tripwire.php' ) ) { ??><br></br><nav class="menu main right"><br></br><div class="skip-link screen-reader-text"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bcontent" title="<?php esc_attr_e( 'Skip to content', 'compass' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ??></a></div><br></br><?php wp_nav_menu( array( 'container_class' =?> 'main-nav', 'theme_location' => 'primary' ) ); ?><br></br></nav><br></br><?php } ??><br></br><br></br></div> <br></br><br></br><br></br><br></br></div><br></br>

This code includes:

• Navigation and header background (full-width).
• Header element (with width CSS).
• Site title and description.
• Navigation menu.

Theme CSS handles layout, floats, and colors. The position: sticky; top: 0px; CSS will be used to create the sticky effect. This makes the element behave normally until it reaches the offset threshold, after which it remains fixed.

A CodePen demo showcases this in action.

[CodePen Embed Here - Replace with actual CodePen embed code]

Sticky positioning also allows for banners above the menu in the initial (non-scrolled) state, automatically disappearing upon scrolling. Basic markup for this:

<div class="banner"><br></br><p>I am a banner!</p><br></br></div><br></br><br></br><nav><br></br><ul><br></br><li>Home</li><br></br><li>Blog</li><br></br><li>Products</li><br></br><li>Contact</li><br></br></ul><br></br></nav><br></br><br></br><br></br><br></br><br></br>

Relevant CSS:

header {<br></br>  position: sticky;<br></br>  top: 0px;<br></br>}<br></br>

This fixes the header (containing the navigation) at zero pixels from the viewport top.

Conclusion

For sites with simple, top-placed menus, sticky menus enhance user navigation. However, large menus or menus below header elements may cause excessive screen occupation, negatively impacting user experience. The decision depends on the specific website design, but adding a sticky menu is simpler than one might expect.

The above is the detailed content of How to Make a Sticky Menu in WordPress. For more information, please follow other related articles on the PHP Chinese website!