Unlock your potential with a Pro Membership
Here is where you propel your career forward. Come join us today. Learn more.
Custom Utility Bar – Styling – Part 1
Lab: Customizing the Genesis Site Header
Video Runtime: 11:57
Before we get to styling, let’s add a menu and then some social links into the new Utility Bar widget area. Then you’ll start styling the Utility Bar and its components. Some of the CSS properties that you are using are:
You will also add in (enqueue it) the Font Awesome library.
Who needs copy/paste? Right. Writing code from scratch is fun!
Episodes
Total Lab Runtime: 02:09:18
- 1 Lab Introductionfree 05:33
- 2 Custom Header Layout 1 - Structurepro 09:02
- 3 Custom Header Layout 1 - Stylingpro 11:54
- 4 Custom Header Layout 1 - Mobile Stylingpro 07:00
- 5 Custom Header Layout 2 - HTML Structurepro 13:58
- 6 Custom Header Layout 2 - Stylingpro 14:02
- 7 Custom Header Layout 3 - HTML Structurepro 16:11
- 8 Custom Header Layout 3 - CSS Stylingpro 12:48
- 9 Let's Build a Custom Utility Bar - Structurepro 15:39
- 10 Custom Utility Bar - Styling - Part 1pro 11:57
- 11 Custom Utility Bar - Styling - Part 2pro 09:32
- 12 Wrap it Upfree 01:42
