Header
Last updated
Last updated
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'.
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
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.
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)
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
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!
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.
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.
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.
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.
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.
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.
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.
