How to make the logo bigger on all screen sizes?

hackermade

Hi there, I noticed that my logo was too small, so I dropped it to Photoshop and I made it bigger. When I reuploaded and added it to the template I noticed again that although the actual sizes of the images were bigger the logo had the same sizes.

dominic

Hi hackermade,
You can go to the Dashboard > System > Site Template Styles > Your template > Layout settings > Edit header block and replace with the code:

<!-- HEADER BLOCK -->
<header id="t4-header-wrap" class="t4-header header-layout-1">
  <div class="t4-header-inner">
  	<div class="container">
	    <div class="row no-gutters d-flex align-items-center flex-nowrap">
				
				<div class="col-5 col-lg-3 t4-logo-header d-flex align-items-center">
					<jdoc:include type="element" name="offcanvas-toggle" />
	        <jdoc:include type="element" name="logo" />
	      </div>

	      <div class="col-2 col-lg-7 t4-megamenu-wrap d-lg-flex justify-content-center col-xl-8">
	        <div class="t4-navbar">
	          <jdoc:include type="element" name="megamenu" />
	        </div>
	      </div>
	      
	      <div class="col-5 col-lg-2 t4-header-right d-flex justify-content-end align-items-center">
	      	<jdoc:include type="element" name="theme-toggle" />
	        
	        <jdoc:include type="element" name="megamenu-toggle" />

	        <div class="head-search">
	          <jdoc:include type="modules" name="head-search" />
	        </div>
	      </div>
	    </div>
	  </div>
  </div>
</header>
<!-- // HEADER BLOCK -->

Then add the following CSS code to the Tools > Custom CSS:

.navbar-brand .logo-img {
  max-height: 80px;
}

Provide the admin account if you still this issue.

hackermade

Hi and tanks for the reply, the header block which is the first one?

dominic

Hi hackermade,
Yes, you can edit header-1 block. Give me the admin account if you still face this issue.