Pieter Bruegel the Elder, The Tower of Babel (1563)
Pieter Bruegel the Elder, The Tower of Babel, 1563

CSS: header background and height

Give the header a solid color, a blur or more space with a few lines of CSS.

CSS: header background and height">
Design, themes & CSS3 steps
Short answer

Give the header a solid color, a blur or more space with a few lines of CSS.

Step by step

  1. 1

    Design & theme → Custom CSS.

  2. 2

    Paste one of the examples and adjust the values.

  3. 3

    Save and refresh.

Copy this code

CSS
/* Solid header */
.s-header, .t-header { background: #111 !important; }
.s-header a, .t-header a { color: #fff !important; }
/* Glass header */
.t-header { background: rgba(255,255,255,.7) !important; backdrop-filter: blur(12px); }
/* Taller header */
.t-header .t-wrap { min-height: 90px; }

Paste it in Dashboard → Design & theme → Custom CSS, then press “Save design”.

Did this guide help?

Related guides

Add custom CSSAdd custom CSSDashboard → Design & theme → Custom CSS. Anything you write there is added to every page of you…Menu and footer linksMenu and footer linksPages with “Show in menu” appear in the header. Social links and contact info come from Setting…