Designing a Food Blog Header
Here are the most common elements of a food blog’s header:
Announcement bar
Often used to promote a new cookbook or a free email series to subscribersLogo
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.Main menu
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.Submenu
Here you may find things like Start Here, About, Contact, Login, My Recipe Box (for saved recipes), and social media icons.Search
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:
Main menu showing a simple dropdown on About:
Main menu showing a well-organized mega menu dropdown on Recipes:
Create your profile
Only paid subscribers can comment on this post
Check your email
For your security, we need to re-authenticate you.
Click the link we sent to , or click here to sign in.