Main page: direction

Your Menu Bar is among the initial things a guest encounters on your website. Motivate visitor engagement by using appealing, clickable connections, and be considerate to your upcoming self by transforming the Menu Bar into a reusable Symbol that can be customized and modified at your desire. 

During this session, you will discover how to create a Menu Bar using the following:

1. Integrate the Menu Bar
2. Enhance the Menu Bar’s Style
3. Transform the Menu Bar into a Symbol

Stick with us and acquire the resources for this tutorial. 

Integrate the Menu Bar

We shall incorporate a Menu Bar at the summit of the main page: 

1. Access the Navigator
2. Unlock the Incorporate panel
3. Navigate to Components
4. Drag a Menu Bar into the Navigator and position it beneath the Body

‍

The Menu Bar component arrives with certain default components, including a Container.

In the prior main page hero section tutorial, we made an independent Container positioned in the Section. We specified the highest width of the Container to be 1200 pixels, which automatically produced a “Container” class. 

Let’s recycle the “Container” class on the Menu Bar’s default Container so that it, too, can enjoy the benefits of the 1200 pixel maximum width we previously established: 

1. Choose the Menu Bar Container
2. Popup the Design panel
3. Enter the Identifier field
4. Select “Container” from Current classes

Remark: If you assign a class to an element, all style modifications made on this element are preserved in this class. You can reuse the class on fresh elements to automatically deploy the styles preserved in the class you produced. 

Enhance the Menu Bar

Lets modify the background shade of the Menu Bar to aid it in blending more harmoniously with our design:

1. Select the Menu Bar
2. Unveil Design panel > Backgrounds
3. Launch the color palette
4. Pick black

Altering the background shade of the Menu Bar to black causes our Menu Bar connections to merge with the background and become indistinct. We shall rectify this after incorporating our logo to the Menu Bar: 

1. Launch the Resources panel
2. Drop the logo into the Brand Link block

Lets shrink the logo:

1. Choose the logo Picture
2. Grab one of the corner hold and move it to 196 x 28 pixels

Lets also center the logo and expand its clickable space by including padding:

1. Choose the Brand Link block
2. Unveil Design panel > Spacing
3. Incorporate top and bottom padding of 16 pixels

Remark: You can swiftly add margin or padding to opposite sides of an element by holding Option (on Mac) or Alt (on Windows), and moving one of the margin or padding regulators. 

Lets style the Menu connections to make them prominently visible against the black backdrop: 

1. Choose a Menu connection
2. Expand Design panel > Typography
3. Hit the Color palette and designate the color to white

To execute these changes (and subsequent modifications) on all the Menu connections, include the “Menu connection” class to every Menu connection in the Menu Bar:

1. Choose the subsequent Menu connection in the Menu Bar
2. Enter the Identifier field
3. Select “Menu connection” from Current classes
4. Redo these stages for the 1 spared Menu connection

Remark: if you use an improper class on an element, you can always erase the class from the Identifier field, and pick the correct class from the Current classes dropdown. Get more insight into classes. 

Let’s grant the Menu connections a tad bit more distance between each other by adjusting their margins: