Link Text Color in Navigation Block

  • I cannot provide a link to the website because I am building on my desktop with Local. I am using WordPress 6.2 and the Twenty Twenty Three theme.

    I have a Navigation block in a header that is used on every page. I want the Navigation block background set to a dark color and the link text set to white. I can do this in the editor but when I view the site only the Home link is white. The two other Page links to an About page and a Contact page are set to the dark color used for most of the type in my site. Since that is the same color as the background color for the Navigation block they are invisible. They are there though, because clicking where they are takes me to the proper page. The Navigation block is in a group and I have tried setting the link color for the Group as well as the text color for the Navigation block. They both appear to work in the editor but do not work in the actual site. Does anyone have any suggestions for what I can do. I temporarily made the Navigation background the same light color as most of the website and the Navigation text the same dark color. That appears to work, but is not the look I want.

Viewing 11 replies - 1 through 11 (of 11 total)
  • lisa

    (@contentiskey)

    Maybe check: are there any settings in Global Styles that might be impacting? any styles in additional CSS area? any plugins that might be impacting nav menu link color? are any of the links showing a “visited” color that might be impacting? is any browser or other cache impacting?

    (As an experiment – I tested in my localwp site with bright green text color and pink background for navigation block in header template part. seemed to work in editor and front end – WordPress 6.2 and the Twenty Twenty Three theme)

    Thread Starter Richard Patterson

    (@richardpatterson)

    Thanks. I tried to look at Global Styles settings but I am not sure how I can edit a Global Style for Navigation block text color or a Global Style for a Page Link. I see Global style setting for the Home Link Block which seems to show the background and text colors for my content, but I don’t see how to edit it. So far as I can tell there are no styles in any additional CSS area? I certainly never consciously added one. The only plugins that I have active are Sticky Block, Guttenberg, Default Post Sort, Fonts Plugin | Google Fonts Typography. Do you think any of these would be a problem? So far as I can see the Fonts Plugin does not control the color of a font. I don’t see any “visited” color as an option on the Page Links. And I cleared the cache in Safari.

    Does the navigation block you tested have a Page Link and a Home Link? In mine the Home Link works but not the Page Link.

    Would I be better off just building a pseudo-navigation block by having a row with a dark background and adding columns of text which I make links?

    lisa

    (@contentiskey)

    I just created a completely new site in localwp. No plugins. WP 6.2. twenty twenty three theme uncustomized. 2 items in nav menu sample page and home link. green background and pink text. works.

    Suggestion: Create a new site in localwp to test. No plugins. uncustomized Twenty Twenty Three theme. 2 items in navigation block home link and sample page. Choose colors. see if it works properly for you. Then try your current site ALL plugins deactivated to see if you can start to narrow down a possible source of the issue with the colors for your navigation block.

    this how-to video might be generally helpful about navigation block: https://wordpress.tv/2022/12/07/using-the-navigation-block-2/

    • This reply was modified 1 year, 10 months ago by lisa.
    • This reply was modified 1 year, 10 months ago by lisa.
    Thread Starter Richard Patterson

    (@richardpatterson)

    Thanks. I’ll try these suggestions. I appreciate your help.

    Thread Starter Richard Patterson

    (@richardpatterson)

    Trying to set up a test site to see if the Navigation bar worked proved counterproductive because I had so much trouble making it work at all. I did manage to have a navigation block with a Home Link and a Sample Page link that were white on the dark background, but the Home Link did not work. (It took me to an error message saying home could not be found.)

    I tried turning off all my plugins and I still got the same result in my actual website.

    The Home Link block in my Navigation block has a style setting for color. There seems to be no way to set a color for a link to the Contact page or the About page. I assume it is inheriting its color from some other setting, but I can’t find that setting. If there is some global setting, isn’t there supposed to be a way to override it for any particular block? Is there a way to set the style of all the Page Link blocks? I have other URL links on the website that I do not want to set to white. I think I just made them links inside a Paragraph and was able to set them to a blue color.

    Obviously I have somehow waded in way above my head, but it seems to me it should be possible to make the website look the way I want.

    lisa

    (@contentiskey)

    Thread Starter Richard Patterson

    (@richardpatterson)

    Thanks again. The instructions for managing colors for a Navigation block are precisely what I have done repeatedly to create a dark background and white text. When I do that it looks exactly like I want it in the editor, but when I view the actual site only the Home Link is white and the Page Links are invisible because they are the same dark color as the background (which is the color I use for a lot of text on the site). So my question remains what can cause this difference between the preview in the editor and the actual site. I have tried clearing the cache several times, but even that does not make sense because it would imply that the cache somehow stored a version I never created or saw.

    Hi Richard,
    Are you working locally or is it possible for you to share a URL link for us to examine?

    I’ve had some frustrating moments where things look accurate when I’m logged into the site, then look different once I log out. When you say you’ve cleared the cache, is there another level to clearing at your web host’s server?

    • This reply was modified 1 year, 10 months ago by askdesign.
    Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    is it possible for you to share a URL link for us to examine?

    That is a good idea but please be aware: any link in reply will be seen by search engines and will not be removed later on. Don’t use link shortners either, those will be expanded when found.

    A link would be best to help volunteers but please be aware about link and visibility.

    Thread Starter Richard Patterson

    (@richardpatterson)

    As I indicated in my initial post, I am working locally on my desktop using Local. I have started over with a separate website in an attempt to recreate what I had done with the original one. The new website does not have the problem with the Navigation bar, but it has others.

    I would like to ask that is it possible to use CSS to change the font colour of the custom add field from Grey to white colour? (The “add name” option on the link below:)

    https://goat.gift/en/product/l003/?attribute_pa_colour=%25e5%2595%25a1%25e8%2589%25b2

    Thank you !

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Link Text Color in Navigation Block’ is closed to new replies.