Maya
  • Overview
    • 💡Support and documentation
    • ✨Announcement bar
    • ✨Header
    • ✨Slideshow with marquee
    • ✨Hero carousel
    • ✨Trending products
    • ✨Collection carousel
    • ✨Rich text
    • ✨Featured collection
    • ✨Products grid
    • ✨Lookbook
    • ✨Highlight text with image
    • ✨Media with text
    • ✨Collapsible content
    • ✨Blog posts
    • ✨Vertical carousel
    • ✨Burst effects
    • ✨Collection tabs
    • ✨Best selling products
    • ✨Collection list
    • ✨Images comparison
    • ✨Images with text carousel
    • ✨Media with cards
    • ✨Media grid
    • ✨Media with text overlay
    • ✨Scrollable collections
    • ✨Scrolling text
    • ✨Scrollable marquee
    • ✨Testimonials
    • ✨Text with icons
    • ✨Custom liquid
    • ✨Featured product
    • ✨Footer
    • ✨Setup home-two page
    • ✨Theme settings
    • ✨Age verification popup
    • ✨Newsletter popup
    • ✨Template product
    • ✨Setup product specifications on product page
    • ✨Template default collection
    • ✨Template- Blog
    • ✨Template - Default blog post
    • ✨Template- Cart
Powered by GitBook
On this page
  • Configure the header section
  • Mega menu
  1. Overview

Header

PreviousAnnouncement barNextSlideshow with marquee

Last updated 2 months ago

Configure the header section

Select customize the theme. Click on the top dropdown menu to select the home page template.

Click on the customize theme.

From the side menu, select the header.

Configure the "Header" in the setting on the right side with the following settings.

Logo

Logo Select any image to appear as the store logo. Alternate logo Select any image to appear in the transparent header.

Desktop logo width Adjust the slider to customize the logo width from 50px to 250px. Mobile logo width Adjust the slider to customize the logo width from 50px to 150px Enable bottom shadow Select this checkbox to show bottom shadow in header.

Logo transition

This works only on home page when 'Sticky Always' is enabled. The logo will smoothly move from the bottom to the top of the header as you scroll down.

We recommend using a high-quality logo for a better transition effect. Enable transition Select this checkbox to show the logo transition.

Navigation

Menu Select menus from the backend default navigation list of Shopify. It will appear in the Header as the menu. For more details, refer to the Header layout Select the preferred header from the drop-down menu: - Logo left menu left - Logo left menu center - Logo center menu left - Hamburger Desktop menu type Select from the Dropdown or Mega menu to display the menu time. (Note: Menu type is automatically optimized for mobile.) Menu event Choose from the following options to open the menus on: - Click - On hover Sticky header Select from the following options: - None - On scroll up: This setting makes the header sticky when users scroll up the page from the bottom. - Always: This setting keeps the header permanently sticky as the page is scrolled. Enable bottom shadow Select this checkbox to show the bottom shadow in header.

Header transparency

Transparent pages Choose where to make the header transparent:

- None - Home page only - All pages Transparent visibility Choose the visibility of transparent header on: - Desktop - Mobile - Both

Mega menu

  1. Add the mega menu block.

  2. Select a menu label similar to the first-level navigation you added from Shopify navigation. For instance, Catalog.

  3. You will be connected to this menu by typing the same name into the mega menu created through the theme editor.

Menu label

Type the same name of the first-level menu to add it to a mega menu. These mega menus connect to the header menus. Example: Your main navigation consists of “Home”, “Shop”, and “Contact.” If you want to have “Shop” as this mega menu, you must type “Shop” in the menu label field.

Promotion 1-2

Image Choose an image to display in the mega menu. Heading Add a descriptive caption to the image in the mega menu. Description Enter the description text. Link Include a link to the image in the mega menu. Text color Choose the text color. Overlay color Choose the image overlay color. Overlay opacity Adjust the range bar to determine the overlay opacity.

✨
Shopify menus.