Header Navigation

Advanced techniques and workflows for working with HBStack, including optimization strategies, debugging tips, and productivity enhancements.

HbStack Header Navigation

• The header by defualt is not shown unless a layout is used that is designed to show it. The header contains the following elements:
  • Logo ( A Site logo)
  • Title ( The title of the site)
  • Navigation links ( Links to different sections of the site)
    • These links are present in Menus
  • Social media icons ( Links to social media profiles)
  • Search bar ( A search input field)

Header Settings

• The header settings can be configured in eihter the hugo.ymal of params.yaml file.
• The following are few settings:

 1hb:
 2  header:
 3    brand: PN # the brand name, leave it empty to use site's title.
 4    logo_bg: '#712cf9' # logo background color, used by logo with transparent background.
 5    # see https://hbstack.dev/en/docs/modules/socials/.
 6    socials:
 7      github: hbstack
 8      # twitter: razonyang
 9      rss: true
10      mastodon: https://techhub.social/@hbstack
11  footer:
12    # see https://hbstack.dev/en/docs/modules/socials/.
13    socials:
14      _color: true # when false, remove the color of social icons.
15      github: hbstack
16      twitter: razonyang
17      rss: true
18      mastodon: https://techhub.social/@hbstack

FAQs