All Collections
Website
Design and Customization
Customizing your Website's menu and header
Customizing your Website's menu and header
Pixieset Team avatar
Written by Pixieset Team
Updated over a week ago

Your Pixieset Website's menu plays an essential role in helping your visitors navigate your pages. This article will go over how to organize and customize the content and appearance of your Website's menu and header.

If you'd like to learn about editing your Website's footer area instead, click here.


On this page:

Editing your Website's menu

You can easily edit your Website's menu by modifying the corresponding pages in your left-hand Builder Panel's Site Menu.

Adjusting the menu order

You can change the order of your header menu by rearranging your Site Menu:

  1. From your Builder Panel, click and drag your pages into the order you'd like them to appear in your header menu. Your header menu will automatically reflect the changes.

  2. Once you are done re-ordering your header menu, click Publish to push the changes live.

Adding a new page or link to your menu

You can display a new page on your Website's menu by adding it to your Site Menu:

  1. From your Builder Panel, click +Add Page and choose the applicable option from the following: Page, Folder, Link, or Blog.

  2. Once created, your new menu item will appear as the last navigational item in your header menu. You can easily adjust its position by adjusting the order of your Site Menu.

  3. Click Publish to push your changes live.

For more information on adding pages and folders to your Website, click here. If you'd like to add a blog to your Website, check out our guide here.

Adding a dropdown menu to your menu

You can add a dropdown menu to your Website using our Subpage feature! Subpages are pages or links that reside under a parent page or folder. A subpage will only appear when a visitor hovers over its parent page or folder in your Website's menu.

To turn an existing page or menu link into a subpage:

  1. From your left-hand Builder Panel, click on the applicable page/link, and drag it directly under the page/folder you'd like it to be a subpage of.

  2. Hover over the applicable page/link, and click ••• (More) > Subpage.

  3. The selected Page will then instantly become a subpage of the existing parent page or folder above it. This process can be repeated to add multiple subpages to the same dropdown menu.

You can turn a subpage back into a main page by clicking ••• (More) > Mainpage.

Hiding a page from your menu

If you'd like to remove a page from your Website's menu but still keep it available through a direct link, you can do this using the Hide from Menu feature:

  1. From your left-hand Builder Panel, hover over the applicable page, and click ••• > Hide from Menu. This will immediately remove the page from your menu, while still leaving it visible in your Pages panel.

  2. Publish your Website to push the change live to your published site.

If you want to add a hidden page back to your menu, simply find the page in the Not in Menu section, and select ••• > Show on Menu.

If you prefer to remove the page from your published Website entirely, while keeping it available only to you in the Website Builder, you can set the page's status to Offline. For more information on this option, please see here.

Customizing your Website's menu and header with Design Options

You can further customize your Website's menu and header through the Navigation and Logo & Branding sections in your Builder Panel's Design tab.

Changing your menu's style

You can easily update the look of your Website's menu by changing its menu style! Each theme comes with a variety of available menu designs to complement your style.

  1. From your Builder Panel, go to Design > Navigation.

  2. Under Menu Style, click to choose your preferred menu design.

  3. Click Publish to push your changes live.

Enabling a Sticky Header for your Website's menu

Some themes, such as Hudson, Edward, and Canvas, support a sticky header option, which keeps your menu at the top of the browser page, even when visitors scroll down your Website.

By default, the sticky header is disabled but you can easily enable it in your Design Options:

  1. From your Builder Panel, go to Design > Navigation.

  2. Under Sticky Header, toggle the button on.

  3. Click Publish to push your changes live on your published Website.

Adding a Header Button (Milo, Nordik, Sierra & Skye)

If you’re using either the Milo, Nordik, Sierra or Skye theme, there is an option to add a Call to Action button in your header. This can be used to highlight a particular page or add an external link. To access this setting while using Milo or Skye:

  1. Open the Design Tab

  2. Click Navigation.

  3. Turn on the Header Button toggle and set up the details. For any internal pages, you can simply enter the URL Slug (eg: /contact) and for any external links, you can enter the full URL.

Changing the logo in your Website's header

Your logo will appear in the header area of every page of your Website, and visitors will be able to click directly on it to be directed back to your Website's homepage.

By default, your Pixieset Website will use text for your logo. You can change this text or even upload your own logo image by going to Design > Logo & Branding.

For more information on adding a logo or alternative logo to your Website's header, please click here.

Changing your Website's header layout

Some website themes allow you to edit your Website's header layout, and this is an easy way to update the appearance of your Website's header area! This is done on a per-page basis, which means that you can use a different header layout on each page of your Website.

To change a specific page's header layout:

  1. While viewing the specific page in your Website Builder, hover directly over the page's header area.

  2. In the quick options that appear in the top right hand corner of the page's header, click Layout to shuffle between the available layout options.

  3. If you chose a header layout design that includes an image or image slider, you can replace it with your own image by clicking directly onto the placeholder image. Then, in the left-hand Builder Panel, you will see the option to upload your own image.

  4. Once you have updated your Website's header layout, click Publish to push your changes live.

Did this answer your question?