Problems styling main menu in Cassiopeia Topic is solved

Everything to do with Joomla! 4.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Post Reply
chataignier
Joomla! Apprentice
Joomla! Apprentice
Posts: 29
Joined: Tue Oct 28, 2014 9:38 pm

Problems styling main menu in Cassiopeia

Post by chataignier » Thu Feb 29, 2024 12:26 pm

I'm customising a previously working site after migrating to J4.4.3 and Cassiopeia. I have modified background colours, font sizes and various other aspects of the site without any problems using user css. However, the main menu (which all works fine) stubbornly resists my attempts to modify its appearance. I must be missing something...

The main menu is assigned to a menu module which is assigned to Cassiopeia's menu position. It displays in white (in all states) which has poor contrast with the light colour background I have chosen.

I have tried to customise it by assigning a menu item class to each menu item and using ccs in the user.css file as follows :

li.active a.my-main-menu {
color : black;
}

li.hover a.my-main-menu {
color : white;
}

li.link a.my-main-menu {
color : #663333;
}

li.visited a.my-main-menu {
color : black;
}

(These colours are consistent with the global colour settings that I've programmed for links in modules etc. which display as programmed)

Result : The links remain white in all states except for the active link which now appears black, so I'm having some effect but not the one intended !

Can anyone see what I'm missing ?

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1609
Joined: Tue Jun 30, 2020 12:17 pm

Re: Problems styling main menu in Cassiopeia

Post by Pavel-ww » Thu Feb 29, 2024 1:29 pm

chataignier wrote:
Thu Feb 29, 2024 12:26 pm
Can anyone see what I'm missing ?
Hi. URL?

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 30876
Joined: Mon Oct 27, 2008 9:27 pm
Location: Romerike, Norway

Re: Problems styling main menu in Cassiopeia

Post by Per Yngve Berg » Thu Feb 29, 2024 2:02 pm

Mod. Note: Relocated topic to the Templates Forum.

chataignier
Joomla! Apprentice
Joomla! Apprentice
Posts: 29
Joined: Tue Oct 28, 2014 9:38 pm

Re: Problems styling main menu in Cassiopeia

Post by chataignier » Thu Feb 29, 2024 3:18 pm

Yes, the URL, sorry but I had not put the site on line because it is far from finished and I was hoping there was a simple syntax problem that would be evident in my post. I'll put the site on line.

https://photo.rue-darnet.fr

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1609
Joined: Tue Jun 30, 2020 12:17 pm

Re: Problems styling main menu in Cassiopeia

Post by Pavel-ww » Fri Mar 01, 2024 7:51 am

chataignier wrote:
Thu Feb 29, 2024 3:18 pm
Yes, the URL, sorry but I had not put the site on line because it is far from finished and I was hoping there was a simple syntax problem that would be evident in my post. I'll put the site on line.
Hi.

No one knows the code by heart, so always provide URL.

There is no syntax problems in your code. It’s just that your code does not have enough strong selectors in order to override the code coming from the template. With your approach, you should use !important to make the code stronger.
For example:

Code: Select all

.my-main-menu {
color : #663333 !important;
}
But it is better to avoid using !important if possible.
Therefore, the correct way will be this: examine the desired element through the Dev Tools of your browser, find its CSS code, copy it in user.css and make changes.

For example, here is the main code of menu items.
1.jpg

Copy it, make changes and additions if necessary, and delete the properties that you do not change.
Will look like this

Code: Select all

.container-header .mod-menu > li > a, 
.container-header .mod-menu > li > span {
	color: #663333;
}
You do not have the required permissions to view the files attached to this post.

chataignier
Joomla! Apprentice
Joomla! Apprentice
Posts: 29
Joined: Tue Oct 28, 2014 9:38 pm

Re: Problems styling main menu in Cassiopeia

Post by chataignier » Fri Mar 01, 2024 10:00 am

Thank you !!

That's been a huge help, I've fixed the styling of the menu, but more importantly I now understand better how to dig down in the dev tools to identify the element.

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1609
Joined: Tue Jun 30, 2020 12:17 pm

Re: Problems styling main menu in Cassiopeia

Post by Pavel-ww » Fri Mar 01, 2024 10:44 am

Glad was to help

TomoGajowy
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Sun Mar 24, 2024 7:06 pm

Re: Problems styling main menu in Cassiopeia

Post by TomoGajowy » Sun Mar 24, 2024 8:06 pm

also thank you very much


Post Reply

Return to “Templates for Joomla! 4.x”