Introduction

By default, Joomla 4 comes with the Cassiopeia template. This template allows you to design as well as edit your Joomla site via normal commands and coding. With the template, you are able to create a horizontal header menu for your website without any trouble. However, if you want to modify the color of sections in the header or put the menu next to the logo, you need to use code in custom CSS. Sometimes, this will be complicated for beginners, who do not have too much knowledge about coding. To help such people easily design the header, we would like to introduce an effective way to customize the header with Cassiopeia without coding in Joomla 4. You just need to use the Kickstart Cassiopeia module to implement all your designs.

Kickstart Cassiopeia is a module that supports you to design the Cassiopeia template without creating coding or CSS. It comes with many options for you to customize, including Layout, Topbar, Menu/header, Footer, Colors, and much more. All you need to do is configure the module to make your site appearance become perfect.

Now, you need to download the free version of the Kickstart Cassiopeia module here. With the free version, you can access the following options:

• Top-bar
• Custom menu/ header
• Footer
• Typography
• Color Settings
• Webmastertools: Custom Code/ Custom CSS

After downloading the zip file, you need to install the module to your backend Joomla 4 site. Let’s go to System -> Install -> Extensions, then upload the zip file of the module.

How to customize the header with Cassiopeia without coding

Once installing the Kickstart Cassiopeia module, you can freely design the header of your site. So, simply access System -> Site Modules.

Now, on the search bar, you just need to enter the KickstartCassiopeia module or use the ID to find the latest module you installed. After that, click on the module to edit it.

In the Module tab, let’s choose Cassiopeia -> Menu for the Position section, then select the Published for the Status section

Next, simply move on to the Menu Assignment tab and choose On all pages.

Now, it’s time for you to customize the header with the Menu/Header tab. There will be many options for you to modify, including:

• Menu next to Logo: Choose Yes if you want to showcase the menu next to the Logo. Select No if you want to display the menu under the menu.
• The menu text color: Modify the color of the menu text.
• The menu bar background color: Edit the color of the menu bar background.
• Menu bar background image: If you don’t want to use background color for the menu bar, then you can change the background with your own image you like.
• Menu padding: Customize the size of the space between the menu text and the border on the header.
• Submenu width in REM: Change the width of the submenu.
• Add shadow to navbar: Click on the Yes button if you hope to insert shadow to the navbar.
• Center Logo: In case you want to showcase the logo in the center of the header, let’s enable the option.
• Hide Logo: You can also hide the logo if select the option.
• Menu in uppercase: Activating this option will change the menu text from lowercase to uppercase
• Padding menu bar: Customize the size of the space between the menu text and the logo.
• Banner height in VH: Alter the height of the banner.
• Banner overlay color: Modify the color for banner overlay.

After customizing the header in your own style, don’t forget to save your changes. Finally, let’s take a look at the header of your website.

Wind-up: Customize Header with Cassiopeia – easy or complex?

All in all, we believe the issue is not complicated as you think. If you are professional in coding, you can easily edit the header with Cassiopeia without any difficulties. In case you don’t have much knowledge about coding, you can still design the header thanks to the Kickstart Cassiopeia module. Thus, we hope that the blog today can help you customize the header with Cassiopeia effectively. If you have any queries, let us know by leaving your comment below. Last but not least, don’t forget we are offering a lot of high-quality Joomla 4 Templates here, don’t miss it!

• Author
• Recent Posts

LT Digital Team (Content & Marketing)

Welcome to LT Digital Team. We make daily blogs for Joomla! and WordPress CMS, support customers and everyone who has issues with these CMSs and solve any issues with blog instruction posts, trusted by over 1.5 million readers worldwide.

Latest posts by LT Digital Team (Content & Marketing) (see all)

• How to place menu items in helix joomla 5 ? - December 14, 2024
• How to reduce the size of helix 2 layout ? - December 14, 2024
• What’s J4 starter template and how to use it - December 3, 2024