Optimizing Your Starter Site - CSS Samples

styles.css

/********* Kadence Menu *********/

/* Hides the underline on current menu items in underline style */

.header-navigation-style-underline .current-menu-item a:after,
.header-navigation-style-underline .menu-item-has-children a:after {
	display: none;
}

.header-navigation-style-underline .current-menu-item a:hover:after {
	display: block;
}

.header-navigation-style-underline .menu-item-has-children a:hover:after {
	display: none;
}

/* Mouseover color for current menu item */
/* This should be changed for each site */

.sub-menu .current-menu-item a:hover {
	background:red !important;
}

/* Footer Silo Menus */
/* makes parent menu items bold and nested items regular without indent */ 

footer .menu li {
    font-weight: bold;
}

footer .menu li li {
    font-weight: normal;
    font-size:.85rem;
}

footer .menu li li a {
    padding:6px 14px !important;
}

/********* Typography *********/

/* Special Text */

.highlight {
	background: #ffd204;
	padding: 0px 6px 0px 6px;
	margin: 0px -5px 0px -5px;
	border-radius: 2px;
}

.underline {
	border-bottom: 2px #C8CEEC solid;
	padding: 0px 2px 0px 2px;
	margin: 0px -5px 0px -5px;
}

.pop {
	color: #ffd204;
}

.shadow1 {
	text-shadow: 1px 1px 3px rgba(0,0,0,0.75), 
	1px 1px 5px rgba(0,0,0,0.5);
}

.centered {
	text-align: center;
}

/* Lists */

#inner-wrap ol,
#inner-wrap ul {
	margin: 1.5em;
}

#inner-wrap li {
	margin-bottom: .75em;
}

#inner-wrap ul ul {
	list-style-type: circle;
	margin-top:0;
	margin-bottom:0;
}

#inner-wrap ul ul ul {
	list-style-type: '– ';
	margin-top:0;
	margin-bottom:0;
}

#inner-wrap .fl-rich-text li {
	line-height: 1.25;
}

#inner-wrap .fl-rich-text ul ul li:first-child,
#inner-wrap .fl-rich-text ul ul ul li:first-child {
	margin-top:0.75em;
}

/********* Miscellany *********/

/* Highlight Placeholder Images */
/* puts a red border around images with PLACEHOLDER in the file name */

img[src*="PLACEHOLDER"] {
	border:10px #FF0000 solid !important;
}

/* Kadence Full Screen Search Styling */

#search-drawer .search-field {
	box-shadow: none !important;
}