Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #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

     

    #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.

    color

    Sincerely,

    Minal

    #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

    #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

    #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

    #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

    #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

    #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

    #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

    #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

     

     

    #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

    color

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

    Sincerely,
    Minal

    #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

    #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

    #335161
    HansH
    Participant

    Hello Minal,

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

    Best regards

    Hans Hagmeijer

    #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

    #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

Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘color navigation in different headers’ is closed to new replies.