Below you’ll find CSS snippets to achieve small tasks that might not be included in Theme Settings. These snippets can be added to AppearanceCustom CSS if using SiteOrigin CSS, CustomizeAdditional CSS or your child theme style.css file.
Adjust the Logo Max-Height
.site-header .site-branding img {
max-height: 92px;
}
Top Bar Menu: Stretch to Container Full-Width and Center
The below rule assumes you’ve removed the Email and Phone Number site text and haven’t assigned a Top Bar Social Menu. This will leave you with only the Top Bar Menu. If you’d like to center the Top Bar Menu and make the container full-width, the below rule can be used.
.top-bar-navigation {
text-align: center;
width: 100%;
}
Overlapped Header: Change the Background Opacity
If you’re using the Page Slider option, it’s possible to overlap the header and slider. The below rule can be used to adjust the header background opacity. 255, 255, 255 is the color, white. 0.9 is the opacity. Adjust as required.
.overlap .site-header:not(.is-stuck) {
background: rgba(255, 255, 255, 0.9);
}
Resolve the Appearance of a Large Footer
Ultra’s body background and footer background colors are the same. On pages without much content, this can lead to the appearance of a large footer. If this is something you’d like to change, you can either change the body background color to white or set a minimum height for the content container thereby pushing the footer down the page.
Change the Body Background Color to White
body {
background: #fff;
}
Set a Content Container Minimum Height
.site-main {
min-height: 500px;
}
The value above can be adjusted as required.