Borders > Header section

The Header is a critical section that gives you a snapshot of the entire store. It contains your store's logo, the main navigation, search bar and other elements such as the shopping cart.

Borders has a pretty complex header which allows you to create a unique design that suits your brand.

Logo

Borders has two logo options, one for desktop and one for mobile devices (screens smaller than 1023px). This allows you to have different versions of your logos, especially if your design is a large one that might need adjustments on smaller screens.

Independent of the images, you can choose the maximum height of the logo on both screen sizes.

Center logo image on mobile. This option allows you to center the logo perfectly on mobile devices, which may lead to an uneven display if you have more items on on side than the other. If this is unchecked, your logo will be aligned within the logo area. Please note that this only has effect if the header is already set to display centered.

Layout

Borders has quite a few layout options, since it offers various options that can be combined in any way.

Desktop layout. You can choose between one row and two rows. One row should be used in conjunction with the minimal menu or when your navigation is really small. The two rows option has your navigation below the logo bar, so it is best kept for really large menus.

Desktop menu style. Choose between classic (text) navigation and navigation inside a drawer. Both are good and can be used depending on your desired result.

Alignment. It affects the logo position (and also the menu centering in the two rows layout).

Buttons in header. You can choose to display labels instead of icons for a few of the header buttons, such as the search, the menu, the cart. This can be useful in cases where your target audience might not be familiar with a minimal design of just icons.

Buttons layout. If set to "regular" all the icons will have a larger design and be limited by borders. If set to "compact", the borders are gone and the icons will be more crowded.

Keep header padding static. This is a useful option especially if you have the grid padding set to a very large value. It helps keep the left / right padding of the entire header to a fixed value of around 20px. Otherwise, the padding will vary based on the grid padding.

Menu & submenu design

There are various options available to style both the main menu and the submenu. The options are separate, so you can style both the menu and the submenu differently. For the first level, you can choose the text size or make text bold. For the submenus, you can choose the layout between:

• "two columns" (big typography, useful for smaller menus with not so many items)
• "four columns" (small typography, useful for larger menus and lots of different submenus)

Secondly, you can choose level to feature (either the first or the second one from the submenu navigation):

• "first level" will make the first item large, which is a more classic design approach
• "second level" will make all other items large, which is a more creative design that puts a lot of importance on each menu item

Behaviour & content

You can choose to have the header always stick at the top or scroll along with the page. And then you can choose what icons do you want to show in your main navigation.

Promotion blocks

The header allows for promotion blocks inside each submenu. You can add promotion blocks as section blocks in the header section, and connect each block to a unique submenu through the submenu's handle.

For this to properly work you have to make sure that you write the handle of the menu you want to transform in the proper setting field. A handle means all lower case with dashes instead of spaces. For example, if you have a menu called Our Promotions and you want to turn it into a mega menu, the handle will be our-promotions.

You can see the process in this short video:

You can then add one or two different promotions inside each of these menus. You can insert an image, add a link to the image, write some text and have a button with a link. Any of these are optional, and the design of the submenu will adapt accordingly, based on your content.