Appearance

Header & Footer Settings ​

The Header & Footer Settings allow you to customize the header and footer sections of your website, including menus, logos, contact information, and social media links.

Table of Contents ​

  1. Overview
  2. Accessing Header & Footer Settings
  3. Header Settings
  4. Footer Settings
  5. Menu Builder
  6. Copyright Settings
  7. Best Practices

Overview ​

Features ​

  • ✅ Customize header layout
  • ✅ Configure footer content
  • ✅ Manage navigation menus
  • ✅ Set header/footer logos
  • ✅ Add contact information
  • ✅ Configure social media links
  • ✅ Set copyright text
  • ✅ Customize header/footer scripts

Admin Routes ​

  • Header & Footer: /admin/settings/general/header-footer
  • Copyright: /admin/settings/general/copyright
  • Menu Builder: /admin/menu-builder

From Admin Panel ​

  1. Log in to admin panel
  2. Navigate to Settings → General → Header & Footer
  3. Or go directly to: /admin/settings/general/header-footer

Permissions Required ​

  • Manage Settings: manage-settings permission

Header Settings ​

Header Layout ​

Header Style ​

Options:

  • Standard: Traditional header layout
  • Centered: Centered logo and menu
  • Minimal: Simplified header
  • Sticky: Header stays visible on scroll

Header Height ​

  • Set header height
  • Default: Auto
  • Custom height in pixels
  • Example: 80px

Logo Upload ​

  1. Click Upload Logo
  2. Select image file
  3. Recommended size: 200x60px
  4. Supported formats: PNG, JPG, SVG
  5. Logo appears in header

Logo Settings ​

  • Logo Width: Set logo width
  • Logo Height: Set logo height
  • Logo Alt Text: Accessibility text
  • Logo Link: Where logo links to (usually homepage)
  • Upload separate logo for mobile
  • Smaller size recommended
  • Recommended size: 150x45px

Header Menu ​

Menu Location:

  • Top Bar: Above main header
  • Main Header: Primary navigation
  • Both: Menu in both locations

Menu Style:

  • Horizontal: Traditional horizontal menu
  • Dropdown: Dropdown submenus
  • Mega Menu: Large dropdown menus

See Menu Builder section for detailed menu management.

Header Contact Information ​

Contact Details ​

Phone Number:

  • Display phone in header
  • Format: +1 (555) 123-4567
  • Clickable link

Email Address:

  • Display email in header
  • Format: info@example.com
  • Clickable mailto link

Address:

  • Display address in header
  • Optional field
  • Usually shown in footer

Header Social Media ​

Add Social Links:

  1. Click Add Social Link
  2. Select platform:
    • Facebook
    • Twitter
    • Instagram
    • LinkedIn
    • YouTube
    • Pinterest
    • Other
  3. Enter URL
  4. Click Save

Social Icons:

  • Icons appear in header
  • Opens in new tab
  • Styled consistently

Header Scripts ​

Custom Header Scripts ​

Add Scripts:

  • Google Analytics
  • Facebook Pixel
  • Custom tracking codes
  • Other scripts

Best Practices:

  • Only add trusted scripts
  • Test scripts before saving
  • Keep scripts minimal
  • Use async/defer when possible

Options:

  • Standard: Multi-column footer
  • Minimal: Simple footer
  • Full Width: Full-width footer
  • Centered: Centered content

Column Configuration:

  • 1 Column: Single column layout
  • 2 Columns: Two-column layout
  • 3 Columns: Three-column layout
  • 4 Columns: Four-column layout

Footer Content ​

Available Widgets:

  • About: Company information
  • Links: Navigation links
  • Contact: Contact information
  • Newsletter: Email subscription
  • Social Media: Social links
  • Custom HTML: Custom content

Footer Text ​

About Section:

  • Company description
  • Mission statement
  • Brief history
  • Use rich text editor

Copyright Text:

  • Default: © 2024 Company Name. All rights reserved.
  • Customizable
  • Can include year variable
  1. Click Upload Footer Logo
  2. Select image file
  3. Recommended size: 150x45px
  4. Usually smaller than header logo
  5. Optional field

Contact Details ​

Address:

  • Full address
  • Street, City, State, ZIP
  • Country

Phone:

  • Phone number
  • Format: +1 (555) 123-4567
  • Clickable link

Email:

  • Email address
  • Format: info@example.com
  • Clickable mailto link

Business Hours:

  • Operating hours
  • Example: Mon-Fri: 9am-5pm
  • Optional field

Add Social Links:

  • Same as header social links
  • Usually more prominent in footer
  • Can include additional platforms

Common Footer Links:

  • Privacy Policy
  • Terms of Service
  • About Us
  • Contact
  • Sitemap
  • Blog

Menu Configuration:

  • Use Menu Builder
  • Create footer-specific menu
  • Or use main menu

Add Scripts:

  • Analytics codes
  • Tracking pixels
  • Custom JavaScript
  • Other scripts

Accessing Menu Builder ​

Route: /admin/menu-builder

  1. Go to Settings → Menu Builder
  2. Or navigate directly

Creating Menus ​

Create New Menu ​

  1. Click Create Menu
  2. Enter:
    • Menu Name: Internal name
    • Menu Location: Header/Footer/Both
    • Description: Optional description
  3. Click Save

Adding Menu Items ​

Add Item ​

  1. Click Add Item

  2. Select item type:

    • Page: Link to page
    • Post: Link to blog post
    • Category: Link to category
    • Custom Link: External URL
    • Separator: Visual divider

  3. For Pages/Posts/Categories:

    • Select from dropdown
    • Item added automatically

  4. For Custom Links:

    • Enter URL
    • Enter Link Text
    • Choose target (same window/new tab)

Managing Menu Items ​

Edit Item ​

  1. Click Edit on item
  2. Modify:
    • Link text
    • URL
    • Target
    • CSS classes
  3. Click Update

Delete Item ​

  1. Click Delete on item
  2. Confirm deletion
  3. Item removed

Reorder Items ​

  • Drag and Drop: Drag items to reorder
  • Move Up/Down: Use arrow buttons
  • Indent: Create submenus
  • Order saved automatically

Creating Submenus ​

  1. Indent Item:

    • Drag item to right
    • Or click Indent button
    • Item becomes submenu

  2. Submenu Levels:

    • Can have multiple levels
    • Recommended: 2-3 levels max
    • Deep nesting can be confusing

Managing Submenus ​

  • Edit: Modify submenu item
  • Delete: Remove submenu item
  • Reorder: Change submenu order
  • Promote: Move to parent level

Route: /admin/settings/general/copyright

  1. Go to Settings → General → Copyright
  2. Or navigate directly

Copyright Text ​

Format:

© {year} {company_name}. All rights reserved.

Variables:

  • {year}: Current year (auto-updates)
  • {company_name}: Company name from settings

Options:

  • Use default format
  • Custom text
  • Include additional information
  • Add links

Example:

© 2024 Company Name. All rights reserved. | Privacy Policy | Terms of Service

Options:

  • Bottom: Bottom of footer
  • Above Footer: Above footer content
  • Custom: Custom position

Additional Footer Text ​

  • Legal disclaimers
  • Terms and conditions
  • Privacy notices
  • Other legal text

Best Practices ​

Header Design ​

  1. Keep It Simple:

    • Clear navigation
    • Prominent logo
    • Minimal clutter
    • Easy to scan

  2. Mobile Responsive:

    • Test on mobile devices
    • Ensure menu works on small screens
    • Use mobile logo if needed
    • Consider hamburger menu

  3. Performance:

    • Optimize logo images
    • Minimize scripts
    • Use efficient code
    • Test load times

  1. Organize Content:

    • Group related links
    • Use clear headings
    • Logical structure
    • Easy navigation

  2. Include Essentials:

    • Contact information
    • Important links
    • Social media
    • Copyright notice

  3. Keep Updated:

    • Update contact info
    • Refresh links
    • Check social media
    • Review content regularly

  1. Logical Structure:

    • Group related items
    • Use clear labels
    • Limit menu items
    • Avoid deep nesting

  2. User-Friendly:

    • Easy to understand
    • Intuitive navigation
    • Clear hierarchy
    • Accessible

Troubleshooting ​

Solutions:

  1. Verify menu is assigned to location
  2. Check menu has items
  3. Clear cache
  4. Check template settings

Logo Not Showing ​

Solutions:

  1. Verify logo uploaded
  2. Check file format
  3. Verify file permissions
  4. Clear cache

Solutions:

  1. Save settings
  2. Clear cache
  3. Check template
  4. Verify permissions

Last Updated: [Date will be updated during final review]

Released under the MIT License.

Copyright © 2024 OmniSuite CMS