Create A Beautiful Responsive Header in Bricks builder

Summary

In this tutorial, you'll learn how to create a customizable header using Bricks, inspired by a Figma design. The video covers everything from adding a logo, navigation menu, and search elements to fine-tuning the layout for responsiveness across devices. It explains how to adjust flex properties, use semantic HTML tags, and make the header mobile-friendly. You'll also explore advanced settings such as sticky headers, logo customization, and different navigation styles. The step-by-step guide ensures you can create a professional, responsive header with ease, adapting it for desktop, tablet, and mobile views.

Takeaways

• 😀 Learn how to create a responsive header with logo on the left, navigation menu in the center, and search on the right.
• 😀 To create a header in Bricks, use the templates section and select the 'header' template type, or create it from scratch by adding containers and elements.
• 😀 Change the container's direction to horizontal and align elements in the center using flexbox for a well-organized header layout.
• 😀 For better header design, use padding, borders, and a solid dark color to make the header visually appealing.
• 😀 Flexbox properties like 'align-main-axis' and 'align-cross-axis' help maintain element alignment when adding more items, ensuring the header remains structured.
• 😀 To adapt the header for mobile, change the position of the navigation menu with flex order settings, making it mobile-friendly.
• 😀 Four types of mobile header layouts are demonstrated, focusing on adjusting flex order to move elements like the logo and navigation menu.
• 😀 Customize the logo settings by changing the image, adjusting link properties, and enabling options like 'lazy loading' or 'inverse logo' for scroll effects.
• 😀 There are two ways to create a navigation menu: using nestable or old/new elements, each with its own advantages and disadvantages.
• 😀 The search element in the header can be customized with input field settings, icons, text, and color, and can be turned into an overlay for a cleaner design.
• 😀 In Bricks, the 'header' section automatically wraps elements with a semantic <header> tag, but you can change the section tag to <div> for better structure in some cases.

Q & A

What is the basic structure of the header designed in this tutorial?

The header consists of a logo on the left side, a navigation menu in the center, and search icons or buttons on the right side.

What is the first step to create the header in Bricks?

The first step is to go to the templates area, click on 'Add New,' name the header, select 'Header' as the template type, and publish it.

What is the difference between creating a header from scratch and using a template in Bricks?

Creating a header from scratch involves adding individual elements like a container, logo, navigation menu, and search element, while using a template allows importing a pre-designed header.

How do you make the navigation menu responsive in the header?

To make the navigation menu responsive, use flex properties such as 'align main axis' and 'cross axis' to adjust alignment. You can also wrap the search element and icons into a flex container.

What is the issue when you add more than three items to the navigation menu?

Adding more than three items can disrupt the centering of the navigation menu, making it uneven. Adjusting the flex properties can help resolve this issue.

How can you control the order of elements in the header using flex properties?

You can control the order of elements by adjusting the 'flex order' value. A larger value moves elements to the right, and a smaller value moves them to the left.

What happens when you change the flex order of the navigation menu in mobile views?

Changing the flex order of the navigation menu allows you to reposition it in mobile views. For example, moving the menu to the left side or right side can improve the mobile layout.

What are the four types of mobile headers mentioned in the tutorial?

The four types of mobile headers are: 1) Navigation on the left side, 2) Navigation on the right side, 3) Navigation in the center with logo resized, and 4) Logo and navigation on the left side, with flex properties adjusted.

How do you make a logo resize or change its position in the header?

To resize the logo, you can adjust the 'flex grow' property, allowing the logo to take up available space. To change its position, you can modify the 'flex order' of the logo or navigation menu.

What is the recommended HTML tag for a header in Bricks?

Bricks automatically wraps the header section in a container with a header tag. There's no need to add the header tag manually. It's suggested to use a 'div' tag for the section since headers don't often include heading tags like H1, H2, or H3.