To change the logo displayed on your site, update the following code within the header container of your HTML:

<!-- Logo START -->
<a class="navbar-brand" href="index.html">
	<img class="navbar-brand-item" src="assets/images/logo-light.png" alt="Logo">
</a>
<!-- Logo END -->

Adjusting logo height and padding:

By default, the logo height is set to 40px. To customize the logo height and padding, follow these steps:

1. Open _variables.scss file locate the in template/assets/scss.

2. Modify Logo Height for different instances like, logo, sticky logo and mobile logo: Change the value of height to your desired logo height. This will adjust the height of the logo across different screen sizes.

	$navbar-brand-height: 40px; // Adjust the height as needed;
	$navbar-brand-height-sticky: 35px; // Adjust the height as needed;
	$navbar-mobile-brand-height: 30px; // Adjust the height as needed;
	

Changing the logo in dark mode

You can show or hide any elements in dark or light mode. Use .light-mode-item for elements that you want to show in light mode only. Use.dark-mode-item for elements that you want to show in dark mode only. See below example that we have used for the theme logo.

<a class="navbar-brand" href="index.html">
	<img class="light-mode-item navbar-brand-item" src="assets/images/logo.svg" alt="logo">
	<img class="dark-mode-item navbar-brand-item" src="assets/images/logo-light.svg" alt="logo">
</a>