Sticky Admin Bar

The Sticky Admin Bar function makes the WordPress admin bar fixed to the top of the screen when scrolling on the frontend. This keeps quick admin links always accessible as you browse your site.

Overview

By default, Voxel theme sets the admin bar to a static position, which means it scrolls away when you scroll down the page. This function overrides that behavior to keep the admin bar fixed at the top of the viewport.

Key Features

• Fixed/sticky admin bar on frontend
• Proper content spacing to prevent overlap
• Mobile responsive (adjusts for mobile admin bar height)
• High z-index ensures visibility over other elements
• No configuration required – just enable and go

Setup Instructions

Enable the Function

1. Navigate to Voxel Toolkit → Functions in your WordPress admin
2. Find Sticky Admin Bar in the list
3. Toggle the switch to enable the function
4. Click Save Changes

That’s it! The admin bar will now remain fixed at the top of the screen when scrolling on the frontend.

How It Works

The function adds CSS styles that:

• Set the admin bar position to fixed
• Add appropriate margin to the HTML element to prevent content overlap
• Apply responsive adjustments for mobile devices

Desktop vs Mobile

Device	Admin Bar Height	Top Margin Applied
Desktop	32px	32px
Mobile (≤782px)	46px	46px

Use Cases

Content Creators

Keep quick access to “Edit Post”, “New Post”, and other admin links visible while reviewing your content.

Site Administrators

Always have access to the admin dashboard, site customization, and user profile without scrolling back to the top.

Developers

Quick access to debugging tools and admin features while testing frontend functionality.

Troubleshooting

Admin Bar Overlapping Content

• Clear any caching plugins
• Check if another plugin is modifying admin bar styles
• Verify no custom CSS is interfering with the top margin

Admin Bar Not Sticky

• Ensure the function is enabled in Voxel Toolkit → Functions
• Check that the admin bar is visible (logged in and admin bar enabled in profile)
• Clear browser and site caches

Conflicts with Fixed Headers

If your theme has a fixed header, you may need to adjust its top positioning to account for the admin bar. Add CSS like:

.admin-bar .your-fixed-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .your-fixed-header {
        top: 46px;
    }
}