CSS Snippets

Below you’ll find CSS snippets to achieve small tasks that might not be included in Theme Settings. These snippets can be added to CustomizeAdditional CSS or your child theme style.css file.

Remove the Site Header Border

.site-header {
    border-bottom: none;
}

Remove the Site Footer Border

.site-footer.footer-active-sidebar {
	border-top: none;
}

Remove the Bottom Bar Border

.site-footer .bottom-bar {
	border-top: none;
}

Full-Width Header Content

.site-header .polestar-container {
    max-width: none;
}

Sidebar Link Color

.widget-area .widget:not(.widget_tag_cloud):not(.widget_shopping_cart) a:not(.button) {
	color: #626262;
}

.widget-area .widget:not(.widget_tag_cloud):not(.widget_shopping_cart) a:not(.button):hover {
	color: #4d8ffb;
}

Sidebar Font Size

.widget-area:not(.site-footer) .widget .widget-title~* {
    font-size: 14px;
}

Footer Widgets with Polylang

If you’re using Polylang with two languages and have added one widget to the footer widget area, the theme will split the widget area up into two 50% columns. This is because the widget count is two, even though only one widget displays per language. To resolve this problem you can use the below snippet:

#colophon.site-footer .widgets .widget {
    width: 100%;
}

Change the Main Menu Drop-Down Direction to the Right

.main-navigation ul .children
.main-navigation ul .sub-menu {
	right: 0;
}

Change the Breadcrumb Font Size and Margins

.breadcrumbs {
	font-size: 13px;
	margin: 0 0 15px 0;
}

Hide the First Breadcrumb Trail on SiteOrigin Page Builder Pages

.siteorigin-panels .site-content > div > .breadcrumbs {
	display: none !important;
}