Log in SwiftGrid →
Ultra

Custom CSS Snippets

2 min read Updated Sep 2026 Ultra

These CSS snippets change small things that the Ultra settings do not cover. Add them in one of 3 places:

Change the Logo Height

Ultra limits a logo image to 92px high, or 72px when the tagline is on. Change the limit with both selectors:

.site-header .site-branding img,
.tagline .site-header .site-branding img {
	max-height: 60px;
}

The header is 112px high by default, so a taller logo needs a taller header. Ultra Premium sets it with Height (px) in AppearanceCustomizeTheme DesignHeader.

Center the Top Bar Menu

Use this when you clear the Phone Number and Email Address in Site Text and assign no Top Bar Social Menu. The Top Bar Menu setting in Theme Settings > Navigation stays on. The Top Bar Menu then takes the full width of the top bar and its items center.

#top-bar .top-bar-text {
	display: none;
}

.top-bar-navigation {
	text-align: center;
	width: 100%;
}

Change the Header Color Over a Slider

When the header overlaps a slider, it has a white background at 90% opacity. This rule sets the color and the opacity. 255, 255, 255 is white. The last number is the opacity: 0 is clear and 1 is solid.

.overlap .site-header:not(.is-stuck) {
	background: rgba(255, 255, 255, 0.6);
}

The header only overlaps a slider when Header Overlaps Slider or Overlap Header is on. See Home Page Slider.

If you set Background Color in Ultra Premium (Theme Design > Header), add this rule to Additional CSS. A rule in the child theme style.css loses to the Customizer styles.

Ultra’s page background is dark gray, close to the footer color. On a page with little content, the space below the footer widgets makes the footer look tall. Set a minimum height on the content area to move the footer down:

.site-main {
	min-height: 500px;
}

Change 500px to suit your site.

Was this helpful?