When I started working on different layouts and designs for my blog posts, the first thing that came to mind was a navigation feature. As someone who creates long-form content, I knew it would make reading easier for my audience. It helps in several ways:
- Showing readers what information is in the post.
- Letting them jump to the sections they’re most interested in.
- Making it easy to pick up where they left off if they’re returning to finish the post.
Most of the time, the navigation feature only appears in one part of a blog post, typically at the beginning. But if you’re using WordPress, you can make it stay on the screen even while scrolling. The Gutenberg editor’s Design blocks include a sticky feature that allows this. When set up properly, readers can access the navigation bar at any time and navigate the post more easily.
To give you an idea of what I’m teaching, think of the sticky navigation bar below as an example.
In this post, we’ll talk about:
- PART 1 — Why You Should Consider a Sticky or Floating Navigation Bar
- PART 2 — Creating a Sticky or Floating Navigation Bar with Gutenberg Blocks (5 Steps)
- PART 3 — What to Keep in Mind When Designing Floating Navigation for Blog Posts
Why Include a Sticky or Floating Navigation Feature
A sticky or floating navigation feature can be useful in many situations. In my opinion, it’s especially helpful for blog posts with multiple sections.
A sticky or floating navigation makes things easier for readers by keeping the menu accessible without requiring them to scroll back to the top. This is useful for people reading on their phones.
Plus, if designed well, it can give the blog a modern look and show readers that we care about their experience.
If the blog post is really long, like a listicle with 15 or more items, it’s a good idea to use a different navigation feature, like the Floating Menu Navigation I created.
Creating a Sticky or Floating Navigation using Gutenberg Blocks
There are several ways to add a sticky or floating navigation feature to our blog posts. The easiest method is to install a plugin, but it’s not always necessary. As I mentioned earlier, you can do this using the Gutenberg Blocks, which comes pre-installed in WordPress. Creating a sticky or floating navigation with Gutenberg blocks isn’t difficult, but it does take a few steps.
Understanding how HTML IDs and Fragment Identifiers work will help you get the navigation feature set up correctly.
Step 1 — Set Up Sticky Container
First, add a Design block with a sticky feature to the editor. I recommend using either the Group or Row blocks. From my experience:
- The Group block works best if your post has multiple sections to guide readers through.
- The Row block is better for posts with just a few sections, like 3 or 4, that you want to highlight.
After that, enable the sticky feature for the Group or Row block. Open its settings sidebar, go to the Position tab, and you’ll find a drop-down menu. Open the menu and select the “Sticky” option.
Note: To get the most visibility, place the sticky container at the beginning of your blog post or right after the introduction. This way, readers can quickly navigate to different sections as soon as they land on your post.
Step 2 — Assign HTML IDs
Next, let’s create the main navigation. This is pretty simple since we’ll just use HTML IDs and fragment identifiers, which can be added to a Paragraph block to create anchor links. These links will do the job of navigating readers to different parts of the blog post.
Before creating anchor links, we need to assign HTML IDs to the sections of our blog posts that we want readers to jump to when they click the links.
For example, if you want to direct readers to three H2 headings like ‘Heading 1,’ ‘Heading 2,’ and ‘Heading 3,’ you’ll assign each one an HTML ID. To do this, go to the ‘Advanced’ tab in the settings for these H2 headings and type in any ID you want for each. You could use ‘heading-1,’ ‘heading-2,’ and ‘heading-3,’ for example.
Please check out some of my notes at the end of this post.
Step 3 — Create Anchor Links
Next, after assigning HTML IDs to the headings, we can use these IDs to create anchor links.
In the Group or Row block, add a Paragraph block and write a very short description of the section the anchor link will take readers to when they click on it. You could use something like “Chapters: one, two, three” and link the numbers to the corresponding HTML IDs. Keep in mind that when adding the HTML IDs, you need to turn them into fragment identifiers by placing a ‘#’ before the ID.
For example, link “#heading-1” to “one” in the “Chapters: one, two, three” to turn “one” into an anchor link. Once you do this, the navigation feature on your blog post should be working.
Step 4 — Style the Navigation Feature
Fourth, let’s design the look of the navigation feature for our blog post.
In this example (and for every blog post I create), my goal is to make a navigation bar. I recommend you do the same because a navigation bar is a small strip at the top of the screen. This way, readers still have plenty of space to read the content, especially on mobile devices.
To create a navigation bar:
- Click the Group or Row block and change its alignment to full width or wide width, depending on your theme’s content width.
- Then, add a background color to the navigation bar so that the links are easy to see as users scroll down. You can do this by going to the Styles tab in the Group or Row block settings.
- Once you’re in the Styles tab, you can also adjust the padding to give the navigation bar a cleaner look.
- If the navigation bar has two lines of text, you might want to tweak the font size to save space. Just make sure the links are still easy to read and click on.
Step 5 — Further Enhancements
The navigation bar should be working after step 4. But if you want to add more features or improve its design and usability, you can follow the next steps.
Option 1: Use Details block
If the navigation bar can’t fit on one line, you can use the Details block. It’s a clickable element that can hide extra blocks, like a long list of anchor links.
However, here’s the downside: I don’t like that the Details block doesn’t close automatically after a link is clicked and the reader jumps to a part of the post. This means extra work for the reader, which might not be the best experience.
If you know some JavaScript and HTML, you can write a script and embed it in your post to make the Details tab close automatically when a link inside it is clicked. Tip: ChatGPT and other language models can help you with the code!
Option 2: Use a legend (Preferable)
Another way I keep the navigation bar on one line is by adding a legend before or after it. I include something like this: “Topics: A — First topic, B — Second topic, C — Third topic.” This helps readers understand where each anchor link leads without using multiple lines of text on the navigation bar.
In the Paragraph block inside the sticky Group or Row block, I put something like “Navigation: A – B – C | topics,” with each letter as an anchor link.
- Clicking “A” takes the reader to the “First topic” heading.
- “B” leads to “Second topic.”
- “C” jumps to “Third topic.”
- The word “topics” is also an anchor link that brings readers back to the legend, so they can quickly recall the topics and where the links go.
To make this work, the block with the legend should have an HTML ID of “topics,” and the “topics” link in the navigation should have “#topics” embedded in it.
Reminders When Designing Floating Navigation for Blog Posts
Before setting up a sticky navigation bar for your blog post, keep these points in mind:
- Make sure the Design block with the sticky feature is placed outside any other containers, like Columns or Group blocks. If a Group or Row block has the sticky feature enabled, it will only stay at the top within its parent Design block.
- Headings aren’t the only blocks you can assign an HTML ID to for your navigation bar. I usually add the HTML ID to a Separator block placed above the headings. This way, when readers click an anchor link, they’ll land on a section where the heading is fully visible, not hidden under the sticky navigation bar.
- If you’re using a sticky navigation bar, be aware that design conflicts can happen if you have other sticky elements on the page. These elements will overlap unless you adjust margins and padding properly. Always test your blog post’s layout on different screen sizes to make sure everything looks right.
Explore More Features & Layouts
That’s a wrap on my guide to creating a sticky navigation bar! If you’re looking to take your blog’s design to the next level, be sure to check out my guide on designing your posts more engaging. I’ve got even more tips and cool features like this one, so don’t miss out—explore the rest now!
Love this? Pin it and share it with your friends!
