Buy now
Buy now

What are you looking for?

Use our live search form to get specific articles of documentation.

Uploading Logo

In the Mou template, there are 5 locations to use the Brand Logo.

  1. Header
  2. Footer
  3. Preloader
  4. Extra Info Sliding Bar
  5. Header Mini User Login

✨ 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 src="assets/images/logo.svg" alt="logo">
  </a>
</div>

Footer Logo

<div class="footer-logo mb-30">
  <a href="index.html">
    <img src="assets/images/logo.svg" alt="logo">
  </a>
</div>

Preloader Logo

	<!-- Preloader -->
	<div class="loader-mask">
	  <div class="loading text-center">
	    <div class="site-logo">
	      <img src="assets/images/logo.svg" alt="">
	    </div> ...
	  </div>
	</div>
	<!-- Preloader end -->

Extra Info Sliding Bar

<!-- Slidingbar Logo -->
<div class="slidingbar-logo mb-40">
  <a href="index.html">
    <img src="assets/images/logo.svg" alt="logo">
  </a>
</div>

Header Mini User Logo

<div class="account-modal-logo text-center">
  <img src="assets/images/logo.svg" alt="">
</div>

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 {
    max-width: 120px;
    max-height: 24px;
    height: 24px;
}

Footer Logo

.footer-logo img {
    max-width: 120px;
    max-height: 24px;
}

Preloader Logo

/* ------------------------------
    3. Preloader
------------------------------ */
.site-logo img {
    max-height: 30px;
}

Sliding bar Logo

.slidingbar-logo img {
    max-width: 120px;
    max-height: 24px;
}

Mini Account Logo

.account-modal-logo img {
    max-height: 30px;
}