Your website’s header is the first thing visitors see – it’s your digital front door. dSite Theme v1.4.0 introduces a powerful header customization system that gives you complete control over your site’s top navigation area. Let’s explore all the options!
Header Layout Options
Choose from 2 professional header layouts in Appearance → Customize → Header Settings:
1. Classic Layout (Default)
- Logo: Positioned on the left
- Navigation Menu: Aligned to the right
- CTA Button: Integrated with navigation
- Best for: Traditional professional look, most medical practices
- Mobile: Hamburger menu with full-screen overlay
2. Centered Layout
- Logo: Centered at the top
- Navigation Menu: Centered below logo
- CTA Button: Below navigation
- Best for: Modern, elegant aesthetic, boutique practices
- Mobile: Stacks beautifully on small screens
Top Bar Feature
The optional top bar sits above your main header and displays important contact information. Enable it in Header Settings → Show Top Bar.
Top Bar Elements:
- Phone Number: Click-to-call on mobile devices
- Email Address: Clickable mailto link
- Business Hours: Chamber/office hours display
- Social Icons: Links to your social media profiles
Setting Up Top Bar:
- Go to Appearance → Customize → Header Settings
- Check “Show Top Bar”
- Fill in:
- Top Bar Phone: e.g., “(555) 123-4567”
- Top Bar Email: e.g., “info@yourpractice.com”
- Top Bar Hours: e.g., “Mon-Fri: 9AM-5PM, Sat: 9AM-1PM”
- Toggle “Show Social Icons in Top Bar” (requires social links in Social Media section)
- Click Publish
Sticky Header
The sticky header stays visible as visitors scroll down your page, improving navigation accessibility.
Features:
- Fixed position on scroll
- Smooth animation when scrolling
- Slightly shrinks for better space usage
- Performance-optimized JavaScript
Enable Sticky Header:
- Go to Appearance → Customize → Header Settings
- Check “Enable Sticky Header”
- Scroll on your site to see it in action
Tip: Sticky headers are great for long pages like blogs or service listings. They keep navigation always accessible.
Transparent Header
Create stunning hero sections with a transparent header that overlays your homepage background.
How It Works:
- Removes background color from header
- Text color adjusts for visibility
- Only applies to homepage (front page)
- Becomes solid when scrolling (with sticky header)
Enable Transparent Header:
- Go to Appearance → Customize → Header Settings
- Check “Enable Transparent Header”
- Make sure your homepage has a full-width hero section with background image
- Adjust hero section padding if needed
Best Practices:
- Use dark hero background images for white text
- Ensure logo is visible against background
- Test on mobile devices
- Consider uploading a light/white version of your logo
Header CTA Button
Add a prominent call-to-action button in your header to drive conversions (appointments, contact, etc.).
Customize CTA Button:
- Go to Appearance → Customize → Header Settings
- Check “Show Header CTA Button”
- Set CTA Button Text: e.g., “Book Appointment”, “Contact Us”, “Schedule Visit”
- Set CTA Button Link: URL where button should lead
- Internal page: “#appointment” or “/contact”
- External booking: “https://booking.yoursite.com”
- Click Publish
CTA Button Best Practices:
- Keep it short: 1-3 words maximum
- Action-oriented: Use verbs (Book, Schedule, Call, Contact)
- Make it obvious: The button stands out with accent colors
- Link to conversion: Point to your most important action
Responsive Design
All header layouts automatically adapt to mobile devices:
Mobile Features:
- Hamburger Menu: Touch-friendly menu toggle
- Full-Screen Overlay: Menu opens in clean overlay
- Top Bar Adjustments: Condenses on small screens
- Touch-Optimized: Larger tap targets for mobile
- Smooth Animations: Professional slide-in effects
Header Customization Checklist
- ✓ Choose header layout (Classic or Centered)
- ✓ Upload your logo in Site Identity
- ✓ Create primary navigation menu
- ✓ Configure top bar (optional)
- ✓ Enable sticky header for better UX
- ✓ Set up transparent header for homepage (optional)
- ✓ Add CTA button with compelling text
- ✓ Test on mobile devices
- ✓ Verify all links work correctly
Common Header Setups
Setup 1: Professional Classic
- Layout: Classic
- Top Bar: Enabled with phone and hours
- Sticky Header: Enabled
- Transparent Header: Disabled
- CTA: “Book Appointment”
- Best for: Established practices, multiple doctors
Setup 2: Modern Minimalist
- Layout: Centered
- Top Bar: Disabled
- Sticky Header: Enabled
- Transparent Header: Enabled
- CTA: “Schedule Visit”
- Best for: Solo practitioners, boutique clinics
Setup 3: Information-Rich
- Layout: Classic
- Top Bar: Enabled with all fields
- Sticky Header: Enabled
- Transparent Header: Disabled
- CTA: “Contact Us”
- Best for: Large practices, multiple locations
Troubleshooting
Logo Not Visible on Transparent Header?
- Upload a light/white version of your logo
- Increase logo size in Site Identity
- Choose darker hero background image
Top Bar Too Crowded?
- Remove less important information
- Consider moving social icons to footer
- Shorten hours text (e.g., “Mon-Fri: 9-5”)
Mobile Menu Not Working?
- Clear browser cache
- Check for JavaScript errors in console
- Disable conflicting plugins
Pro Tips
- First Impressions Matter: Your header is crucial – invest time in getting it right
- Keep It Simple: Don’t overcrowd the header with too many elements
- Test Everything: Click all links and buttons before going live
- Mobile First: Most visitors are on mobile – test thoroughly
- Update Regularly: Change CTA text for special promotions or seasons
- Monitor Analytics: Track CTA button clicks to measure effectiveness
With dSite Theme’s header customization system, you have professional-grade control over your site’s navigation. Experiment with different layouts and options to find what works best for your practice!