Skip to content

7. Header

Jump to bottom
Jessglynne edited this page Nov 15, 2021 · 1 revision

Header

Choose whether you want to display the header or not. If enabled then you have the following options:

  1. Module Position: Provide the position where you want to display the header at frontend.
  2. Header Mode: Provide the position where you want to display the header at frontend.

If you choose Horizontal Menu Mode then you have the following options: a). Horizontal Menu Mode – Here you have 3 different modes:

  • Left– The logo and the menu items are positioned to the left and the header block is to the right
  • Center– Here the logo is to the left, menu items in the center and header block is on the right
  • Right– Here the logo is to the left, the menu items and header block are to the right

b). Header Block 1– Choose what you want to display in the header blocks from the given options in the dropdown that is:

  • Blank– Leave a blank space
  • Module Position– Publish a module whose position you can choose in the next option Block Position 1
  • Custom HTML– You can also publish a custom HTML in the header block, simply writing your code in the next option Block 1 Custom HTML Header Block 1 will only work on Desktop, not for tablet and mobile.

If you choose Stacked Menu Mode then you have the following options:

a). Stacked Menu Mode– Here you have 3 different modes:

  • Stacked Center– The logo, menu items, and the header block are all aligned together vertically one on top of the other. You can again choose the content for the header block in the next option:
  • Stacked Separated– Here the logo and two header blocks are in the center.
  • Stacked Divided– Here the logo is to the left, menu items in the center and header block is on the right

b). Odd number menu item position– When you select Stacked Separated it displays an extra option of Odd number menu item position to select where you want to display the extra menu item: Select where you want to place the extra menu item in case of Odd number of menu items.

c). Header Block 1– Here you have 3 different modes:

  • Blank– Leave a blank space
  • Module Position– Publish a module whose position you can choose from the dropdown Block Position 1
  • Custom HTML– You can also publish a custom HTML in the header block, simply writing your code in the next option Block 1 Custom HTML

d). Header Block 2– Here you have 3 different modes:

  • Blank– Leave a blank space
  • Module Position– Publish a module whose position you can choose from the dropdown Block Position 2
  • Custom HTML– You can also publish a custom HTML in the header block, simply writing your code in the next option Block 2 Custom HTML Header Blocks 1 and 2 will only work on Desktop, not for tablet and mobile.

If you choose the Sidebar Menu mode then you have the following options: a). Sidebar Menu Mode– Here you have 2 different modes:

  • Left– The logo, menu items and the header block 1 are all positioned to the left.
  • Right– The logo, menu items and the header block 1 are all positioned to the right.

b). Header Block 1– Here you have 3 different options:

  • Blank– Leave a blank space
  • Module Position– Publish a module whose position you can choose from the dropdown Block Position 1
  • Custom HTML– You can also publish a custom HTML in the header block, simply writing your code in the next option Block 1 Custom HTML Header Block 1 will only work on Desktop, not for tablet and mobile.
  1. Site Menu: If you have more than one main menu created then you can choose which menu you want to show on your main site from the dropdown list.
  2. End Level: You can even set up to which level you want to show the sub-menu items. By default it is set to “ALL” which means all the sub-menu items will be visible.
  3. Mobile Menu: You also choose which menu you want to show at the mobile view of your site if you have 2 or more menus created.
  4. End Level: You can even set up to which level you want to show the sub-menu items in mobile view. By default it is set to “ALL” which means all the sub-menu items will be visible.
  5. Dropdown Trigger: Choose the action to view the dropdown menu or the mega menu that is either on Hover or Click.
  6. Dropdown Arrow: Choose whether you want to show the dropdown arrow or not.

Logo Options

This option will only be visible if you have the Header element enabled. Choose the logotype for your site that is either Text or Image.

Logo Text

If you choose a Text logo then you have the following options:

  • Logo Text: Enter the text for the logo.
  • Tag Line: Enter the tagline text for your text logo.
  • Logo Link: Choose the type of link you wish to add to the logo text either Default or a Custom link.

Logo Image

If you choose an Image logo then you have the following options:

  • Default Logo: Choose the logo image for your site.
  • Mobile Logo: You can also customize the logo of your site in mobile view by choosing a different logo image here.
  • Logo Link: Choose the type of link you wish to add to the logo text either Default or a Custom link.
  • Default Logo: Choose the logo image for your site.
  • Mobile Logo: You can also customize the logo of your site in mobile view by choosing a different logo image here.
  • Logo Link: Choose the type of link you wish to add to the logo text either Default or a Custom link.

Sticky Header

This option will only be visible if you have the Header element enabled. Sticky header is something that sticks to the top of the page while the scroll is scrolling down or decides to go back up.

Sticky Header: Choose whether you want to display the Sticky header or not. If yes then the following options will be visible:

There are 2 different ways you can show the sticky header

Sticky Menu Mode: Here we have 3 modes: Left: The logo and the menu items are positioned to the left and the header block is to the right. Right: Here the logo is to the left, the menu items and header block are to the right Center: Here the logo is to the left, menu items in the center and header block is on the right

Header Block 1: Choose what you want to display in the header blocks from the given options in the dropdown: Blank: Leave the space blank Module Position: Publish a module whose position you can choose in the next option Block Position 1 Custom HTML: You can also publish custom HTML in the header block, simply writing your code in the next option Block 1 Custom HTML

  1. Sticky Header Logo This option allows you to choose a different logo image for the sticky header (i.e. if you want to upload a smaller logo so the sticky header doesn’t take a lot of space)

  2. Sticky Header on Desktop Choose how you want the sticky to be Sticky or Sticky on Scroll up in desktop view.

  3. Sticky Header on Tablets Choose how you want the sticky to be Static, Sticky or Sticky on Scroll up in tablet view of your site.

  4. Sticky Header on Mobile Choose how you want the sticky to be Static, Sticky or Sticky on Scroll up in mobile view of your site.

Off-Canvas menu

The Off-canvas menu module can easily be created via Joomla module. Just follow these simple steps to create your menu module:

  1. Go to Extensions > Modules > New. Create a New module of the type Menu.
  2. Add the module title and select the menu that you would like to display via this module.
  3. You can select a base menu item that’ll always be active, but if you choose the default value that is Current then the active menu item will be highlighted at all times.
  4. Set the Start & End level of the off-canvas menu module.
  5. You can also choose whether you want to show the sub-menu items or not.
  6. After settings all the required fields set the module position to off-canvas.
  7. Set the module status as Published.
  8. Lastly confirm the module assignment under the Menu Assignment tab where all the modules will be published and you are done.

Astroid backend has all the other options to style the off-canvas menu module. But this option will only be visible if you have the Header element enabled, and currently, it is only available for Horizontal & Stacked Header modes only.

Off-Canvas menu- Choose whether you want to display the off-canvas menu or not. If yes then the following options will be visible:

Toggle Visibility: Choose on which devices will the off-canvas menu be visible that is on All devices, Only on extra small devices, Up to Small devices, Up to medium devices, Up to Large devices or only on extra-large devices. By default, it's set to All devices.

Panel Width: Set the size of the off-canvas menu either in px or em or rem.

Off-Canvas Animation: Select how you want the off-canvas menu to open that is either Slide on Top, Push or Reveal animations.

Off-Canvas Direction: You can choose between Left and Right for the position from where you want to open the Off-Canvas menu.

Animation

  1. Animation: You can also customize the animation of your dropdown menus, you can set it to None, Slide or Fade.
  2. Animation Speed: Depending upon the animation you choose from the Animation option you can also set its speed. The value is set in milliseconds and its maximum value can be up to 4000ms.
  3. Easing: This functions specifies the speed at which an animation progresses at different points within the animation. You can choose the type of easing from the various options provided: linear, swing, EaseInQuad, EaseOutQuad, EaseInOutQuad, EaseInCubic, EaseOutCubic, EaseInOutCubic, EaseInQuart, EaseInQuart, EaseInQuart, EaseInQuint, EaseOutQuint, EaseInOutQuint, EaseInSine, EaseOutSine, EaseInOutSine, EaseInExpo, EaseOutExpo, EaseInOutExpo, EaseInCirc, EaseOutCirc, EaseInOutCirc, EaseInElastic, EaseOutElastic, EaseInOutElastic, EaseInBack, EaseOutBack, EaseInOutBack, EaseInBounce, EaseOutBounce and EaseInOutBounce.

How to customize the Offcanvas icons in Astroid

Again a highly requested option in Astroid was to customize the Offcanvas hamburger icon. It’s finally done now!

Yes, you now have the ability to customize that off-canvas icon using these simple overridable steps:-

  1. Copy the files from this folder(JOOMLA_ROOT/libraries/astroid/framework/frontend/offcanvas) to this folder(JOOMLA_ROOT/templates/YOUR_TEMPLATE/html/frontend/offcanvas).
  2. Make the changes in the copied files.
  3. And it’s done, the changes made in those files with be reflected on your frontend just make sure to clear the cache as well.
Clone this wiki locally