Nijhum template contains 2 types of logo variation. One for the Dark mode and the other for the Light mode.
In the Nijhum template, there are 3 locations to use the Brand Logo.
- Header
- Coming Soon Page
- Preloader
✨ Logo File Format
For the best appearance, it’s recommended to use .svg format for the logo. Also, you can use other formats as well, e.g. .png, .jpg, .gif
Logo HTML Markup
Header Logo
<!-- Site Logo -->
<div class="nav-logo">
<a href="index.html">
<img class="dark-version" src="assets/images/logo-dark.svg" alt="logo">
<img class="light-version" src="assets/images/logo-light.svg" alt="logo">
</a>
</div>Coming Soon Page Logo
<!-- Site Logo -->
<div class="nav-logo">
<a href="index.html">
<img src="assets/images/logo-dark.svg" alt="logo">
</a>
</div>Preloader Logo
<!-- Preloader -->
<div class="loader-mask">
...
<div class="preloader-site-logo">
<img src="assets/images/logo-dark.svg" alt="">
</div>
...
</div>
</div> <!-- Preloader end -->You can change the logo width and height by editing the main CSS file (style.css).
Below is the CSS code for all logos.
Header Logo
.nav-logo img {
width: 115px;
max-width: 160px;
}
.is-sticky .nav-logo img {
width: 90px;
}Coming Soon Page Logo
.nav-logo img {
width: 115px;
max-width: 160px;
}Preloader Logo
.preloader-site-logo img {
max-width: 130px;
margin: 0 auto;
}