Skip to main content
Navigation management on the Butternut platform allows you to control how users move through your site and how your brand is represented at the top and bottom of every page. These settings are primarily managed through the Header and Footer icons in the website editor’s sidebar.

​
Customising the header (navigation bar)

The header serves as your website’s primary roadmap. You can tailor both the functional links and the visual layout to match your brand. You can:
  • Edit existing link text and URLs
  • Add new navigation items
  • Remove navigation items
  • Reorder items via drag-and-drop
For complex site structures, the editor supports multi-level dropdown menus.

​
Logo configuration

Within the header panel, you can upload a logo and configure:
  • Position: Left, Centre, or Right
  • Size: Small, Medium, or Large
  • Click destination: Set to the homepage by default

​
Header style and behaviour

  • Layout: Choose from Centred, Left-aligned, or Split layouts.
  • Sticky behaviour: Enable a sticky header to keep navigation fixed to the top of the screen while users scroll.
  • Appearance:
    • Background: transparent or solid colour
    • Borders: toggle top/bottom borders
    • Spacing: adjust padding to change header height

​
Mobile optimisation

You can configure:
  • The hamburger menu style (Slide-in, Dropdown, or Full-screen)
  • The breakpoint at which the mobile menu appears
The footer provides essential closing information and secondary navigation for visitors.

​
Content and taglines

You can edit:
  • Brand tagline
  • Copyright text
  • Company details (physical address, phone number, email)
You may also upload a dedicated footer logo, which can differ from your header logo. The footer supports a 1–4 column layout. You can:
  • Organise links into groups (for example, “Services” or “Legal”)
  • Customise the text and destination for each link in each column

​
Visual layout

Beyond columns, you can adjust:
  • Overall alignment (Left, Centre, Right)
  • Background colour
  • Vertical spacing (padding)

​
Connecting social media profiles

Social icons are managed in the Footer editor so they appear consistently across your site.

​
Icon selection

You can add icons for platforms including:
  • Facebook
  • Twitter
  • Instagram
  • LinkedIn

​
Styling

You can customise:
  • Icon style (outline or filled)
  • Icon colour (to match your brand palette)

​
Linking

Paste your profile URLs into the corresponding platform fields to make the icons functional.

​
Analogy for navigation management

Think of your header as the main signpost at the entrance of a building: it needs to be clear, easy to read, and sometimes it “follows” you (sticky) as you walk down the hall so you never feel lost. The footer is like the information desk at the exit: it provides the fine print (copyright details), a map to other rooms (multi-column links), and business cards (social media icons) that visitors can take with them as they leave.