asrgdcsdxvghsbxdcfb xg cb

.site-title a {
    font-size: 18px !important;
    line-height: 1.2 !important;
}

Try the first set of CSS first. If it doesn’t work, let me know and I can help you inspect the specific CSS classes your theme is using.

The key is targeting the right CSS class – different WordPress themes use different class names for their headers.Retry

S

but the header must be sticky and blurred transparent also make the height more lessEdit

Perfect! Here’s the CSS to make your header sticky, blurred transparent, and much shorter:

Add this CSS in WordPress Customizer:

Go to Appearance → Customize → Additional CSS and add:

css

/* Make header sticky, transparent, and blurred */
.site-header,
header,
#masthead {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    width: 100% !important;
    
    /* Transparent background with blur */
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    
    /* Very small height */
    padding: 5px 0 !important;
    height: 45px !important;
    max-height: 45px !important;
    min-height: 45px !important;
    
    /* Smooth transition */
    transition: all 0.3s ease !important;
}

/* Adjust site title/logo for smaller height */
.site-branding,
.site-title {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 45px !important;
    height: 45px !important;
}

.site-title a {
    font-size: 16px !important;
    line-height: 45px !important;
    color: white !important;
}

/* Navigation menu adjustments */
.main-navigation,
.primary-menu {
    height: 45px !important;
    line-height: 45px !important;
}

.main-navigation ul li a {
    padding: 12px 15px !important;
    line-height: 21px !important;
}

/* Add top margin to body content so it doesn't hide behind fixed header */
body {
    padding-top: 45px !important;
}

/* Optional: Make header even more transparent on scroll */
.site-header:hover {
    background: rgba(0, 0, 0, 0.9) !important;
}

For an even more compact version (35px height):

css

/* Ultra-compact sticky blurred header */
.site-header,
header,
#masthead {
    position: fixed !important;
    top: 0 !important;
    z-index: 9999 !important;
    width: 100% !important;
    
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    
    height: 35px !important;
    padding: 2px 0 !important;
    transition: all 0.3s ease !important;
}

.site-title a {
    font-size: 14px !important;
    line-height: 35px !important;
}

body {
    padding-top: 35px !important;
}

This will give you:

• ✅ Sticky header that stays at top when scrolling
• ✅ Blurred transparent background
• ✅ Much smaller height (45px or 35px)
• ✅ Smooth transitions

Try the first version first, and let me know if you want it even smaller or need any adjustments!Retry

S

no the code is broken and mashed the headerEdit

Sorry about that! Let me give you a safer, step-by-step approach to avoid breaking your header:

Step 1: First, let’s just make it sticky and transparent

Add this CSS first:

css

/* Make header sticky */
.site-header {
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 999 !important;
}

/* Add space to body so content isn't hidden */
body {
    margin-top: 80px !important;
}

Test this first – does the header stay at the top when you scroll?

Step 2: If that works, add transparency

css

/* Add transparency and blur */
.site-header {
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(8px) !important;
}

Step 3: Only then reduce height gradually

css

/* Reduce height slowly */
.site-header {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

Add one piece at a time and test after each step. If something breaks, remove the last CSS you added.

Which step broke your header? Let me know and I’ll provide a more targeted fix for your specific theme.

Also, what WordPress theme are you using? That will help me give you the exact CSS selectors.Retry

S

but it must be in center and maximum width of 1100pxEdit

Got it! Here’s the CSS to make your header sticky, transparent, blurred, with reduced height AND centered with max-width 1100px:

Add this CSS step by step: