Materia Theme
  • What is Materia?
  • Getting Started
    • Download & Install
    • Theme License & Activation
    • Create Pages - Required
  • Theme Updates
  • Required Apps
  • Recommended Apps
  • Mega Menu
  • Store Settings - Required
  • Materia Theme Dashboard
  • Theme Settings
    • Logo
    • Favicon
    • Layout Settings
    • Typography
    • Color Schemes
    • Website Intro
  • Overall Zoom
  • Browser Tab Messages
  • Badges
  • Notification Bubble
  • Buttons Customization
  • Main Collection Filter
  • Product Card Settings
  • Product Variant Swatches
  • Search Behavior Settings
  • Wishlist
  • Cart Settings
  • Social Media
  • Preloader Settings
  • Currency Display Settings
  • Cookies
  • Speed Optimization
  • General Store Information
  • Terms and Conditions Settings
  • Theme Sections
    • Header
    • Announcement Bar Basic
    • Upper Navigation Bar
    • Announcement Bar Pro 1
    • Hero Pro 1
    • Hero Image 1
  • Hero Banner 2
  • Hero Product 2
  • Carousel Hero Slider
  • Slideshow Pro
  • Image
  • Video
  • Benefits Cards Pro 2
  • Benefits Pro
  • Image & VIdeo With Text
  • Image With Icons
  • Image With Benefits
  • Image With Text Pro
  • Page's global sections
    • Announcement Bars
    • Header
    • Footer
    • Mobile Navigation Bar
    • Back To Top Pro
  • Overlay Group
    • Cookie Consent Banner
    • Mobile Navigation Bar
    • Page Tag
    • Custom Color Swatches
    • Order Notification Pro 1
    • Image Banner Popup
    • Promotion Banner Pro
    • Back To Top Pro
  • Products & Collections
    • Product Page
      • Breadcrumbs
      • Product Snippets
        • Product – Trust Badges
        • Product - Upsell Addon
        • Product-Payment Badges #1
        • Product - Sold Social Proof
        • Product - Bundle Pro
        • Product – Text Timer
        • Product - Promo Banner
        • Product - Vertical Benefits
        • Product - Payment Badges #2
        • Ecomz – Discount Coupon
        • Product - Size Chart Image
        • Product - Circle Images
      • Product Information
      • Product Templates
    • Collection Page
      • Collection Template
  • Other Pages
    • 404 Page
    • Blogs
    • Customer Login
    • Cart & Checkout
  • FAQs
    • Missing images when install Materia
    • Why are some pages missing?
    • Theme translation
    • Change currency
    • Why Does the Desktop Preview Look Compressed in the Theme Editor?
    • How to change fonts?
Powered by GitBook
On this page
  • Section Visibility
  • Layout Settings
  • Content Settings
  • Social Media Icon Settings
  • Spacing & Typography
  1. Theme Sections

Upper Navigation Bar

PreviousAnnouncement Bar BasicNextAnnouncement Bar Pro 1

Last updated 1 month ago

Section Visibility

Hide Section on Homepage Enable this to hide the upper navigation bar on the homepage.

Display on Mobile Devices Toggle this setting to show or hide the section on mobile screens.

Display Separator Line Enable to add a horizontal line below the upper navigation bar for visual separation.


Layout Settings

Section Width Controls the width of the section. Use “Container” for a centered, fixed-width layout.

Color Scheme Select a color scheme preset for the background and text.


Content Settings

Uppercase Text Enable this to automatically transform all section text to uppercase letters.


Social Media Icon Settings

Enable Custom Colors for Social Media Icons When enabled, allows you to define custom colors for the social media icons.

Social Icon Color Set the default icon color using a HEX code. Example: #262626

Social Icon Hover Color Set the hover state color of the icons. Example: #FF6060

Social Icon Size Define the icon size in pixels. Example: 24

Social Icon Gap Set the spacing between icons in pixels. Example: 1

Social Icon Vertical Position Adjust the vertical alignment of the icons. Example: 7


Spacing & Typography

Top Padding / Bottom Padding Controls the space above and below the section. Example: Top: 6, Bottom: 6

Font Size Set the font size of the text within this section (in pixels). Example: 12

Font Weight Choose the font weight for the section text. Typically inherits the “Body Weight” style from your theme.