How to change header design in Joomla website builder Gridbox?




Joomla website builder Gridbox allows you to change header design, add company logo, navigation menu, a call-to-action button, and so on. A header appears across the top of your site on all of the Gridbox pages. Changes in the header design apply to all pages in that theme. In this tutorial, we’ll show you how to customize the header in Gridbox websites.




Setting up global styles


1. Open Header Settings by clicking the icon Edit ➝ tab General.

Header settings - Joomla website builder Gridbox



2. Choose Layout:

  • Classic
  • Side
  • Navigation

3. Select Position: 

  • Default
  • Absolute
  • Fixed


4. Enable Full Width and Fullscreen options as needed.
5. Set Animation Effect as needed:

  • None
  • Bounce In
  • Bounce In Left
  • Bounce In Right
  • Bounce In Up
  • Bounce In Bottom
  • Fade In
  • Fade In Left
  • Fade In Right
  • Fade In Up
  • Fade In Bottom
  • Zoom In

6. Set Animation Duration and Delay. 
7. Disable header on mobile devices as needed.

By customizing the header, you can set up how it will look both on computers and mobile devices: 




Header background styles


1. Open Header Settings by clicking the icon Edit ➝ tab Background.
2. Select States Type:

  • Color
  • Gradient
  • Image
  • Video
  • None

3. Adjust Overlay if necessary ➝ select Type:

  • Color
  • Gradient
  • None


4. Add and customize Shape Divider. 




Setting up header layout


1. Open Header Settings by clicking the icon Edit ➝ tab Layout.
2. Customize Margin, Padding, Border, and Shadow.

Related articles