In this tutorial we shall set up the header in Dynamik to show site title at left and primary navigation menu, social icons and search icon at the right and make it fixed so the header continues to appear when the users scroll down. Clicking on the search icon fades in the search box and clicking anywhere on the page hides it.
Screenshots:
when scrolled:
when the search icon is clicked:
Screencast:
Step 1
At Genesis > Dynamik Custom, create a custom widget area like so:
Step 2
Install and active Simple Social Icons.
At Appearance > Widgets, drag a Simple Social Icons widget into Nav Social Menu widget area and fill in the URLs of your desired social networks.
There is no need to configure icon size and other parameters like border radius, alignment and colors since we are going to set these in CSS later.
Step 3
At Genesis > Dynamik Design, in the 'Body' section click on 'Google Fonts' button, paste
[Raleway|Raleway|'Raleway', sans-serif]
in a new line and save changes.
Step 4
Create a file named say, global.js in wp-content/uploads/dynamik-gen/theme having the following code:
