Customizing Generator Plus Theme Header

The Generator Plus theme is a lightweight, flexible WordPress theme that relies heavily on clean, modular CSS. When you want to customize the header, especially to make it stand out from the default style, using custom CSS is one of the best options.

The CSS code I’ll provide here will target the header area, typically including elements like the logo, navigation menu, and background. Customizing these can completely transform the top section of your website, creating a more unique and branded appearance.

First, we set a new background color for the header and optionally add a background image to make it more dynamic. We also modify the height and padding to adjust the spacing, giving the header a bold presence.

Next, we customize the site title or logo by changing its font, size, and color. This ensures that the main branding element is immediately visible and readable. The CSS ensures the text is responsive by using relative units like em and vw where appropriate.

Navigation menus inside the header are also tweaked: their alignment, font style, hover effects, and padding are carefully tuned to create a smooth and professional look. Additionally, a subtle box-shadow is added to the header so that when users scroll down, it appears “lifted” from the page, creating a modern, elegant effect.

The provided CSS is mobile-friendly, using simple flexbox techniques and media queries. On smaller screens, the layout gracefully shifts to a columnar or stacked layout without breaking.

Finally, animations such as a gentle fade-in or slide-down for the header when the page loads can be added to increase visual engagement without making the site heavy.

This entire customization improves user experience (UX) and enhances your site’s branding — making the first impression strong.

Now, let’s see the actual CSS code and a matching HTML structure to understand how to apply it.

Here’s the CSS Code:

/* Custom Header Styling for Generator Plus Theme */

.site-header {
background: linear-gradient(135deg, #4a90e2, #9013fe);
color: #ffffff;
padding: 20px 40px;
height: auto;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 999;
}

.site-title a {
font-family: ‘Poppins’, sans-serif;
font-size: 2em;
font-weight: bold;
color: #ffffff;
text-decoration: none;
}

.site-title a:hover {
color: #ffdd57;
}

.main-navigation {
display: flex;
gap: 20px;
}

.main-navigation a {
color: #ffffff;
font-size: 1em;
text-decoration: none;
transition: color 0.3s ease;
}

.main-navigation a:hover {
color: #ffdd57;
}

@media (max-width: 768px) {
.site-header {
flex-direction: column;
padding: 15px 20px;
}

.main-navigation {
flex-direction: column;
align-items: center;
}
}

Here’s the HTML Structure Example: