Add a Menu button to your website menu

Add a call to action button to your website header using a Menu button, increasing the probability of visitors clicking the button.

This button shows up on your header across your website. The position of this button depends on the header layout you choose, whereas on mobile it always displays inside the menu icon below the menu items.

Pixpa gives you the option to show any page that you want to highlight in the header as a Menu Button. You can always choose to show or hide it from your website header.

In this article:

• Add a menu button
• Menu button example

Add a Menu button

• From the Dashboard (1) of the studio, click on the Website (2) section.

• Click on the Options (3) tab where you will see the option to customize the Menu Button (4).

Alternatively, you can use Pixpa’s search option to navigate to the Menu button section.

• Enter menu button (1) in the Search Bar.
• You will see the related results.
• Click on the Menu Button – Website Header option (2) under Studio Links. 

On clicking on it, you would see a page where you would be able to manage the Menu Button. You can choose to show/hide the menu button, link it with a page, and more.

1. Show Button – Enable/Disable Menu Button on the website.
2. Link – Click on the Link Builder icon to choose the page or link you want to connect with the Menu Button.
3. Label – Specify the Label for the Menu Button.
4. Button Size – Choose your Button size from Small, Medium, or Large.
5. Target Window – Set the target window for the menu button to open in the Same Window or a New Window.
6. Button Style – Choose the button style to be the default (set in the Buttons and Links tab of the Design section), Solid, Outline, or a Text Link.
   • Default: Follows your site’s theme settings.
   • Solid: A bold, filled button.
   • Outline: Transparent background with a border.
   • Text Link: Simple, clean text-only style (no button box).
7. Button Color – Customize the color scheme of the button:
   • Default: Inherits theme settings.
   • Invert: Reverses the button text/background colors.
   • Custom: Enables you to choose specific text and background colors.
8. Button Text – If using Custom button color, you can set the text (label) color from here.
9. Button Background – Also available under Custom, this sets the button’s background color. Pair this with text color for maximum readability and style.
10. Button Icon – Add an icon next to your button label. You can choose from various icon options.
11. Layout – Control the placement of the icon in relation to the label. Available layout options are:
    • Label + Icon: Text appears first, followed by the icon.
    • Icon + Label: Icon appears first, then text.
    • Label + Icon (Wide): Text and icon arranged with more padding, suited for wider buttons.
    • Icon + Label (Wide): Icon first, wider padding layout.
12. Icon Color – Choose the color of button icon. You can either set it to the Button Text color or the Brand color.

Example of Menu Button on a website

Have a look at the demo Menu button on a site.