This tutorial provides the steps to create a utility bar which can be used to add navigation menus, social icons, notifications and more which hides when the page is scrolled.
The tutorial includes a bonus guide for shrinking the site header and hide the utility bar when scrolled in Genesis Sample.
It is recommended to take a look at the default Utility bar in Genesis Sample tutorial.
Let's start with the Basic first.
1. Go to Appearance > Customize > Site Identity > Add the logo and make the logo width as of your choice.
2. Go to Appearance > Menus and Create a Menu for Header Menu display location.
Make sure the logo height is more than 75 px otherwise the menu will conflict with the logo and you will need to add a clear: both for .nav-primary under media-max width 959px.