When designing blog posts with different styles and features, my main goal is to give a better reading experience. I focus on making the post look good while also making it easier to read and access information.
In terms of giving easier access to what our posts contain, improving our blog posts isn’t a problem. If you’re using WordPress and Gutenberg to create posts like I do, you can add a feature that helps readers quickly find the information they’re looking for: the Floating or Sticky Navigation Menu. It’s similar to a table of contents, but a little different.
The best part is that it only takes about 30 minutes to set up, and you won’t need to install any heavy plugins. All you need are Gutenberg Design blocks and a few HTML elements. Let me show you how it works. Just so you know, this blog post is an example of one that uses a sticky navigation menu.
The Use of a Floating Navigation Menu
Similar to a Sticky Navigation Bar, a Floating Navigation Menu helps readers in several ways. For example, it allows them to quickly jump to the parts of the blog post they’re most interested in and skip sections they already know.
The Floating Navigation Menu, as the name suggests, floats on the screen, staying visible even when the reader scrolls down. This allows readers to easily navigate to different parts of the post at any time, since the menu stays accessible.
However, unlike the Sticky Navigation Bar, the Floating Navigation Menu can’t stay on screen on all devices, especially mobile.
This is because the menu is usually large and takes up too much space, which affects the reading experience on smaller screens.
The floating feature works only on desktops or tablets in landscape mode, where there’s enough space to show both the menu and the content at once.
Note: Most of the time, a Sticky Navigation Bar will be enough for our blog posts. However, for very long roundups, thorough listicles, or posts with dozens of numbered content, a Floating Navigation Menu is more preferable. In these cases, a navigation bar might take up too much space, spanning multiple lines on the screen, which we want to avoid with a Floating Navigation Menu.
Important: We’ll go over a solution for this when we explain how to create a Floating Navigation Menu.
Creating the Floating Navigation Menu
To create a Floating Navigation Menu, you’ll need the following blocks:
- Column block for the blog post layout
- Group block for the Sticky or Floating effect
- Buttons block for the main navigation
- Paragraph block for the menu title
Here are the steps I take:
Details:
Step 1 — Change the Post Layout
When designing a Floating Navigation Menu, the first thing to do is set up the layout of my blog posts. The key thing to focus on is making sure there’s a dedicated space for the menu to stay on the screen while readers scroll. This is important to prevent the content from overlapping.
So how to do it? Use a Columns block and create 2 columns within it. The sizes of the columns are 1/3 left and 2/3 right.
The right is wider because that’s where we’ll place the content. On the other hand, the left is narrow because that’s where we’ll place the Floating Navigation Menu, which does not need much space. We’ll call this Columns block the Parent Columns block.
Step 2 — Fill the Layout with Content
After setting up the layout, fill in the right column of the Parent Columns block with content and decide which sectionreaders might want to go to for quick information. To be more specific which section, I’m talking about any block in the content. But usually, I’d choose headings because that’s where discussions of subtopics usually start.
This step is important because it’s all necessary for creating the main Navigation Menu.
Step 3 — Assign HTML IDs & Anchors
After deciding which sections of the blog post readers might want to jump to, the next step is to assign them HTML IDs. These IDs act as markers that the Navigation Menu uses to tell the browser which part of the post to display when a reader clicks on a menu item.
To keep things simple, we’ll use headings as examples.
Suppose we have an article titled 15 Amazing Things to Do in Nepal for First-Timers and it has 15 H2 headings for different activities and attractions. To assign HTML IDs to these headings:
- Open the settings for each heading.
- Go to the Advanced tab, and
- Enter a unique value in the “HTML Anchor” text box. For instance, if the heading is “Hike Mount Everest,” you could set the value as “hike-mount-everest.”
Step 4 — Create the Navigation Menu
After assigning HTML IDs to the key parts of your post, the next step is to create the Navigation Menu, which is basically a set of anchor links. You can use List, Image, or Paragraph blocks for this, but I prefer using buttons since they make it feel like a real menu that readers can click to move through the post. So, add a Buttons block.
Using the same example from the previous step, the Buttons block should have 15 buttons, each labeled to match the section it links to. For instance, there should be a button labeled “Hike Mount Everest” that, when clicked, scrolls the page to the “Hike Mount Everest” heading.
Once you’ve labeled each button, turn them into links by adding fragment identifiers. A fragment identifier is simply an HTML ID with a “#” at the beginning. To do this, click the link icon in the button block’s toolbar and enter the fragment identifier, like “#hike-mount-everest.”
Step 5 — Test the Core Function
By step 4, the Navigation Menu should be working. Clicking a button should scroll the page to the correct heading.
To test this, click the save button, open a preview in a new tab, and check if everything works as expected. If it does, we can move on to designing the Navigation Menu.
Step 6 — Design the Menu
Once the Navigation Menu’s core functions are working, you can start designing it.
First, make sure the menu fits within the screen of the smallest supported resolution, which is 720p. This means its height should ideally be no more than 720 pixels. Keeping it within this limit helps prevent design issues like parts of the menu getting cut off on smaller devices that support Desktop view. To adjust the height, try changing the margin, padding, line height, and font size of the text in the menu.
If there are too many buttons, you can split the left column of the parent column block into two smaller columns. In the new column, add another Buttons block to hold more menu items, which will help reduce the height of the first button block.
For the design, I usually don’t change the color or font of the buttons since they’re already set by default in my WordPress Site Editor or Theme Editor.
Step 7 — Enable Floating Feature
The process is almost complete after Step 6, with just one final task left to turn the menu into a Floating Navigation Menu: enabling the sticky feature.
To do this, select all the blocks in the left column of the Parent Columns block and group them. To group the blocks, select them all at once. A toolbar will appear with an option to group them. Look for the icon that shows two overlapping squares. Click that, and the blocks will be grouped inside a Group block.
The Group block lets elements or other blocks stay fixed on the screen as readers scroll. By default, this feature is turned off. To enable it, go to the settings of the Group block and click on the Position tab. Then, open the drop-down menu and select ‘Sticky.’
Now, when you preview your post, you should see the Floating Navigation Menu, which stays at the top of the screen as you scroll and lets you jump to different sections of the post.
Floating Navigation Menu Mobile View Workaround
The floating feature of the Floating Navigation Menu doesn’t work on mobile by default because there’s gonna be not enough space for readers to view the content if the menu stays stuck on the screen.
But can it still stick on the screen on mobile? Technically, no. The Group block holding the Navigation Menu is inside the left column of the Parent Column block. On mobile, the columns in the Parent Column block automatically stack, which prevents the Floating Navigation Menu from staying on the screen.
Although the Floating Navigation Menu can’t stay on top of the content like a Sticky Navigation Bar on mobile, we can create a workaround to give readers quick access to the menu no matter where they are in the post.
We can do this by using a small floating anchor link in the right column of the Parent Column block, alongside the main content. This anchor link will let readers jump back to the Navigation Menu, so they can easily navigate to other sections of the post without excessive scrolling on mobile.
To make this work, the Navigation Menu or the Group block containing the menu buttons should have an HTML ID. We’ll then link that ID to the small anchor link.
Here’s a quick step-by-step guide for this:
- Give the Group block of the Navigation Menu an HTML ID, like “navigation-menu.”
- Before the second heading in the main content, add another Group block and enable its sticky feature.
- Inside the Group block, add a Paragraph block, type “back to top,” and link the HTML ID as a fragment identifier “#navigation-menu” to the “back to top” text. After this, it should work as a quick shortcut to view the Navigation Menu on mobile.
- Add a background color, adjust the padding, and tweak the styles of the Group block to make it stand out, easy to notice, and more visually appealing for readers.
- Finally, preview and test the small floating anchor link on different devices or screen sizes.
Note: If you’re planning to use this workaround, you’ll need to adjust the HTML IDs for each section. To make sure the headings show up properly when someone clicks an anchor link, add a spacer or separator before each heading and assign the HTML IDs to those instead. The floating “back to top” button might cover part of the headings, so making these changes helps fix that issue.
More Features & Layouts for Your Blog Posts
As you might have guessed from our discussion, a floating navigation menu isn’t right for every blog post.
So, be sure to check out the other designs I’ve created! There are more features, styles, and layouts you can try. You can find them in my post about designing an engaging blog post using WordPress Gutenberg.
Love this? Pin it and share it with your friends!
