Genesis Showcase Pro

I was working on a website for a charity, using the Showcase Pro theme (a Genesis child theme).

Here are some of the customisations that I made to the CSS. They may appear to be small changes, but they were very much needed.

1. Menu sub items to show that they’re highlighted.

I toyed with the idea of a background colour, but decided to just change the text decoration, in line with links throughout.

.genesis-nav-menu .sub-menu li:hover {
	text-decoration: underline;
}

2. ‘Highlight’ button to change upon page scroll.

The menu buttons can have different classes assigned. The ‘highlight’ class places a menu item in a box, which fills white when hovered over (and the text colour changes to match). I found it strange that similar style changes didn’t occur when scrolling (invoking the fixed menu). I used this code to fix that, where #e94b24 is the my main theme colour.

.header-scroll .genesis-nav-menu .menu-item.highlight a:hover {
	background: #e94b24;
	color: #fff;
}

3. Indication of sub menus

The default menu doesn’t give a clue that there may be additional items to display. The following post is out of date, but with a tweak works as expected. Drop-down indicator

The change needed was in the name of the font. I also changed the font size which is specific to the Showcase Pro menu, to ensure that the alignment was correct.

.genesis-nav-menu .menu-item-has-children > a:after {
	content: '\f431';
	font-family: 'Genericons-Neue';
	font-size: 14px;
	font-size: 1.4rem;
	padding-left: 10px;
	padding-left: 1rem;
	vertical-align: bottom;
}

4. Front Page 1 Widget Area

Another thing that I found strange was that the widget area referenced a class (.front-page-1) that didn’t exist in the CSS file. I wanted to be able to add multiple widgets, side-by-side instead of the main widget as intended, so added a section to the CSS file based upon this class.

/* Front Page 1
 * ========================================================================== */

.front-page-1 .widget {
	background: rgba(255,255,255,0.6);
	margin: 20px;
    }
    
.front-page-1 h3 {
	color: #000;
}

.front-page-1 a {
	color: #e94b24 !important;
	font-weight: bold;
	opacity: 1 !important;
}

.front-page-1 a:hover {
	color: #000;
	font-weight: bold;
	opacity: 1 !important;
}

.front-page-1 .feedzy-rss li {
	padding: 0px 0 16px !important;
}

.front-page-1 .feedzy-rss .rss_item {
	border-bottom: 0px solid #eee !important;
	margin: 0px !important;
}

.front-page-1 h3.widgettitle.widget-title {
    padding-top: 20px;
}

.view-cap, .view-container-border {
	padding: 0 !important;
    background-color: #fff !important;
}

The .feedzy-rss CSS styles an RSS feed to look like the latest posts widget that is next to it. To add three widgets into this widget area, side-by-side, I made use of a plugin called Genesis Widget Column Classes.

reason for edit: tidying up some phrasing and to highlight that this post is being kept here in case others find any of it useful