Koto Documentation
  • Webibazaar Support
  • Koto Shopify
  • Header
    • Announcement bar
    • Header section
    • Mega menu
    • Collection icons
    • Secondary menu
  • Overlay Group
    • Newsletter Popup
    • Promotional Popup
  • Sections
    • Slideshow
    • Promotion card
    • Gallery with text overlay
    • Featured collection
    • Image with text
    • Rich text
    • Logo list
    • Featured product
    • Multiple video with products
    • Blog posts
    • Social media
    • Text with icons
    • Map
    • Collection list
    • Multicolumn
    • Collapsible content with image
    • Newsletter
    • Contact form
    • Video
    • Notice
    • Scrolling promotion
    • Single banner
    • Promotion code
    • Category products
    • Testimonial
  • Footer
  • Theme Settings
    • Logo
    • Colors
    • Typography
    • Layout
    • Advanced
    • Sticky bottom bar
    • Inputs and buttons
    • Carousels
    • Corner radius
    • Product cards
    • Badges
    • Social media
    • Search
    • Currency format
    • Cart
    • Custom CSS
  • Product page
    • Quick order list
  • Collection Page
    • Collection banner
  • Color swatches
  • Page
    • How to create page template?
  • Languages and Currency
  • Additional Settings
  • Combine listing
  • Dynamic source of color swatch variant image
  • how can reset all the changes I made?
  • Turning your website layout from right to left
  • Use of 'Translate & Adapt' App
  • Continue selling when out of stock
  • Collection filter color swatch from metaobject
  • Quick Links
  • Change Log
    • Version 1.0.3
    • Version 1.0.2
    • Version 1.0.1
    • Version 1.0.0
  • Importing our demos
Powered by GitBook
On this page
  • 1. Top left
  • 2. Top center
  • 3. Middle left
  • 4. Middle center
  1. Header

Header section

PreviousAnnouncement barNextMega menu

Last updated 8 months ago

There are three navigation menu arrangement types in the Koto theme’s header section.

1. Top left

2. Top center

3. Middle left

4. Middle center

The header customizations are as follows:

Setting
Description

Layout

Customization of layout in the header section is as follows:

  • Wide

  • Container

Desktop header type

Customization of desktop header type in the header section is as follows:

  • Logo top left, menu bottom

  • Logo top center, menu bottom

  • Logo middle left, menu center

  • Logo middle center, menu left

Icon style

Customization of icon style in the header section is as follows:

  • Icon

  • Text

  • Text with icon

Show user icon with text

Enable this checkbox to show account icon with text.

Text size

Customization of icon with text size in the header section is as follows:

  • Small

  • Medium

  • Large

Uppercase icon text

Enable this checkbox to transform icon text into uppercase.

Show separator between icon

Enable this checkbox to show separator between icon.

Sticky header

Customization of Sticky header in the header section is as follows:

  • None

  • Always

  • Always, reduce logo size

Show bottom border

Enable this checkbox to show border of the bottom.

Show avatar

Enable this checkbox to show avatar.

Uppercase menu

Enable this checkbox to show menu text in uppercase.

Menu

Click on "Select menu" to add a menu in the header section.

Desktop menu alignment

Customization of desktop menu alignment in the header section is as follows:

  • Left

  • Center

Desktop menu size

Customization of desktop menu size in the header section is as follows:

  • Small

  • Medium

  • Large

Desktop menu type

Customization of desktop menu type in the header section is as follows:

  • Inline

  • Burger menu

Show dropdown submenu on hover

Enable this checkbox to show dropdown submenu on hover of the menu.

Color

Color scheme

In this section, you can change the background and foreground color of the section using the color scheme:

  • Scheme 1

  • Scheme 2

  • Scheme 3

  • Scheme 4

  • Scheme 5

Menu color scheme

In this section, you can change the background and foreground color of the menu using the color scheme:

  • Scheme 1

  • Scheme 2

  • Scheme 3

  • Scheme 4

  • Scheme 5

Spacing

Bottom margin You can adjust the range of the bottom margin to increase or decrease the bottom spacing as needed.

Section padding

Utilize this feature to add spacing to the top and bottom of the menu. Applicable when desktop logo position is set to 'top left' or 'top center'.

Live Chat Support | Webibazaar Template
Logo