To update the logo, copy your logo files to the themes/hugo-paradigm/static/images/logo/ folder. You can simply overwrite the existing files.

Hugo Paradigm requires 4 logo variations for mobile and inverted (white) states.

  • images/logo.svg Desktop logo
  • images/logo-mobile.svg Mobile logo, typically the smaller icon version of your logo “the mark”
  • images/logo-invert.svg Desktop logo in white, for use when the header is transparent
  • images/logo-invert-mobile.svg Mobile logo in white

If you want to use different filenames for your logo you can update the path to the logos in the data/layout.yaml

There is also a range of options to display text next to the logo with or without the logo image.

# data/layout.yaml

  text: Paradigm
  textColor: ''
  showLogoTextOnDesktop: true
  showLogoTextOnMobile: false
  showLogoImageOnDesktop: true
  showLogoImageOnMobile: true
  logoDesktop: "images/logo/logo.svg"
  logoDesktopHeight: 32
  logoMobile: images/logo/logo-mobile.svg
  logoMobileHeight: 32
  logoDesktopWhite: images/logo/logo-invert.svg
  logoMobileWhite: images/logo/logo-invert-mobile.svg

Logo Sizing

Desktop Logo The desktop logo is resized to a height of 23px with an automatic width. So common size logos that are square or rectangle (horizontal) should work well.

Mobile Logo The mobile logo is resized to a height of 30px with an automatic width. It’s recommended to use a square (icon) logo for mobile.

Resizing Logos

We’ve tried to support the most common logo sizes, but depending on your logo dimensions it may not fit neatly into the header. You can directly edit the height and width of the logos in the /layouts/partials/logo.html partial.