Pineapple Builder

Header Menu


The header is the top section of your website and appears on all subpages, and that’s exactly why it’s essential to have all the necessary information easily accessible for your customers. Let's take a look at the steps.



First, to edit the header, navigate to the Editor and hover over the header element. Then click Edit Header Component.


edit header
edit header


Website Title and Icon


In the first tab, you can add your website title. For the icon, you can add your own or generate one using AI. Configure the height, width, and link for the icon. Typically, clicking the icon should navigate to your homepage (index page). Don’t forget to add an image alt text for better SEO.


header settings
header settings


Buttons


Next, you can add buttons to your header. You have the option to add one or two buttons, or remove them entirely. These buttons can be configured further. For instance, you could add a "Buy" button. To track clicks and conversions, add analytics tags as outlined in our Get Started documentation.


header settings_buttons
header settings_buttons


Color Variants and Links


Configure additional color variants for your header. Add links to either external websites or internal pages by selecting the desired page from your site. If you're unsure of the page name, you can copy the slug from the page URL and paste it here.


Styling and Positioning


Adjust the alignment, text colour, and background to match your site’s design. You can also fix the header’s position on the page to create a more distinct separation from the rest of the content. Custom styles and header sizes can be configured to suit your preferences.


Header List


The header list includes the navigation items visible on your header. It’s simple to add new items, but keep in mind that space is limited. Aim for around four to five items to avoid overcrowding. You can nest items to create submenus, rearrange the order, and add icons or descriptions.

For example:

  • Shop: Link to your shop page.

  • Products: Nest under "Shop" and link to specific product categories.


page list_settings
page list_settings


Tips and Best Practices


Here are some tips to get the most out of your header configuration:

  • Be Specific: Ensure your title and button labels are clear and descriptive.

  • Experiment: Try different styles and configurations to see what looks best.

  • Stay Organized: Limit the number of header items to avoid clutter.

Pineapple Builder - AI Website Builder Create Docs