Adding an Image Logo


To add a logo we'll go into the customizer. Appearance > Customize > General Settings > Site Identity


This works best when the logo has white text, is a png and has a transparent background.



You should also add a 'Sticky Logo' - this will appear when you scroll a little. Appearance > Customize > General Settings > Sticky Logo


This works best when the logo has dark text.




Changing the Image Logo Size


This can be done via Appearance > Customize > General Settings > Image Logo Height


Adjusting the height will proportionally adjust the width of the image.



Editing the Header


This is again done entirely in the customizer. Appearance > Customize > Header and Navigation.


It's best go through each section yourself and see what you can change.




Adjust the Sticky Header


Appearance > Customize > Header and Navigation > Sticky Header





Adjust the Mobile Header


Appearance > Customize > Header and Navigation > Mobile Header





Adding a Search icon to the menu


Go to Appearance > Menus and click on 'Screen Options' at the top. Ensure that the CSS Classes checkbox is ticked.


Now, create a 'Custom Link' - and enter the following:



CSS Classes should have the following:

fa fa-search



Adding a Button to the Menu


Go to Appearance > Menus and click on 'Screen Options' at the top. Ensure that the CSS Classes checkbox is ticked.


Edit any menu item and add the class button to the CSS Classes field like so:



You can change the color of the button via:

Appearance > Customize > Header and Navigation > Navigation Colors - 'Button Color'