Form Label, Color Contrast, Single Post Navigation Link Questions

Hi Kris,

1. This is how you add PHP snippet to your site:
Adding PHP: https://docs.generatepress.com/article/adding-php/

2.

because the text color and background has RGB 255

Your current menu item link color is set to #FFFFFF(white) which is rgb(255, 255, 255). If this is the issue, then you can change the menu item's color at customizer > colors > primary navigation.

3. Try this CSS:

.single-post .nav-next .icon-arrow-right {
    display: none;
}
.single-post .entry-meta .nav-next a {
    font-size: 20px;
    text-decoration: underline;
}

change the 20pxto the font-size that you want.

Adding CSS: https://docs.generatepress.com/article/adding-css/

Hope this is helpful :)

Hi Ying,

This is very helpful.

1. I installed the plugin and pasted the snippet but I don't see a label successfully added per the WAVE results.

2. I updated the background color as well but didn't see any change in the WAVE color contrast errors. There are no color contrast issues with the white text against the dark background, but WAVE is still showing an error - is there anything you can see that would trigger this error?

3. This worked perfectly. How can I add text in front of the link (e.g., Read previous entry: [link])?

Thanks very much.

1. The label has been added:
https://www.screencast.com/t/ZzCpIZwCpqn

2. Seems WAVE is pulling the background color of body which is #ffffff as the menu item background, it's obviously not the case judging by human eyes :P

Can you try set a background color for primary navigation menu items at customizer > colors > primary navigation? Not sure if this false error will be gone, but have it a try. Let me know.

3. Try this CSS:

.single-post .entry-meta .nav-next span.next:before {
    content: "Read next article: ";
    font-size: 20px;
}

Thank you very much, Ying. A few follow up questions:

1. Is there a way to make it so the search bar doesn't block out the other content when it comes up?

2. I have set the background color for navigation to the attached settings:

https://prnt.sc/1utf41m

3. I tried this CSS but it reverted the link back to the way it was before adding the large text, underline link.

Hi Kris,

For #1:

It's definitely possible. The default behavior was done to make efficient use of space. But we can always change this to make the search field show above or below the nav bar.

Can you tell us how you want it to display?

For #2:

Can you try adding this CSS and try checking with wave again?

.main-nav ul.menu li a {
    background-color: transparent;
}

For #3:

Not exactly sure how you want it to display. Any chance you can provide a mockup image? :D

Hi Elvin,

1. On the search bar, I just need it so that it doesn't cover up any other content on desktop, tablet, or mobile. Right now, the desktop nav bar is partially blocked and on mobile it's completely covered up.

2. I added the CSS to the Customizing Additional CSS option in the customize panel but the WAVE errors are still showing on my end.

3. It was showing perfectly - the link was just larger text and underline but I added Ying's previous section and now deleted it and it's now reverted back to the small blue link text with carrot in front of it.

What I'm after is just a 20px underlined link that says "Read next article:" before it.

Thank you very much.

1. Add this CSS to adjust the search bar position:

.navigation-search > label {
    position: absolute;
}
form.search-form.navigation-search.nav-search-active {
    top: 60px;
}

2. Try this CSS instead:

.main-nav ul.menu li a {
    background-color: #1f2641;
}

3. You are supposed to add both of the CSS I provided here:
https://generatepress.com/forums/topic/form-label-color-contrast-single-post-navigation-link-questions/#post-1952449
https://generatepress.com/forums/topic/form-label-color-contrast-single-post-navigation-link-questions/#post-1952574