📘
Shark documentation
  • Overview
    • 💡Support and documentation
    • ✨Announcement bar
    • ✨Header
    • ✨Slideshow
    • ✨Featured collection
    • ✨Marquee text
    • ✨Rich text
    • ✨Collection carousel
    • ✨Collection tabs
    • ✨Categories
    • ✨Collection list
    • ✨Image with text
    • ✨Media grid
    • ✨Collapsible content
    • ✨Images carousel
    • ✨Newsletter
    • ✨Content tabs
    • ✨Countdown
    • ✨Logo list
    • ✨Shop the look
    • ✨Store locator
    • ✨Map
    • ✨Featured blogs
    • ✨Testimonials
    • ✨Multicolumn
    • ✨Text with icon
    • ✨Event calendar
    • ✨Recently viewed products
    • ✨Contact form
    • ✨Video
    • ✨Video with text overlay
    • ✨Featured product
    • ✨Media banner
    • ✨Image comparison
    • ✨Media with text list
    • ✨Collections details
    • ✨Collections banner list
    • ✨Custom Liquid
    • ✨Split banner
    • ✨Footer
    • ✨Theme settings
    • ✨Product page
    • ✨Template default collection
    • ✨Template- Blog
    • ✨Template - Default blog post
    • ✨Template- Cart
    • ✨Recommended sizes for images
  • FAQ
    • Theme updates
    • Support
  • How to set up the size guide on the product page
Powered by GitBook
On this page
  • Mega menu settings
  • Hamburger mega menu
  1. Overview

Header

PreviousAnnouncement barNextSlideshow

Last updated 11 months ago

Header style

Choose the header styles from the following: -Logo left menu center -Logo left menu left -Logo center menu left -Logo left hamburger menu -Logo center hamburger menu -Logo left menu left with search bar -Logo left hamburger menu with search bar

Enable sticky header

Tick the checkbox to make the header sticky.

Sticky header type

Choose the sticky header type from the following options: - On scroll up (Using this, the header changes to sticky only when users scroll the page back to the top.) - Always (Using this, the header remains sticky always irrespective of the page scroll.)

Logo

Choose any image to appear as the store logo.

Desktop logo width

Adjust the slider to customize the logo width from 100px to 300px.

Mobile logo width

Adjust the slider to customize the logo width from 50px to 100px.

Transparent header

Enable desktop transparency Tick this checkbox to make the header transparent on the desktop view. Enable mobile transparency Tick this checkbox to make the header transparent on the mobile view. Alternate logo Choose any logo to appear in the transparent header. Text/icon color Choose any color to appear as the text or icon's color in case of transparent header.

Navigation

Desktop menu

Menu type Select from Dropdown or Mega menu to determine the menus type. Menu font Select from heading or body fonts. These fonts can be changed in the theme settings>typography. Menu font size Select from small, regular, medium or large to determine the font size of the main menus. Second level menus font Select from heading or body fonts. These fonts can be changed in the theme settings>typography. Second level menus font size Select from small, regular, medium or large to determine the font size of sub menus.

Hamburger menu

Font family Select from heading or body fonts. These fonts can be changed in the theme settings>typography.

Mobile menu

Icons

Enable search Select the checkbox to show search icon in the header. Enable account Select the checkbox to show account icon in the header. Enable cart Select the checkbox to show cart icon in the header.

Mega menu settings

Add Mega menu block in the header section and type the same name of the first level menu in the Menu label as shown below. It links the mega menu with the header.

Menu label

Content 1-4

Image Add any image to appear in the mega menu. Heading Type any text to appear as a heading. Link Add any link to redirect the image of the mega menu. Overlay opacity

Hamburger mega menu

(Note: This hamburger mega menu does not work on the mobile and this block will show only with the hamburger header styles.)

Image

Choose any image from the library.

Video

Choose any video from the library.

Heading

Add any heading text.

Link

Add any link to redirect the added media.

Colors

Text: Choose any color for the text color. Overlay: Choose any color for the overlay. Overlay opacity: Adjust the range bar to determine the overlay opacity.

Menu Select menus from the Shopify backend default navigation list. It will appear in the Header as the menu. For more details, refer to the

Menu font Select from heading or body fonts. These fonts can be changed in the theme settings>typography. Font size Adjust the rangebar to determine the font size of the main menus. Enable social media icons Tick this checkbox to show social media icons in the mobile drawer. These can be set up from theme settings>Social media. Enable language selector Tick this check box to show the language selector. To add a language, go to your Enable currency selector Tick this check box to show the currency selector. To add a country/region, go to your

Type the name of the first level menu. It connects the mega menu to the menus added in the header. To understand menus more, refer to

✨
Shopify menus.
language settings.
payment settings.
Shopify menus
.