Logo settings

Learn how to change logo and logo height


Logo can be changed from below code inside the src/components/LogoBox.tsx file.


  <NavbarBrand>
    <img class="light-mode-item navbar-brand-item" src={logo} alt="logo">
    <img class="dark-mode-item navbar-brand-item" src={logoLight} alt="logo">
  </NavbarBrand>
Logo height and padding:

By default logo height is 40px. To change logo height, You should change the value in $navbar-brand-height in _variables.scss file as per your need. You can also change sticky logo height, responsive logo height and logo padding to set header height from _variables.scss file as per your need. Please note that if you increase logo height, your header height will increase automatically. You don't need to change your header height manually.