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-mobile.svgMobile logo, typically the smaller icon version of your logo “the mark”
images/logo-invert.svgDesktop logo in white, for use when the header is transparent
images/logo-invert-mobile.svgMobile logo in white
If you want to use different filenames for your logo you can update the path to the logos in the
There is also a range of options to display text next to the logo with or without the logo image.
# data/layout.yaml logo: 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
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.
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