How to Build a Floating Pill-Shaped Navigation with CSS in GeneratePress

Floating pill-shaped navigation has become a popular design trend, and for good reason—it’s sleek, modern, and adds a touch of interactivity to your site. Unfortunately, GeneratePress doesn’t give us a ton of built-in options for styling headers or menus, so we’ll need to do most of the work manually. The good news? It’s easier than you think, and I’ll walk you through the process step by step.

https://youtu.be/yArmlaIIC3g

This tutorial is CSS-heavy, but don’t worry—I’ll include all the code you need so you can copy and paste it into your own site. Let’s dive in!

Setting Up the Header and Menu

Before we start writing CSS, we need to make sure the header and menu are set up correctly in GeneratePress. Here’s what to do:

1. Go to the Customizer:
   • Navigate to Layout > Primary Navigation.
   • Set the Navigation Location to “Float Right.”
2. Adjust the Header Settings:
   • Go to Layout > Header.
   • Set the Header Width and Inner Header Width to “Contained.”
   • Set the Header Padding to 0 for desktop. We’ll revisit mobile settings later.

With these settings in place, we’re ready to jump into the CSS.

Making the Header Sticky

The first thing we’ll do is make the header sticky so it stays at the top of the page as you scroll. While GeneratePress has built-in sticky header options, they don’t work well for this design, so we’ll handle it manually.

Here’s the CSS:

.site-header {
  position: sticky;
  top: 0;
  padding-block: 20px; /* Top and bottom padding */
  z-index: 9999; /* Ensures the header stays on top */
}

This makes the header stick to the top of the page. If you scroll, you’ll notice the header overlaps the content, making it hard to read. Let’s fix that next.

Adding a Background and Styling the Header

To make the header readable, we’ll add a background color with a hint of transparency. We’ll also add padding and a border radius to give it that pill-shaped look.

.inside-header {
  background-color: #00000099; /* Black with transparency */
  padding: 20px; /* Space around the content */
  border-radius: 100vw; /* Ensures a pill shape */
  backdrop-filter: blur(10px); /* Blurs content behind the header */
}

What’s Happening Here:

• Background Color: The #00000099 adds transparency to the black background. You can replace this with your brand color.
• Border Radius: A high value like 100vw ensures the header always has a pill shape.
• Backdrop Filter: The blur effect creates a glassmorphism look, improving contrast and readability.

Now, as you scroll, the header will look great over any content.

Fixing the Admin Bar Overlap

If you’re logged into WordPress, you’ll notice the sticky header overlaps the admin bar. Visitors won’t see this, but it’s worth fixing for your own sanity.

body.admin-bar .site-header {
  top: 32px; /* Offsets the header by the height of the admin bar */
}

This ensures the header doesn’t stick directly to the top when the admin bar is present.

Adding Scroll-Based Animations

To make the header more dynamic, we’ll add a scroll-based animation that shrinks the header as you scroll down. This effect is achieved using the animation-timeline property, which ties animations to the scroll position.

Step 1: Define the Animation Timeline

.inside-header {
  animation-timeline: scroll;
  animation-range: 150px 650px; /* Start and end points of the animation */
  animation-fill-mode: forwards; /* Keeps the animation in its final state */
  animation-name: header-scroll;
}

• animation-timeline: scroll;: Links the animation to the scroll position.
• animation-range: 150px 650px;: The animation starts after scrolling 150px and finishes at 650px.
• animation-fill-mode: forwards;: Ensures the animation doesn’t reset after it finishes.

Step 2: Write the Keyframe Animation

Now, let’s define what happens during the animation:

@keyframes header-scroll {
  to {
    max-width: 768px; /* Shrinks the header width */
    padding: 16px; /* Reduces padding */
    transform: scale(0.9); /* Slightly scales down the header */
    box-shadow: 0 0 80px -30px var(--brand-primary); /* Adds a subtle shadow */
  }
}

What’s Happening Here:

• max-width: Shrinks the header to take up less space.
• padding: Reduces the padding for a more compact look.
• transform: scale(0.9);: Scales the header down to 90% of its original size.
• box-shadow: Adds a subtle shadow using the brand’s primary color.

Now, as you scroll, the header will shrink and take up less real estate.

Ensuring Browser Compatibility

The animation-timeline property isn’t supported in all browsers (it works best in Chrome-based browsers). To ensure a fallback for unsupported browsers, we’ll use the @supports rule.

@supports (animation-timeline: scroll()) {
  
    /* All the scroll-based animation CSS goes here */
  
}

For unsupported browsers, the header will remain in its original state without the animation. This ensures a consistent experience across all browsers.

Testing on Different Devices

It’s important to test the design on different screen sizes. Here’s what I found:

• Tablet: The effect works beautifully without any changes.
• Mobile: The header still looks great, but if you prefer to disable the animation on smaller screens, you can wrap the CSS in a media query:

@media (min-width: 768px) {
  /* Scroll-based animation CSS */
}

This limits the animation to devices with a screen width of 768px or larger.

Final Thoughts

This floating pill-shaped navigation is a great way to add a modern, dynamic touch to your site. It’s lightweight, uses only CSS, and works well across most browsers. While the scroll-based animation is a nice enhancement, it’s important to use it sparingly and ensure it doesn’t interfere with usability.

If you’re using a Chrome-based browser, you’ll get the full effect, but even in unsupported browsers like Safari, the header still looks great without the animation.

This design won’t be perfect for every site, but in the right context, it can really elevate your navigation. Give it a try, and let me know how it works for you!