Designing a Food Blog Header
Here are the most common elements of a food blog’s header:
Often used to promote a new cookbook or a free email series to subscribers
This will either be at the top left or in the center and typically are anywhere from 30px to 120px tall. Logos are generally smaller than they were in the past to allow for everything else to fit well and to ensure the content is not pushed too far down the screen.
There are fewer main menu items than in the past. Common items are Recipes, Shop, Cookbook, and About. Pages such as Contact, FAQ, Work with Me, Privacy, Disclaimers are moved to either a submenu or footer. Unlike business websites, completing a contact page form is not a key visitor action so there’s often no need to have it in the header. Dropdown and mega menus are regularly used to help visitors more quickly find the recipe type they’re looking for. If a primary key action is to drive visitors to social media platforms, these can be included in the main menu, but not always.
Here you may find things like Start Here, About, Contact, Login, My Recipe Box (for saved recipes), and social media icons.
Many food bloggers use Slickstream which takes over the search box and the whole screen when you click on it. In any case, a prominent search icon and/or box is desirable on all screens - desktop and mobile.
As an example, here’s the work-in-progress Design Food package header style:
Main menu showing a simple dropdown on About:
Main menu showing a well-organized mega menu dropdown on Recipes: