The custom logo displayed in the navigation bar of your website header can be modified through the Customizer. To display all available customization options, please navigate to Appearance > Customize > Site Identity > Logo.
- Find the Logo option in the Customizer to upload your logo. The Customizer will inform you about the recommended size.
- Click on Select logo and either select your logo from your Media Library or upload the image to the Media Library, then click Select and Crop Image.
- Crop the image to your liking or skip cropping if you have already prepared your image matching the size recommandation before uploading (recommended).
- Finally, don’t forget to enable the Display logo checkbox to display your custom logo in the navigation bar.
Note : If the Logo field is left empty while the Display logo checkbox is enabled, your theme will show the default logo from your demo.
Increase logo size on mobile and tablet
On mobile and tablet devices, a rectangular logo may appear too small. To address this, simply modify the max width in the provided snippet to appropriately enhance the logo size.
1 2 3 4 5 6 7 8 9 10 |
/** * Increase the logo size on mobile */ @media (max-width: 991px){ .main-navigation .navbar-brand__logo img { height: 50px !important; max-height: none !important; max-width: none !important; } } |