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]