color navigation in different headers

This topic has 14 replies, 2 voices, and was last updated 7 months, 2 weeks ago by minal.

Viewing 16 posts - 1 through 16 (of 16 total)

Author

Posts
May 1, 2024 at 11:11 am #335112

HansH
Participant

Hello Minal,

I encounter the next problem.

On the homepage, the navigation menu occurs in an image.
The color of the text of navigation is white; the color of link also.
When I click on the text of a menu item: color stays the same. Excellent.

Now the problem:
If I want to change color in aviation for another header, this seems impossible.
The header for the other pages has a white background.
I can change the colors of the menu items in a different color (#003AC4). This is the menu items klink color
If I click on that, I cannot see the text anymore, because the color of link change into white.
If I change this into #003AC4 then the color of the linked words in the frontpage menu change also in #003AC4.
Consequence is that the text in the frontpage header is unreadable after clicking.

What I should like is that I can on a independent way change the color of linked text in the menu of a navigation without changing the color of navigation in front page.
You can see what I mean of you go to leusden.hagmeijer.nl a click on a random menu item. And click subsequently on the next menu that occurs.

Kind regards

Hans Hagmeijer

May 2, 2024 at 12:34 am #335122

minal
Keymaster

Hello Hansh,

After seeing your site, you have changed the hover color on menus to #003af4 which will work and might be the best solution for you. or you can change the submenu background and text.

Sincerely,

Minal

May 2, 2024 at 2:24 am #335129

HansH
Participant

Hello Minal,

Thank you for answering. I will do so.
The key of problem was -I think I was not precise enough to explain, that if I should like a hover text color on front page white. When I do so the hove color in the menu of other pages also stay white on a white background.

Is should like to let the color of the home page white (hovering or not) and other pages blue (hovering or not).
Is that possible in this theme?

Question asked in another way. Is it possible to have two menu’s in two colors?
Is there something possible like css?
As far as I can see this is the last resting little problem on this site. Your help was very great. Thank you for that.

Kind regards

Hans Hagmeijer

May 2, 2024 at 3:35 am #335130

minal
Keymaster

Hello Hansh,

Thank you for your clear explanation.
and yes you can add separate colors on menus. you have used two separate header parts in the home page and pages so you can change the color on those separate header parts
you can find template parts by going Dashboard > Appearance >> Editor >> Patterns and you will find manage all parts at the bottom
https://prnt.sc/BbjC-5CGbsfR
https://prnt.sc/Yx6nRdIORiov

Sincerely,

Minal

May 2, 2024 at 3:53 am #335131

HansH
Participant

Hello Minal,

Thank you for reply. Now I can clearly explain cause of problem.
In the link you see color screenshot.
For the white hover color on the home page navigation I have to change the primary color in #ffffff
When I want to change the hover color of second navigation: I had to change primary color in #003AC4, because of the white background.
Consequence is that the navigation hover color changes also in #003AC4.

Can you explain how it is possible to change hover color in page navigation without changing the hover color in home page navigation?

Kind regards

Hans Hagmeijer

May 2, 2024 at 5:24 am #335132
minal
Keymaster
Hello Hansh,

I’m sorry about being misguided by me. And about the hover color, you cannot give two separate hover colors by editor however It can be achieved by giving CSS code to it on additional CSS.
```
.page:not(.home) .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	color: #003ac4 !important: * you can change the  value of your desire color
}
```
Hope it works for you.

Sincerely,

Minal
May 2, 2024 at 8:25 am #335135

HansH
Participant

Thank you Minal,

This did it.
And it was me in deficient English who misguided you. If I was more clear, it had been clear at onze.

Kind regards

Hans Hagmeijer

May 2, 2024 at 5:03 pm #335137

HansH
Participant

Hello Minal.

This solution works for the homepage. Elsewhere -I think that this is the cause- every link becomes #ffffff.
I have a table with many links: all table content invisible on white background. 🙂
If I color the primary color in the 26 colors Gove the color black, then the hovering color on the frontpage becomes black. Table content is readable then.
I thought to make another table, but this table will have the same links: unreadable with primary color is #ffffff.

Maybe I do something very wrong.
Have you any clue for a solution?

If you need any screenshots, please let me know

Extra css I inputted:

.page:not(.home) .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover{

color: #003ac4 !important
}

Kind regards

Hans Hagmeijer

May 3, 2024 at 12:50 am #335144
minal
Keymaster
Hello Hansh,

Can you give me links where those tables are located (I suppose this is the page https://leusden.hagmeijer.nl/groepen/ you are talking about)
and also share the screenshot.
and once try to change the color or background of the table by clicking on the table you might get a color option on the right sidebar like others.

if it did not work let me know I will give you a needy CSS for that.
Here is the CSS snippet if those editor color does not work for you
```
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr td {
	color: #color value !important or you can add those color variable var(--wp--preset--color--text-link) !important like this of your desire ;

}/code>
```
Sincerely,
Minal
May 3, 2024 at 5:45 am #335149

HansH
Participant

Hello Minal,
The table url is: https://leusden.hagmeijer.nl/downloads/

I made a few screenshots.

1 The theme colors. In the red Circle you can see the color I used for the color of hovering in the menu on the home page.

2 The effect of using this for the hovering in the submenu (after clicking, the items turn into #ffffff)

3. The menu on other pages (very fine)

4. The effect on a table with links
These are the links for downloads for members of our cycling club.

The same effect as ad 4. I see when I use a link on another page or button.
See tw0 screenshots of a button that supposed to be #003AC4 with #ffffff letters.
A few versions ago the buttons had the right color combination.

screenshot one. screenshot two
I think, maybe it is the best solution if you give me the css for the menu on homepage so that the hover color on the homepage is #ffffff.
Then all the other colors can stay as developed for the theme.
But, I don’t know if I am right.

Kind regards

Hans Hagmeijer

May 3, 2024 at 8:41 am #335153
minal
Keymaster
Hello Hansh,

About your queries regarding of colors.
for hover and current item color and for table links on inner pages add those css
```
.page:not(.home) .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.page:not(.home) .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: #003ac4 !important:
}

.wp-block-post-content table td a {
	color:#003AC4;
}
```
change the color code in the following css as per your need

and about your button color you have set both background and text color the same color. you have to change one of the color to see properly

and about your home page menus it seems fine so you don’t have to do anything for that

Sincerely,
Minal
May 3, 2024 at 8:55 am #335155

HansH
Participant

Hello Minal,

Thank you for answering. I tried to add CSS. I got an error message.
I tried again and now only the first part (see attached file)
I got the same message.

The message sais:
“There is an error in your css structure”
Kind regards
Hans Hagmeijer

May 3, 2024 at 9:21 am #335158
minal
Keymaster
Hello Hansh,

Sorry about that error code. Here is the revise code
```
.page:not(.home) .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.page:not(.home) .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: #003ac4 !important;
}

.wp-block-post-content table td a {
	color:#003AC4;
}
```
Sincerely,
Minal
May 3, 2024 at 9:23 am #335161

HansH
Participant

Hello Minal,

Don’t worry. Such things happen. I make probably more mistakes during the day.

Best regards

Hans Hagmeijer

May 3, 2024 at 9:42 am #335164

HansH
Participant

Hello Minal,

Still one problem stays: the color of links.

The color of links stays #ffffff. On a white background: the link is no more readable.
You see it here: where the little hand is visible
Also the submenu hovering color stays #ffffff.

When this is over: website is ready.

Best regards

Hans Hagmeijer

May 3, 2024 at 10:04 am #335168
minal
Keymaster
Hello Hansh,

For anchor tags on page content, Add those css on you editor
```
.wp-block-post-content a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--text-link);
}
```
and for hover color try changing the color of the primary color, primary color is used as a hover color on this theme. and also try to change the primary color (i.e. hover color) and your custom-tll color to a different one. because you use the same color on both color names if you change your custom-ttl your primary color also be changed so try a slightly different color on the primary color .ie. hover color try this and let me know if any difficulties arise.

Sincerely,
Minal
Author

Posts