Learn how to create a sticky menu for your WordPress website’s main navigation! Sticky menus help improve the user experience by making your website’s menu more readily available for site visitors. Plus, it can help improve the overall look of your site. Let’s get into it!
1. Navigate to the Site Editor
The first step in this process is to navigate to the “Site Editor” within the WordPress admin area. The Site Editor is available for “Block Themes” in WordPress, assuming you are using WordPress version 5.9 or newer.
To navigate to the Site Editor, go to Appearance>Editor (red arrow in the above image) from the main navigation in the WP Admin area.
Click on the main content area on the right side of the screen (outlined in light blue and denoted by the blue arrow in the above imate). This will take you to the Block Editor inside the Site Editor.
On the right hand side, under the tab “Page,” you’ll see a row labeled “Template” (outlined in blue in the above image). Click on the template name/link (red arrow). Then, click “Edit Template” (green arrow – sometimes “Edit Template” is a small blue text link below the dropdown that displays your template name).
2. Edit Your Template
You’ll now be inside the Template Editor for the homepage of your website. (If you don’t have a homepage set for your site, you can check out this tutorial on setting a static homepage for your WordPress website).
At the top of the template is your main navigation for your page – also called the “Header” of your webpage. When you hover your mouse over this element, you’ll see a purple box outlining it (red arrow in the above image). This indicates that this element is a “synced pattern,” which means making a change to one instance of the pattern will apply changes across all instances sitewide. Click on this area to select the Header synced pattern.
If this is your site’s main header element, you should now see that the synced pattern is labeled “Header” in the block toolbar.
3. Add Your Header to a Group
Within the block toolbar for the selected Header pattern, click on the “Options” icon (red arrow in the above image) and select “Group” (green arrow). This will nest the synced pattern into a group block.
You’ll notice the block toolbar now has the group block icon (blue arrow in the above image), and the outline around the main navigation area is now blue instead of purple (red arrow).
Note that this may change the width of your main navigation menu. To adjust the width, hover your mouse over the Header synced pattern and click to select it (red arrow).
In the block toolbar for the Header synced pattern, click the “Align” icon (green arrow) and change this back to the desired width (blue arrow – in my case I selected “Wide Width”).
To return back to the Group block, click on the “Select Group” icon in the Header block toolbar (pink arrow).
4. Set the Group to “Sticky”
With the group selected, navigate to the “Block” tab under the Settings Sidebar on the right side of the screen (red arrow in the above image).
Click the menu item labeled “Position” (green arrow). You’ll now see a dropdown here labeled “Default” (pink arrow). Click the dropdown and select the “Sticky” option (blue arrow).
Navigate to the top of the editor and click the “Save” button (red arrow), then click “Save” again. You will now have a stick menu main navigation for your WordPress website!
5. Style the Sticky Menu
You can customize/style many elements of the new sticky menu, but for this tutorial I’ll simply add a background behind the group block to ensure the menu spans across the entire width of the webpage.
To do this, with the Group block selected, I’ll navigate to the “Styles” tab of the Settings Sidebar (red arrow in the above image).
Under “Color,” I’ll click the “Background” option (blue arrow), then select the white swatch to set the background color to white (green arrow).
Once again I’ll click “Save” twice to save the changes.
Note that you can always adjust the width, height, or spacing of your website’s header under the “Dimensions” section using the “Padding” and “Margin” sliders.
You can preview your site by clicking the device icon (red arrow), then click “View site” (green arrow).
You can scroll your website and watch the sticky navigation menu remain in place at the top (green arrow)!
Once you’ve finished editing your sticky menu, click the “Back” button at the top of the editor (red arrow). This will return you to your webpage inside the Side Editor.
To return to the WP Admin area, simply click on the logo in the upper left corner.
That’s it for this tutorial! If you enjoyed it, you can learn WordPress with my in-depth course on Udemy. Or, you can check out other free WordPress video tutorials and WordPress help articles on my website.
