How can I add a multi-column header bar on my website?

How can I add a multi-column header bar on my website?

DigitalYR
Visitor
2 0 0

Hi there,

 

I'm trying to add a multi column bar into my header below the menu but am not able to figure out how. Announcement bars rotate but I'd like to have a sticky 3 column section calling out key points around the brand... i.e. social proof, free delivery etc. Does anyone know how? I'd also want custom links.... 

 

An example below:

 

DigitalYR_0-1704398848617.png

 

Reply 1 (1)

BSS-Commerce
Shopify Partner
3477 464 551

Hi @DigitalYR ,

As your requirement: "create Multiple columns in header", you can follow my guide: 

Step 1: Make a multi-column nested menu (meganav) in the header: 

Online store => Navigation => Add menu

view - 2024-01-08T095518.955.png

Step 2: Select # to make multi-column nested menu. In this example, Collections is the parent page.

view - 2024-01-08T095552.809.png

Step 3: Make some nested page. In this example, Collection 1 is children page. After you make a new menu item, you Drag and drop that page in parent page.

view - 2024-01-08T095621.276.png

You can create another children page nested and save these changes: 

view - 2024-01-08T095649.754.png

Result like image: 

view - 2024-01-08T095720.339.png

Step 4: Online Store =>  Themes => Customize: In Header Sections, you choose new menu that has just been created and save the changes. 

view - 2024-01-08T095803.360.png

So after all, you can create a multi-column nested menu (meganav) in the header if you want.

I hope it helps, please tick mark as solution for me! 

Have a nice day!

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency