header
Last updated
Was this helpful?
Last updated
Was this helpful?
We put the standard reusable header on nearly every page, which is fully-responsive, and includes a lot of helpful features:
Sign up or log in from the header
Click on menu item links to navigate to a different page
Click on the logo or favicon to return to the homepage from any page
Trigger custom workflows to show different popup types
The header uses (please ensure you have the Feather Icons plugin installed in your Bubble app).
Please note that you will not be able to preview the feather icons in the Bubble editor. However, you can preview the icons by going . Once you find the icon you want to use:
Copy the icon name
Go to the bubble editor and click on the feather icon you want to change
Click on type dropdown
Open browser search function (command + f on mac or control + f on windows)
Paste the icon name and click enter
Select the icon name from the feather icon type dropdown
By default, we've included three placeholder feather icons in Group Loggedin in the header. These icons will only be visible when a user is logged into the app. You may use these icons as links to navigate to other pages in your app.
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:
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.
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
Portal page? yes / no state - When you add a 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.
Search page? yes / no state - When you add a 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 menu item links in Group Desktop Menu Items and GroupFocus Mini should trigger the same custom workflow for that menu item #. You of navigation options when someone clicks on their name.
The (which includes the 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.
