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!
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)
We use cookies to improve your experience on our website. By browsing this website, you agree to our use of cookies.
Functional
Always active
The technical storage or access is strictly necessary for the legitimate purpose of enabling the use of a specific service explicitly requested by the subscriber or user, or for the sole purpose of carrying out the transmission of a communication over an electronic communications network.
Preferences
The technical storage or access is necessary for the legitimate purpose of storing preferences that are not requested by the subscriber or user.
Statistics
The technical storage or access that is used exclusively for statistical purposes.The technical storage or access that is used exclusively for anonymous statistical purposes. Without a subpoena, voluntary compliance on the part of your Internet Service Provider, or additional records from a third party, information stored or retrieved for this purpose alone cannot usually be used to identify you.
Marketing
The technical storage or access is required to create user profiles to send advertising, or to track the user on a website or across several websites for similar marketing purposes.
How can I place a logo and the name of a company next to the logo insteat below the logo (manage at the template style, generated)?
I work in XAMPP.
Just go to Template Settings, find option “Logo”