How to Use the Menu with Cassiopeia in Joomla 4

by LT Digital Team (Content & Marketing) | Dec 9, 2021 | Joomla! 4 | 14 comments

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!

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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

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)

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)

What are joomla tags and how are the used? - November 3, 2024
Why and how to create hidden menu items in Joomla? - October 31, 2024
How to publish smartslider 3 to joomla 4? - October 31, 2024

Interesting with this topic? You can read related articles:

14 Comments

Paul Blackburn on December 26, 2021 at 11:49 am

Great article, thanks.
A couple of issues, I’m using J4 and Cassiopeia:
1) I find the menu bar (on a PC) is too close to the following content – I assume it’s a padding issue is it?
2) I’m finding that using the hamburger menu for mobile devices (set in the module), it displays the menu items vertically over the content whereas in J3 it pushed the content down the page so the menu items could be seen clearly. Any idea how to correct this?
The site I’m using is not live yet and is networds.org
Reply
- Kelvin on December 27, 2021 at 7:52 am
  
  Hi,
  1/ You just create Custom CSS file (user.css) and add more CSS, see how to create user.css at https://ltheme.com/create-custom-css-with-cassiopeia/
  .container-component {
  margin-top: 70px;
  }
  2/ You can add more CSS to define background for mobile
  .container-header .navbar-collapse.show {
  background: #ccc;
  }
  Reply
Julian Dieterle on January 3, 2022 at 1:42 pm

Using Cassiopeia – can I force always horizontal menus, even for mobile devices,
where in some cases it is displayed vertically.
Reply
- Kelvin on January 4, 2022 at 4:03 am
  
  Can you send me your site URL? So, I can help. May be you missed class css for menu.
  Reply
James on March 3, 2022 at 5:26 pm

Using Cassiopeia, How to make 2 columns sub-menu?
Reply
- Kelvin on March 4, 2022 at 2:03 am
  
  Unfortunate, Cassiopeia doesn’t support Megamenu, you can use our templates at http://ltheme.com/joomla-templates/
  It supports Megamenu
  Reply
Dr Peter Tuson on March 5, 2022 at 10:15 am

I am trying to add two menus to the footer but the resulting html appear to be wrong for the second menu:

<div class="mod-menu mod-menu_dropdown-metismenu metismenu mod-list menu-horizontal" id="nav"
FAQs
…

The start of the menu is within the div and there is no to end the menu so the menu is tagged on the end of the first.

Should I be using my own modules to do this? It works OK on Joomla 3.
Reply
- Kelvin on March 7, 2022 at 3:14 am
  
  Hello,
  You can use Custom HTML module and place your Text and link on footer.
  If you need extra position, you can take a look for our Joomla! collection at http://ltheme.com/joomla-templates/
  Reply
Dr Peter Tuson on March 9, 2022 at 5:21 pm

I just created my own module to do it. It only took a few minutes to do.
Reply
- Kelvin on March 21, 2022 at 9:08 am
  
  That’s awesome!
  Reply
paolo on March 4, 2023 at 11:24 am

hi dear, i’v an issue with menu of cassiopea, in a particular resolution (768x740px) the cassiopea menu does not remain horizontal or hamburger but becomes vertical.
I don’t have a url as I’m running it locally to test some changes.

Any tips to solve?
Reply
- Kelvin on March 6, 2023 at 2:36 am
  
  Hi,
  This is responsive layout issue, unfortunate if we can’t reach to your page, so we can’t debug this CSS. You can learn @media query and fix it by yourself https://www.w3schools.com/cssref/css3_pr_mediaquery.php
  Reply
samiha on March 5, 2024 at 10:04 am

Good morning,
I use the lt-news template with Joomla 5 I managed to create a horizontal menu in the mega menu of the template and everything works well;
and I managed to create a horizontal menu at the top of the template using the Joomla menu module but I cannot show submenus!! I created them but they do not appear
please help me
Reply
- Kelvin on March 6, 2024 at 3:04 am
  
  Can you submit ticket and give me your site url, admin login? So, we can help.
  Reply