How to add your own logo
Probably one of the first things you'll change on the new template is the logo. Here how you do it.
Using a logo in a smart header
Using a logo in a smart header
By default, Ascension uses a component called a smart header. This will essentially duplicate itself on scroll, allowing you to have a main header when the scroll position is at the very top and another fixed header when scrolling up and down. The code for that smart header looks like this:
<!-- Main header. -->
<header class="grid sm-center lg-distribute middle main" data-smart-header>
<div class="cell shrink">
<a href="landing-1.html" class="hide-on-cloned"><img src="assets/img/placeholder/placeholder-logo-light.svg" alt="Logo"></a>
<a href="landing-1.html" class="show-on-cloned"><img src="assets/img/blank.png" data-src="assets/img/placeholder/placeholder-logo-dark.svg" class="lazyload" alt="Logo"></a>
</div> <!-- end .cell -->
<nav class="cell shrink menu hide-sm show-lg" data-internal-nav>
<ul>
<li><a href="#features-v1">Features v1</a></li>
<li><a href="#features-v2">Features v2</a></li>
<li><a href="#testimonials-v1">Testimonials v1</a></li>
</ul>
</nav>
</header> <!-- end header.main -->
With this type of header, you have the option to display a different logo on the cloned header (the one visible when you scroll down). For example, if you look at demo-1, you'll see that the logo is white when looking at the top header but changes color when we scroll down.
This is very easy to achieve. Simply use two logos, like this:
<a href="landing-1.html" class="hide-on-cloned"><img src="assets/img/placeholder/placeholder-logo-light.svg" alt="Logo"></a>
<a href="landing-1.html" class="show-on-cloned"><img src="assets/img/blank.png" data-src="assets/img/placeholder/placeholder-logo-dark.svg" class="lazyload" alt="Logo"></a>
Information: In this example, the second logo uses a blank image for the src attribute and an additional data-src attribute for the actual image path. This is for lazy loading the second logo image. I recommend you do the same for the secondary logo. You can read more about lazy loading here.
Use the classes of hide-on-cloned and show-on-cloned to determine which logo will be displayed on which header. No additional classes are needed. Just make sure you wrap the image in an anchor tag so that clicking the logo will point to a page.
Note: A second logo is not always necessary. If you want to display the same logo on both headers, simply use a single image, like on the example below.
<a href="landing-1.html"><img src="assets/img/placeholder/placeholder-logo-light.svg" alt="Logo"></a>
All you have to do now is replace the image paths for the logo with your own. I recommend you place the logo images in assets/img/ and use .SVG files. These will scale nicely on any screen and are widely supported by browsers. With that said, any image format will work.
Using a logo in a regular header
Regular headers will have normal positioning, meaning they will stay put even when scrolling up and down. In this case, we need a single logo image. Use the same method as above: one image inside an achor tag. Just make sure you respect the rest of the markup. For example, here's how a regular header will look like:
<header class="grid center middle main no-nav">
<div class="cell shrink">
<a href="landing-4.html"><img src="assets/img/placeholder/placeholder-logo-light.svg" alt="Logo"></a>
</div> <!-- end .cell -->
</header> <!-- end header.main -->
Now, just like above, simply replace the logo path with your own. The same recommendations for path and image format apply.
A note on logo sizes
I recommend you don't make your logo too big. Something between 150-200px wide and 40-70px high should do the trick nicely. This recommendation comes from a user experience point of view. From a technical point of view, the logo can be as tall and wide as you want. The menu positioned on the right will always be vertically centered with the logo, no matter how tall the latter is.