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.

• Author
• Recent Posts

LT Digital Team (Content & Marketing)

Welcome to LT Digital Team, we're small team with 5 digital content marketers. 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)

• 7+ Best WordPress Crypto Plugins - April 24, 2024
• Taking Inspiration From One of the World’s Leading Eyewear Ecommerce Sites: Eyebuydirect - March 22, 2024
• Navigating Success: The Role of UX/UI Agencies in Business Growth - March 12, 2024