The header shows at the top of your site and contains your logo or site name, main menu, and optional cart icon, and optional search bar. Getting your header right is one of the most important aspects of a professionally designed site. If you need help customizing your header or web design advice just let us know and we would be happy to help.
- On your IndieMade Dashboard on the left menu click on Design.
- On the Design page click on Header Design
Header Style
You can use any of our themes header styles and it defaults to your chosen theme. Headers differ mainly in the location of the logo or site name and the menu design. Preview our themes to see the differences.
Site Name Font
This is the font that is used for your site name, showing your site name in your header is optional under Basic Site Info. If you do choose to show your site name this is the font that is used.
- Visit https://fonts.google.com/ to find a font. For the font consider filtering font category as 'Display'
- Once you have decided on a font type the name into the Site Name Font text field and it will find the font.
Site Name Font Style
This is the style of the font that is chosen. Each Google font contains 1 or more styles from light to black (very thin to very bold).
Menu Font
Depending on the theme the menu font is used for menu items in the header or drop down menu. Choosing the font is identical to choosing the Site Name font.
Show Searchbar
This will show a site wide search bar in the header of your site.
Colors
Choose from the color palette selection for each color. However, you are not limited to these colors and you can use any 6 digit (with hash) hex # for your site. There are hundreds of hex color pickers available, you can even upload your logo or photo to get the exact colors of your brand.
Hopefully the header colors are self-explanatory but just in case:
- Header Background - The main background color of your header.
- Mobile Menu Background - The main header background on your header when viewed on a mobile device or phone.
- Main Menu Links - The color of the text of your main menu.
- Site Name - The color of your site name if you have chosen to show your site name.
- Header Icons - Your cart icon if you have a store and your social icons if you have them.
- Search Button - The color of the search button if you enable the site wide search (above).
- Search Icon - The zoom or magnify icon that is part of the searchbar.
Advance Header Settings
Click on the Advanced Header Settings to expand all of these settings. Sizes here entered in pixels. Pixels are relative to the device but you can estimate that 100 pixels = is about 1 inch. This is a rough guestimate, It might take a few trips to this page to get things looking good.
Let's talk about these settings:
- Logo Min Width: This is the minimum width your logo we will resized down on small devices. For reference an iPhone X is about 350 pixels wide.
- Logo Max Width: The maximum width your logo will be resized up on large monitors.
- Site name font size: The size of the site name (if shown)
- Menu font size: the font size of each menu of your menu items.
- Header Transparency: If you have a "Fixed Header" this is the opacity of the entire header. For example, 100 would be completely opaque while 50 you'd be able to see through the header. A value of zero would be invisible (don't do that). See our Moment Theme as an example of a transparent header.
- Fixed Header : Your header will be fixed to the top of the page and your content will scroll underneath the header. The Moment Theme and Crystalline are good examples of a fixed header.
- Transparent on the Homepage: An advanced setting with a great impact. This works in tandem with a large introduction image (hero image). Your logo and site name will show above your hero image and as the user scrolls the header becomes visible. See Coopworth as a good example of this setting. You can add a hero image using the section manager.
- Cart Icon Style: The style of icon, currently we have 4 choices but if you have some ideas for more let us know.
- Cart Size: This is the size of the icon of the cart.
- Hamburger Menu Size. Hamburger is the mobile menu. (it's three lines look like a hamburger to some) This is the size of the icon for mobile menus, Please note many of our themes like Crystalline have mobile first designs where the hamburger menu (mobile menu) shows for all devices including desktops.