This code adds a countdown timer to the site header or nav menu in the latest version of the Genesis Sample child theme.
Order of Header Elements
The solution in this tutorial includes CSS which enables you to re-order the stacking of site header elements at specific screen widths including the title-area, countdown timer and genesis-responsive-menu divs.
Video Demo
Shows the countdown timer displaying in the Genesis header and centered after the site title before the responsive toggle menu icon on smaller screens.
Tested using the Genesis Sample child theme by StudioPress. CSS may need tweaking for use in other Genesis child themes.
Register or login to access the code :
James Hahn II says
This is great, Brad. Perfect for the project I need to wrap up this morning. How would I get this to execute in the Header Right menu widget in Centric Pro?
James Hahn II says
Never mind! Just pieced together the code from here: https://wpsites.net/web-design/add-button-to-genesis-header-right-hook/
Came up with:
Changed the color and added a little margin to the Site Header
.site-header .widget area {
color: #000;
text-align: right;
margin: 10px 10px 0px 0px;
}
And, POW!
Can’t believe I figured that out all by myself! You’ve taught me so much over this past year!! haha
Brad Dalton says
The easiest way is to add the HTML to a text widget in the header right widget area and use CSS to display the counter inline with your menu.
Or, you could hook it in by changing the hook from genesis_header to genesis_header_right