SR Nav Overlay 01
SR Nav Overlay 01 is a perfect navigation module for mobile-first focused pages!
Module Overview - SR Nav Overlay 01
This module features a combination of Logos, an Overlay, Menus, Icons, and Blog posts.
An ideal use case for SR Nav Overlay 01 is for navigation on pages with mobile-first design in mind!
SR Nav Overlay 01 is a global module. Learn more about Global modules here.
When Overlay button is toggled:
Module Settings Walkthrough
You can edit the following items within the design settings section:
- Layout: Container or Full-width
- Navbar Background Color
- Background option: image, color, custom, gradient
- Open Button Color
- Close Button Color
For SR Nav Overlay 01, most settings are focused on the Logo, Menu(s), Icons, and Blog posts.
- You have two variants of the logo:
- Logo for desktop and laptop devices
- Logo on mobile and tablet devices
- You can have the option to display and change the Logo at the left portion of this module.
- You can apply the following settings to the logo image:
- Size: Automatically adjust, Exact width and height.
- Image Loading: Browser default, Lazy, Eager
- You can also set the link attributes on the logo with the following settings:
- Link to:
- External: URL to link of website
- Content: Select a page
- File: Browse files
- Email address: Link to email address
- Blog: Select a blog
- Open link in new window:
- On/ Off
- Link type:
- Follow/ No follow
This is the container that pops up after clicking the hambuger button on the right side of the module.
Editing the Overlay
- Overlay Style:
- Full Screen
- You can add a Menu Primary
- You also have the option to add a Menu Secondary
- You can add as many social icons as you want
- Each Social Icon comes with the following options:
- Background Color
- Icon Color
- Blog post type:
- Recent Posts
- Popular Posts
- Number of posts
How to Use SR Nav Overlay 01 - Live Examples
- Sprocket Rocket Module Page- You can see the module used live!
Updated 30 Dec 2022
Did this page help you?