Customising the Menu class in Joomla Cassiopeia template
I needed to style the border for my menu in the Cassiopeia template when an item is selected or hovered, as its not a very good contrasting colour by default.
and its actually really easy to do with one CSS statement and a Link Class in the Link Type screen for the menu..
TL:DR: Make your Joomla menus look better with a hover border, easily.
Contents
Adding an Icon to a Joomla Menu
- Open the menu item in the Joomla Administrator
- Add a
Link Class
field. In my example i usedmenu__home
. - Save it.
- Now add the CSS to style this link class to your template.
user.css
. This won't get overwritten when you update your template so your changes here will persist. - Choose System, Site Templates, then click Cassiopeia Details and Files
- You are looking for the
user.css
file in the css folder. If it doesn't exist, you can select thecss
folder and click 'New File' to create it.
- Now add the CSS to provide the underline needed for the menu.
- Here's the CSS.
a.menu__home:hover, li.active a.menu__home { border-bottom: 2px solid #f8f9fa; }
- You might need to hard reload your site to see the change. In Chrome, Open the inspector, and then right click the reload button to do this. Other Browsers vary.
- Add a
Icon on the Joomla front end menu
Here it is on the front end before and after. Much better.
k