- #JOOMLA TUTORIAL HOW TO#
- #JOOMLA TUTORIAL CODE#
If you think the blog is helpful, don’t forget to share it with your friends. We hope that you can build a great menu with the Cassiopeia template.
#JOOMLA TUTORIAL HOW TO#
To sum up, we are pleased to show you the way how to use the Menu with Cassiopeia in Joomla 4. Now, let’s go back to your Joomla site and see the horizontal menu in the footer.
It’s time for you to type menu- horizontal in the Menu Class, choose Dropdown in the Layout, and nav in the Module Tag. After that, in the Position part, you need to select 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.įirstly, let’s go to Content -> Site Modules -> Main Menu. On all kinds of mobile phones, it will appear vertically. Dropdown (from Cassiopeia): The menu is presented with submenus.It is displayed with submenus and it can appear on mobile phones.
Collapsible Dropdown (from Cassiopeia): The menu is also called the ‘hamburger menu’. However, when visitors use mobile phones to access your site, they will see the menu in a vertical way. Default (from module): It will also appear without submenus. So, it can be showcased on mobile devices without any trouble. Collapsible Default Menu (from module): It has another name ‘hamburger menu’. There are 4 options in the layout section: You can get more information about the issue here. So, if you want to change the colors of the header and footer, you need to generate a user.css file and edit it. The properties will be applied for the background of the header and footer. For the colors, Cassiopeia will use some custom CSS properties. When using Cassiopeia for a Joomla 4 site, the menu item will have a page class of its own. #JOOMLA TUTORIAL CODE#
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:. In the code, you are able to change the side of the menu, such as center, right, or left. 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:. Then, refresh your site and see how it change. In case you don’t see any change on your site, you need to clear the Joomla or browser cache. Next, in the Advanced tab, let’s select ‘ Collapsible Dropdown‘ or ‘ Dropdown‘ in the Layout section.īesides that, in the Module Tag, don’t forget to choose ‘ nav‘.įinally, simply press on Save or Save & Close button at the top of the screen to store all your changes. Now, in the Module tab, you just need to change the Position from the Sidebar-right to Menu. After that, simply find Main Menu and click on it to open and customize it. Then, on the toggle menu, let’s go ahead Content -> Site Modules. Horizontal Menu Creating Horizontal Menu in the Headerįirst of all, you need to log in to your site admin dashboard. The next part will help you do that step-by-step. If you want to showcase the menu in a horizontal way, you need to change some settings in the site module. You can see the example in the image below. Thus, all menu items will appear vertically. So, let’s take a look now! Vertical Menu in the Right Sidebarīy default, when you finish installing Joomla 4, the menu module will be on the right side of the screen. Now, we will introduce to you the way to create a horizontal menu in the header and footer of your site. 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.
0 kommentar(er)
