Header

Element name: header Purpose: Provide easy navigation and actions to the user throughout the application.

The header menu is a fully responsive reusable element that is used on every page of the Canvas template. You can find it nested inside a group at the top of the page called 'FloatingGroup Header'.

Mobile & Desktop versions of the header for a logged out user

When being viewed by a user that is not logged in to the application the header will display a logo, menu links, and CTA button for logging in or signing up to the application.

On a small screen the menu links and CTA buttons are shown in the dropdown menu when the menu icon is clicked

Mobile and Desktop versions of the header as seen by a logged in Admin user

When viewed as a logged in user the header will display a logo, a set of three icons (search, shopping cart, and notifications), and a profile image with a dropdown menu that includes links to the users profile account page, Admin portal (if an admin), and a log out action.

Editing the header

To customize the header to match your needs, you can make changes to the links visible to logged out users from the admin portal and to the actions available to your logged in users from the Bubble editor (see Header Elements below)

Editing from the Admin Portal

To set up the links visible to logged out users, go to your admin portal and navigate to the Header/Footer section from the left menu. From here you can add, edit, and delete menu links, change the display order, view both mobile and desktop previews, and set the destination links and icons for each option.

To change your logo navigate to Branding > Logos in the admin portal

Header Elements

Open the header reusable element in the Bubble editor to make substantive changes to your apps header menu. This reusable is quite complex so we'll go through all the visual elements and workflows and how they are used below!

Offline Notifier A

This element is from the AirDev plugin Offline Notify and monitors the internet connection of your users computer. If the connection goes offline it will display an alert letting the user know their connection has been interrupted.

Offline Notify banner indicating an offline status

Group portal menu

This group contains a single feather icon element and is only visible on a portal page when the width of the screen is ≤ 1111px. This element is used to show and hide the left side portal menu on smaller screens.

Portal page is simply a reference to a page that has a menu on the left side of the screen with content to the right of that menu. On tablets and phones this menu needs to be hidden for good usability so we use the Group portal menu element to allow the user to show and hide the menu on smaller screens.

Group Header

The Group header element contains all the main header menu elements including the logo.

Header logos are linked to the logo images uploaded dynamically through the admin portal and have conditions set for when the dark or light versions should be shown. We highly recommend not making changes to the logo elements unless you are proficient with the Canvas template.

Group Logo Desktop This element is used to display the logo on larger screens and is visible by default. It is hidden with the following conditions:

• Header's Portal page? (a custom state) is 'yes' and the page width is ≤ 1111px wide

• Header's hide logos? (a custom state) is 'yes'

• Hiding rule in responsive settings Parent width is ≤ 600px

Group Logo Mobile This element is used to display the mobile logo on small screens and is visible by default. It is hidden with the following conditions:

• Header's Portal page? (a custom state) is 'yes'

• Hiding rule in responsive settings Parent width is > 600px

The header element has custom state called 'Dark?' that indicates whether the color behind the logo image is dark or light. By default this is set to 'Dark? = no' which will show the dark logo. To manually show the light version of the logo, simply set this state to 'Dark? = yes' from the page actions.

Group placeholder responsive This element is used to shrink the distance between the logo groups and the element to the right when the screen is resized smaller. DO NOT DELETE

Group Desktop Menu Items Contains the HTML element used to display the menu links setup in the admin portal. We highly recommend you do not edit this group.

Group Mini Menu Holder The element contains two transparent overlay buttons and one icon and is visible only when the user is not logged in. These buttons are used to show and hide the dropdown navigation menu on small screens.

Group Loggedout As it sounds, this group is also shown only when the user is not logged in and the parent width is > 1009px. There are two buttons in the group:

• Button Log in

• Button Sign up

Group Loggedin This element is shown only when the user is logged in and contains the following nested groups. If you do not need one or more of these elements, hide them at the group level listed below.

• Group profile

  • Contains two transparent overlay buttons for opening and closing the GroupFocus Mini element, a round user profile image, and an ionic icon.

  • Note: It is unlikely you would ever want to hide this group as the functionality provided is integral to the performance of your Canvas template

• Group Notifications icon

  • Contains the menufocusgroup_notifications reusable element.

• Group Shopping cart icon

  • Contains the menufocusgroup_shoppingcart reusable element.

• Group search icon

  • Contains the menufocusgroup_search reusable element.

Quick tip: You can use the button element with a transparent background as an overlay on another element to provide an accessible place for the user to click.

popupsreusable A A reusable containing the signup/login popup, HTML loading screen, and a generic message popup

HTML Usersnap code This is a feature we use with our clients for testing. You can turn this off by setting the field 'Usersnap off?' on the Website object to 'yes' or it can be deleted if you do not think you will be using it.

GroupFocus Mini

This is a Group Focus element that contains the dropdown menu for all the actions in your application. There are three main sections in this menu:

• Group Loggedout Menu

  • Shown only to users who are not logged in and by default contains the following buttons and actions

    • Signup

    • Login

  • Also contains three placeholder buttons.

• Group Logged in

  • Shown only to logged in users and by default contains the following buttons and actions

    • Admin portal - shown only to admin users

    • My account

    • Log out

  • Also contains seven additional placeholder buttons.

• Group Pages list

  • Shown only to users who are not logged in

  • Contains the menu links set up in the Admin portal

Placeholder button simply refers to a fully designed button element that has been hidden by default but can be unhidden and used as needed in your application.

Header states

The header reusable uses four states (states are often used in reusable elements to pass data between the reusable element and the page):

• Dark? yes / no state - If Dark=yes, then the default logo, favicon, button, and link color in the header will be white. If Dark = no, then the default logo, favicon, button, and link color in the header will be the app's default color. Please see an example of this below on the index page:

• If you would like to change the background color when the header's "dark" state is "yes" so that it is not transparent, please modify this conditional on the Group Header element:

• Portal page? yes / no state - When you add a portal page to your app via Canvas Pages, there will be a workflow on that page for When page is loaded, set header's portal page? to "yes". This will hide the favicon (Group Logo Mobile) and show the portal menu group (Group portal menu) in the header on mobile.

The portal menu will replace the favicon on mobile when you set the header state for Portal page? to "yes"

• Show portal menu? yes / no state - On mobile (when on a portal type page), you can click on the portal menu in the upper left corner to open the sidebar menu. This is achieved by setting the state of Show portal menu to yes.

• Search page? yes / no state - When you add a portal search page to your app via Canvas Pages, there will be a workflow on that page for When page is loaded, set header's search page? to yes. This will hide the favicon (Group Logo Mobile), show the portal menu group (Group portal menu), and change the hamburger menu icon to a search icon in the header on mobile.

Key Workflows

The header will come will various custom workflows that you can trigger from the page. You can do so by going to the workflow tab in the Bubble Editor and selecting Custom workflow > Trigger a custom workflow from a reusable element > Select header from the dropdown and the custom workflow name

The popupreusables reusable element (which includes the Signup/Login reusable popup) is included in the header, and can be triggered from the "show loader popup", "show message popup", "show login popup" and "show signup popup" custom workflows.