Customizing the Mega Menu Section

Customizing the Mega Menu Section

For any website, the menu does more than just list pages — it guides shoppers, shapes their journey, and helps turn visits into purchases.
That’s why a clear, well-structured menu is essential to both user experience and store performance.

Tapita Mega Menu Section is a powerful, flexible navigation section that lets you display a rich dropdown menu with multiple content blocks. You can showcase collections, blog posts, product grids, image galleries, and more, all inside a menu item.
  1. Two Layout Options: Choose between a classic horizontal or side vertical menu layout to best fit your store’s structure and shopping experience
  2. Multi-Functional Block System: Mix and match blocks for products, blog posts, social media, store info, image galleries, and more – each designed to serve a different merchandising purpose
  3. Visual Navigation Enhancements: Add images to categories and featured content to create a more engaging and intuitive menu experience
  4. Fully Customizable Design: Tailor every aspect – layout, typography, spacing, and colors – to stay consistent with your brand identity
  5. Responsive & Speed-Optimized: Works seamlessly across all devices while maintaining smooth performance and fast load times


Mega Menu Section Customization

For instructions on how to add a mega menu section to your store, please refer to the Getting Started guide for Tapita Theme Sections Builder.
After adding your desired Mega Menu Section to your store, you can customize its content as follows within the Shopify Theme Editor:

1. Menu Settings Configuration

Step 1: Choose a Menu
  1. Select the menu you want to show in this section.
  2. You can configure your menus in your Shopify admin by going to Content → Menus.


Step 2: Container Styling Configuration
  1. Container background color
    1. Sets the background color for the whole menu container. 
    2. Example: Use HEX (e.g. #FFFFFF for white) or RGBA (e.g. rgba(255,255,255,0.8) for transparent white).
  2. Container vertical padding
    1. Adds space above and below the menu container.
    2. Enter a number in pixels (e.g. 10) to create breathing room.
  3. Container horizontal padding
    1. Adds space to the left and right of the menu container. This helps center your content or prevent it from stretching edge-to-edge.
    2. Enter a number in pixels (e.g. 10) to create breathing room.


Step 3: Mobile Settings Configuration
Number of menu items to show on mobile: Limits how many top-level items are displayed in a row on mobile. Any extra items will go into a collapsible sidebar menu.



Step 4: Sidebar Settings Configuration
  1. Show sidebar on desktop: Toggle this ON to show a sidebar-style menu on desktop (instead of horizontal layout).
  2. Sidebar title: The heading shown at the top of the sidebar when opened.
  3. Custom sidebar icon: Upload your own icon for the menu button (e.g. hamburger icon). If not provided, the default hamburger icon is used.
  4. Sidebar position: Choose if the sidebar opens from the Left or Right side of the screen.
  5. Overlay background color: When the sidebar opens, a semi-transparent overlay covers the rest of the screen. Enter the hex color code or RGBA color code here.


Step 5: Menu Item Styling
Control the appearance of each top-level clickable menu item.
  1. Text color / Text hover color
    1. Defines the text color of menu items in their default state.
    2. Enter a HEX or RGBA color code.
  2. Background Color
    1. Sets the background color of the menu item in its normal state.
    2. Enter a HEX or RGBA color code. Example: #FFFFFF.
  3. Background Hover Color
    1. Sets the background color when the user hovers over the menu item.
    2. Enter a HEX or RGBA color code. Example: #F5F5F5.
  4. Border Radius
    1. Controls the roundness of the menu item's corners.
    2. Enter a pixel value. Use 0 for square corners or 4–8 for rounded ones.
  5. Vertical Padding
    1. Adds space above and below the text inside each menu item.
    2. Enter a pixel value.
  6. Horizontal Padding
    1. Adds space on the left and right sides of the text inside each menu item.
    2. Enter a pixel value. 


Step 6: Dropdown Style
Customize the appearance of dropdown menus when hovering over top-level items with submenus.
  1. Show dropdown arrow: Toggle ON to show arrows next to menu items with blocks.
  2. Custom arrow icon: Upload your own SVG or PNG arrow. Leave blank to use default arrow.


Step 7: See More Button Styling
This button appears in blocks like blogs or collections when you have more items than shown.
  1. Button color & hover color: Set the button’s text color for normal and hover states.
  2. Button background color: Sets the background fill for the button.
  3. Button padding (top & bottom): Controls button size by adding space inside. Larger padding = taller button.
  4. Button font size & font weight: Adjust the size and boldness of the button text.


Step 8: Sticky Menu Settings
Make your menu stay visible as users scroll down the page.
  1. Enable sticky menu: When ON, the menu will “stick” to the top of the screen as the user scrolls.
  2. Sticky menu z-index: Defines layering priority.
  3. Account for sticky header: Enable this if your theme already has a sticky header to avoid overlapping.
  4. Header class: CSS class of the header element (leave blank to use default <header> tag)

2. Menu Block Configuration

Each block represents one clickable menu item (like Home, Shop, Collections, etc.). You can customize the layout and content of each block independently.

General Block Settings
  1. Layout Type
    1. Controls whether items inside the block are stacked vertically or arranged horizontally.
    2. Choose Vertical or Horizontal depending on how you want the content aligned.
  2. Menu Width
    1. Defines how wide the entire menu block stretches.
    2. Select either Full Width (spans the whole screen) or Page Width (matches your page content width).
  3. Background Color
    1. Sets the background color for the menu block.
    2. Enter a hex code (e.g., #FFFFFF) or use the color picker.
  4. Vertical Padding / Horizontal Padding
    1. Adds space inside the menu block vertically or horizontally.
    2. Enter values in pixels to control internal spacing.


There are six block types you can use for your menu blocks.


Blog Block: Display a selection of recent blog posts from your store.
  1. Block Title: Text shown above the blog post list. Enter a short, descriptive title and optional subtitle.
  2. Blog Settings
    1. Select Blog: Choose a Shopify blog to display posts from.
    2. Total number of posts to display: Set how many posts will appear in the block (e.g., 3 or 4).
    3. Position of highlighted post: Highlight a specific post to make it visually stand out. Enter the position (e.g., 1 for the first post). Enter 0 to disable highlighting.
    4. Blog layout: Choose between Row (horizontal) or Column (vertical) display.
    5. Width of highlighted post: Controls the relative width of the highlighted post. Use a number between 2–6.
  3. See More Button
    1. Button text: Text for the button that links to your full blog page.
    2. Button URL: Destination link for the button.


Image Gallery Block: Display up to 6 custom images with optional links.
  1. Block Title: Text shown above the image gallery.
  2. Image Settings (Desktop / Mobile layout): Choose how many images appear per row on each device.
  3. Image aspect ratio (Desktop / Mobile): Define the shape of the images.
  4. Image fit: Choose how the image fills its container:
    1. Cover crops and fills
    2. Contain keeps full image in view
    3. Fill stretches image to fit
  1. Image 1–6
    1. Image: Upload a banner or promotional image.
    2. Image link: Enter a clickable link for the image.
    3. See More Button
      1. Button text: Text shown on the button.
      2. Button URL: Where the button leads when clicked.





Information Block: Highlight services or selling points with an image, title, and description.
  1. Block Title: Text above the list of information items.
  2. Image Settings (Desktop / Mobile) aspect ratio: Set the image shape using a ratio value.
  3. Image fit: Choose how images scale and crop inside their container.
  4. Information 1–6
    1. Image: Upload an icon or small graphic.
    2. Title: Short label for each information item (e.g., “Free Returns”).
    3. Description: Supporting text shown below the title.
    4. URL: Optional link for each item.
    5. See More Button
      1. Button text: Label for the button.
      2. Button URL: Link destination.



Navigation Block: Display a list of quick-access links with icons, labels, and optional descriptions.
  1. Block Title: Text above the link list.
  2. Navigation Icon: Upload a visual for each link item.
  3. Label: Text for the clickable link.
  4. Description: Optional supporting text.
  5. URL: Link destination.
  6. See More Button
    1. Button text: Label for the button.
    2. Button URL: Link destination.



Product Block: Feature products from a selected collection directly in the menu.
  1. Block Title: Text above the link list.
  2. Product Settings
  3. Select Collection: Choose a Shopify collection to display.
  4. Number of products to display: Set how many products are shown (e.g., 3–6).
  5. Desktop / Mobile layout: Choose product layout for each screen type.
  6. See More Button
    1. Button text: Label for the button.
    2. Button URL: Link destination.


Social Block: Add social media icons that link to your brand’s social profiles.
  1. Block Title: Text above the link list.
  2. Icon Size (Desktop / Mobile icon size): Enter icon size in pixels (e.g., 24px, 32px).
  3. Social 1–6
    1. Icon: Upload or choose a platform icon.
    2. Label: Short name for the platform.
    3. URL: Enter the full profile link.
    4. See More Button
      1. Button text: Optional text for an additional CTA.
      2. Button URL: Link to a full social media hub or page.


Now you know how to customize Tapita’s Menu Section to effectively showcase collections, blogs, images, and more — all from your Shopify menu. If you have any questions or need assistance, don’t hesitate to reach out to Tapita support.

    • Related Articles

    • Customizing the Footer Mega Menu Section

      For any website, the menu does more than just list pages — it guides shoppers, shapes their journey, and helps turn visits into purchases. That’s why a clear, well-structured menu is essential to both user experience and store performance. Tapita ...

    • Customizing the Custom Form Section

      Custom Form Section Overview In Shopify stores, custom forms are invaluable for gathering specific customer information, collecting feedback, and streamlining communication. Tapita's Custom Form Section provides a versatile tool to create ...

    • Customizing the Testimonial Section

      Testimonial Section Overview In Shopify stores, displaying customer testimonials is essential for building trust and social proof. Tapita's Testimonial Section provides a modern and visually appealing way to highlight these testimonials, enhancing ...

    • Customizing the FAQ Section

      FAQ Section Overview In Shopify stores, FAQ sections are commonly used to address customer inquiries, reduce support requests, and improve the overall customer experience by providing quick access to answers for frequently asked questions. Tapita's ...

    • Customizing the Video Section

      Video Section Overview In Shopify stores, video sections are powerful tools for showcasing products, tutorials, testimonials, and more. Tapita's Video Section provides a dynamic hub for this multimedia content, offering users a rich and engaging ...