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.
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.
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.
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.
Moving the Menu to the Footer
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.
- How to Prevent Fraud and Fake Orders in WooCommerce - September 12, 2024
- How to Disable Directory Browsing in WordPress - August 18, 2024
- What is Multisite (MU)? - July 25, 2024
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
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;
}
Using Cassiopeia – can I force always horizontal menus, even for mobile devices,
where in some cases it is displayed vertically.
Can you send me your site URL? So, I can help. May be you missed class css for menu.
Using Cassiopeia, How to make 2 columns sub-menu?
Unfortunate, Cassiopeia doesn’t support Megamenu, you can use our templates at http://ltheme.com/joomla-templates/
It supports Megamenu
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.
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/
I just created my own module to do it. It only took a few minutes to do.
That’s awesome!
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?
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
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
Can you submit ticket and give me your site url, admin login? So, we can help.