SuryaCreates Premium Glass Header
·
A fully customizable glassmorphism header — sticky behavior, per-page menu overrides, animated mobile toggle, and off-canvas styling.
SuryaCreates Premium Glass Header replaces your theme’s default header with a modern, glass-effect header bar that you can fully design from one settings screen, with the option to override key parts on individual pages.
Logo
- Upload and align your logo (left, center, or right).
- Set an independent logo width for desktop, tablet, and mobile.
Glass styling
- Background color and opacity, blur strength, and a subtle top reflection sheen.
- Border color/opacity, shadow strength, and corner radius.
- Independent padding for desktop, tablet, and mobile.
- Optional outer gap for a “floating pill” header look.
Sticky behavior
- Choose Not Sticky, Sticky, or Reveal on Scroll Up.
- Optional shrink-on-scroll effect, with its own background opacity and blur settings.
Desktop dropdown menus
- Custom colors, corner radius, and shadow for submenu panels.
- Three open animations: fade, fade + slide up, or scale in.
Mobile menu & toggle button
- Default animated hamburger, or a fully custom image/GIF/SVG icon for the open and closed states.
- Four toggle animation styles and three button shapes.
- Off-canvas panel with configurable position, width, background, text color, overlay, and open animation.
Active page highlighting
- Automatically highlight the current page’s menu item, with a choice of four highlight styles.
Per-page overrides
Every page and post gets a “Glass Header — This Page” box in the editor sidebar, letting you override the desktop menu, mobile menu, toggle button shape, off-canvas background color, sticky behavior, or hide the header entirely — without affecting any other page.
Two ways to display the header
Add this to your theme right after the opening <body> tag:
<?php if ( function_exists( 'scpgh_render_header' ) ) scpgh_render_header(); ?>
Or use the shortcode anywhere shortcodes are supported:
[suryacreates_glass_header]