BugWP logo BugWP
Back to Community
Home / Community / Theme → Hestia

How to Customize Your Hestia Theme Logo: Size, Link, and Alignment

16 threads Sep 10, 2025 Theme → Hestia

Content

Many Hestia theme users want to customize their logo's appearance and behavior to better fit their website's design. This is a common request, as the default logo settings might not always align with specific branding needs. This guide covers the most frequent logo-related customizations, from simple CSS tweaks to more advanced modifications.

Common Logo Customization Requests

Based on community discussions, users most often want to:

  • Change the logo's size
  • Modify the URL the logo links to
  • Adjust the logo's alignment in relation to the navigation menu
  • Ensure the logo displays prominently on mobile devices

How to Change Logo Size in Hestia

The Hestia theme doesn't include a built-in option for logo size adjustment in the customizer. However, you can easily add custom CSS to achieve this:

  1. Go to Appearance → Customize → Additional CSS
  2. Add the following code:
.navbar .navbar-header .navbar-brand img {
    width: 200px !important;
    max-height: 200px !important;
}

Adjust the pixel values (200px) to your preferred dimensions. The !important declaration helps ensure these styles override any default theme styles.

How to Change the Logo Link

By default, the Hestia logo links to your WordPress site's homepage. If you need to link to an external URL instead (such as your main company website), you'll need to modify the theme files. Important: Always use a child theme when making direct code changes to preserve your modifications during theme updates.

The method for changing the logo link has evolved with theme updates. Previously, users modified template-tags.php, but this file no longer exists in current Hestia versions. The logo output is now handled in inc/views/main/class-hestia-header.php.

To modify the logo link in a child theme:

  1. Create a child theme if you haven't already
  2. Copy the relevant header template files from the parent theme to your child theme
  3. Locate the logo output code, which typically looks like:
<a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>">

Replace home_url( '/' ) with your custom URL, ensuring you maintain proper PHP syntax and escaping:

<a class="navbar-brand" href="<?php echo esc_url( 'https://your-custom-url.com' ); ?>">

How to Center the Logo and Menu

Some users want to create a layout where the logo is centered with menu items distributed on both sides. While earlier Hestia versions required custom CSS for this, newer versions include a layout option:

  1. Go to Appearance → Customize → Header Options → Layout
  2. Select the centered layout option if available

If this option isn't available in your version, or if you need more precise control, you may need additional CSS adjustments.

Troubleshooting Common Issues

Logo Not Resizing

If your logo isn't responding to CSS changes:

  • Ensure you're using the correct CSS selector: .navbar .navbar-header .navbar-brand img
  • Check that you've added the !important declaration
  • Clear your browser and website cache after making changes

Navbar Width Issues After Logo Resizing

Increasing logo size can sometimes affect the navbar layout. If the navbar becomes too wide, you may need additional CSS to adjust its width or the overall header layout.

Logo Not Visible on Mobile

If your logo doesn't appear prominently on mobile devices, consider adding a larger logo version specifically for mobile screens using CSS media queries, or explore options to display the logo in the homepage content area instead of just the header.

Conclusion

While Hestia doesn't include all logo customization options in its visual customizer, most common changes can be achieved through CSS or careful modification of theme files using a child theme. Always test changes on a staging site first, and consider that some modifications might require updates when the theme is updated.

For more detailed guidance, the Hestia documentation at docs.themeisle.com contains additional information about theme customization options.

Related Support Threads Support