Problems styling main menu in Cassiopeia Topic is solved

[chataignier]

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 ?

[Pavel-ww]

Can anyone see what I'm missing ?

Hi. URL?

[Per Yngve Berg]

Mod. Note: Relocated topic to the Templates Forum.

[chataignier]

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

[Pavel-ww]

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;
}

[chataignier]

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.

[Pavel-ww]

Glad was to help

[TomoGajowy]

also thank you very much