We provide extensive control of your logo, in both light and dark mode, desktop and mobile. We support both an image logo and text or both.
# config.yml
logo:
logo_text: "Advance"
logo_image_desktop: images/logo/logo.svg
logo_image_mobile: images/logo/logo-mobile.svg
logo_image_desktop_invert: images/logo/logo-invert.svg # used on transparent header and when in dark mode. Normally a white version of the logo.
logo_image_mobile_invert: images/logo/logo-invert-mobile.svg # used on transparent header and when in dark mode. Normally a white version of the logo.
logo_image_desktop_height: "34px"
logo_image_desktop_width: "34px"
logo_image_mobile_height: "34px"
logo_image_mobile_width: "34px"
show_logo_image_on_mobile: true
show_logo_image_on_desktop: true
show_logo_text_on_mobile: false
show_logo_text_on_desktop: true
logo_text_font_size: "24px"
logo_text_font_weight: "500" # 300, 500, 700
To update the logo, copy your logo files to the images/logo folder. You can simply overwrite the existing files.
There are 4 logo variations for mobile and inverted (white) states.
images/logo/logo.png Desktop logoimages/logo/logo-mobile.png Mobile logo, typically the smaller icon version of your logo “the mark”images/logo/logo-invert.png Desktop logo in white, for use when the header is transparentimages/logo/logo-invert-mobile.png Mobile logo in whiteIf you want to use different filenames for your logo you can update the path to the logos in the config.yml. You can use .svg or other file extensions.
You can also use a text only logo, this is great for blogs and other personal sites that dont really have an official logo. Update the logo_text property and set show_logo_text_on_mobile: true or show_logo_text_on_desktop: true (or both!)
You can enable both image and text at the same time. And mix and match the combinations on mobile/desktop. I often like to have the image and text on desktop, and just the image (a square icon) on mobile.
Adjust the text font size and weight by adjusting logo_text_font_size: "24px" and logo_text_font_weight: "500"
You can change the font family and color under other sections of the config.yml
# config.yml
fonts:
...
logo: "Lato"
colors:
# light
...
logo_text: "#2b3af7"
# dark
...
logo_text_dark: "#ffffff"
Designed and built by Rob Austin @ausrobdev in Brisbane, Australia. We stand on the shoulders of giants: Hugo | Jekyll