Modify Top bar & Header Style 1

Modified on Tue, 17 May, 2022 at 4:41 PM

TABLE OF CONTENTS



TOP BAR & HEADER STYLE 


I. TOP BAR

1. General Settings

- Layout Mode: Boxed/ Wide

- Tick to display Border at the bottom

2. Block Settings

Click on Add block to add more content on the top bar

[+Email] 

  • SVG icon: paste the icon code in SVG to display the icon next to the email
  • Email: insert your email 

[+Phone Number]

  • SVG icon: paste the icon code in SVG to display the icon next to the phone number
  • Phone number

[+Account] 

  • SVG icon: paste the icon code in SVG to display the icon next to the Sign in or Register 

[+Location]

  • SVG icon: paste the icon code in SVG to display the icon next to the text
  • Text: insert he text you want to display
  • Link: you can link this feature to page so when customers click on the text, they'll be directed to that page


II. HEADER STYLE 1

1. General Settings


LOGO - DESKTOP

- Type: choose a type to input the logo (SVG/ Image) 

Then select image to show or insert logo code in SVG (based on the type you choose, the system will show the exact logo in that type)

LOGO - MOBILE

The same settings with desktop logo

Select an menu to show it on:

  • Main menu
  • Vertical menu
  • Mobile menu


TEXTBOX

Insert the text to the box to show it on the right side of navigation

Enter menu title into the box, add separator if there're many titles E.g: Home;Catalog

HIGHLIGHT MENU

Enter menu title into the box, add separator if there're many titles E.g: Home;Catalog

MENU LABEL

Enter menu title into the box, add separator if there're many titles E.g: Home;Catalog

- Text: enter the text to show as label next to the menu title

- Menu title: enter the title you want to attach the label

2. Block Settings


Add blocks to enable the navigation for main menu and vertical menu


[+] Mega Trigger

- Mega menu trigger: when you want to enable the navigation, you must add block "mega trigger" first and then leave other blocks under it [+menu], [+banner],... You have to enter the exact menu title of the main menu you created on Navigation (from the admin) to the box

- Background color: use the color picker to adjust the color for the background


- Background image: you can upload image to also set the background along with the color background


[+] Menu

- Block label: you can give this menu a name to easily identify it later

- Heading: enter text to show heading on menu item

- Width: adjust the width for this item column

- Menu item: select the menu item to display 


[+] Product

- Block label: you can give this menu a name to easily identify it later

- Width: adjust the width for this item column

- Product: select the product to display

[+] Banner

- Block label: you can give this menu a name to easily identify it later

- Width: adjust the width for this item column

- Heading: enter text to show heading on menu item

- Image: select an image to show as banner

- Link: paste a external link or search a destination from the system to attach it to the banner
































Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article