Introduction

Are you using Cassiopeia that is the default template in Joomla 4? Are you looking for some guides to help you use the Menu with Cassiopeia effectively? If that is all you want to find out, the blog today will be suitable for you. Now, we will introduce to you the way to create a horizontal menu in the header and footer of your site. So, let’s take a look now!

Vertical Menu in the Right Sidebar

By default, when you finish installing Joomla 4, the menu module will be on the right side of the screen. Thus, all menu items will appear vertically. You can see the example in the image below.

Use The Menu With Cassiopeia 1

If you want to showcase the menu in a horizontal way, you need to change some settings in the site module. The next part will help you do that step-by-step.

Horizontal Menu

Creating Horizontal Menu in the Header

First of all, you need to log in to your site admin dashboard.

Then, on the toggle menu, let’s go ahead Content -> Site Modules. After that, simply find Main Menu and click on it to open and customize it.

Use The Menu With Cassiopeia 2

Now, in the Module tab, you just need to change the Position from the Sidebar-right to Menu.

Use The Menu With Cassiopeia 3

Next, in the Advanced tab, let’s select ‘Collapsible Dropdown‘ or ‘Dropdown‘ in the Layout section.

Besides that, in the Module Tag, don’t forget to choose ‘nav‘.

Finally, simply press on Save or Save & Close button at the top of the screen to store all your changes.

Use The Menu With Cassiopeia 4

Now, let’s see the menu on your site. It will appear on the header clearly.

In case you don’t see any change on your site, you need to clear the Joomla or browser cache. Then, refresh your site and see how it change.

Use The Menu With Cassiopeia 5

  • Changing the display of the menu: If you hope to change the horizontal menu appearance, let’s add the following code to the user.css file:

.container-header .mod-menu {
justify-content: center;
color: #ffffff;
padding: 0;
}

In the code, you are able to change the side of the menu, such as center, right, or left.

  • Altering the background color of the header: Whenever you need to alter the background color of the header, just add the code below to the user.css:

.container-header {
background-color: #220e4d;
background-image: none;
}

When using Cassiopeia for a Joomla 4 site, the menu item will have a page class of its own. For the colors, Cassiopeia will use some custom CSS properties. The properties will be applied for the background of the header and footer. So, if you want to change the colors of the header and footer, you need to generate a user.css file and edit it. You can get more information about the issue here.

Layouts of the Menu Module

There are 4 options in the layout section:

  • Collapsible Default Menu (from module): It has another name ‘hamburger menu’. The menu will appear without submenus. So, it can be showcased on mobile devices without any trouble.
  • Default (from module): It will also appear without submenus. However, when visitors use mobile phones to access your site, they will see the menu in a vertical way.
  • Collapsible Dropdown (from Cassiopeia): The menu is also called the ‘hamburger menu’. It is displayed with submenus and it can appear on mobile phones.
  • Dropdown (from Cassiopeia): The menu is presented with submenus. On all kinds of mobile phones, it will appear vertically.

Use The Menu With Cassiopeia 6

If you want to showcase the menu in the Footer instead of the Header, you can set up a horizontal menu at the bottom of your site.

Firstly, let’s go to Content -> Site Modules -> Main Menu. After that, in the Position part, you need to select Footer.

Use The Menu With Cassiopeia 7

Now, let’s move on to the Advanced tab. It’s time for you to type menu- horizontal in the Menu Class, choose Dropdown in the Layout, and nav in the Module Tag.

Don’t forget to save all your changes.

Use The Menu With Cassiopeia 8

Now, let’s go back to your Joomla site and see the horizontal menu in the footer.

Use The Menu With Cassiopeia 9

Conclusion

To sum up, we are pleased to show you the way how to use the Menu with Cassiopeia in Joomla 4. We hope that you can build a great menu with the Cassiopeia template. If you think the blog is helpful, don’t forget to share it with your friends. Last but not least, we are providing many responsive and well-organized Joomla 4 Templates, so don’t hesitate to explore and get the most suitable one for your site.

4.9/5 - (10 votes)
Lt Digital Team (Content &Amp; Marketing)
Latest posts by LT Digital Team (Content & Marketing) (see all)

Summer Sale Grab 50% Off for everything on today, don't miss it. Coupon code: SUMMER2024 Redeem Now
Last call: Summer Sale! Grab 50% Off for everything on today, don't miss it. Coupon code: SUMMER2024 Redeem Now