Support » Theme: GeneratePress » Color text links and widening submenu

  • Resolved focuswp

    (@focuswp)


    Hello,
    I encounter two problems.

    1. The color of the theme links no longer works when I put this code. These are the colors of the text links of all the site that are affected and not those of the breadcrumb. Do you have any idea of ​​the problem?

    #breadcrumbs { padding: 15px; color: #d15d23;font-style:italic;} 
    a, a:hover {color: #191919;}

    2. To extend and widen the main submenu at the top, I put this code but a warning says: “using width with padding (and padding-right) can sometimes make elements larger than you expect”. Would you have an improvement to offer me?

    .main-navigation .main-nav ul ul li a { padding :20px 20px;width: 400px;padding-right:10px;}
    .sub-menu,
    .sub-menu > li:last-child > a {
        width: 250px;padding-right:230px;}

    For information, I use elementor for links and Yoast SEO for the breadcrumb.

    Thanks for your help !

Viewing 13 replies - 1 through 13 (of 13 total)
  • focuswp

    (@focuswp)

    Hello again,

    Regarding the color of the links, adding: “#breadcrumbs” in front of “a, a: hover {color: # 191919;}”, I managed to recover the color of the links of the site but not the color of the links on the flyover nor visited links (of the site). But small precision, to change the color of links, the “link color” feature does not work. But by using the “visited links color” feature, this changes the color of the unvisited link. So there is an inconsistency.

    Thanks

    • This reply was modified 6 months ago by focuswp.
    Theme Author Tom

    (@edge22)

    Hi there,

    1. Try this instead:

    #breadcrumbs { padding: 15px; color: #d15d23;font-style:italic;} 
    #breadcrumbs a, #breadcrumbs a:hover {color: #191919;}

    2. That’s a lot of padding. If it’s necessary, try this:

    .main-navigation .main-nav ul ul li a {
        padding: 20px 20px;
        width: 400px;
        padding-right:10px;
        box-sizing: border-box;
    }
    
    .sub-menu,
    .sub-menu > li:last-child > a {
        width: 250px;
        padding-right: 230px;
        box-sizing: border-box;
    }

    Let me know πŸ™‚

    focuswp

    (@focuswp)

    Hi Tom,

    Thank you for your answer ! πŸ™‚

    You helped me solve the problem of the expanded menu. But instead of putting “border-box”, I put “content-box”, otherwise the sub-menu overlapped, and I could not adjust them. So I put this code and it seems to work well:

    .main-navigation .main-nav ul ul li a {
         box-sizing: content-box;
    width: 195%;
    padding-right:20px;padding :20px 20px;
    }
    
    .sub-menu,
    .sub-menu > li:last-child > a {
        box-sizing: content-box;
    width: 100%;
    padding-right:230px;
    }

    For the color of the links, I put your new css code, but it does not work well. However, if I remove the “color of the visited links”, everything works well between “the color of the links” and “the color of the links on the flyover”. And If I use the “color of visited links”, the colors are reversed between “links”, “overflight” and “visited”. I tried several things: remove all my css code, disable the plugins, but that does not change anything.

    Finally, for information, by doing my tests on tablet, I realized that the problem of submenus had returned in the same conditions as before. That is, the submenus are not clickable on android tablet (maybe due to the last update, I do not know)
    https://wordpress.org/support/topic/sub-menus-do-not-work-in-tablet/

    Thank you !

    Theme Author Tom

    (@edge22)

    What’s the color of the visited links? You can specify the visited color as well:

    #breadcrumbs { padding: 15px; color: #d15d23;font-style:italic;} 
    #breadcrumbs a, #breadcrumbs a:visited, #breadcrumbs a:hover {color: #191919;}

    Has anything changed on the site since we resolved the tablet issue? What’s the URL to the site again?

    Let me know πŸ™‚

    focuswp

    (@focuswp)

    1. In fact, I was talking about the color of the links of the site and not that of the breadcrumb. (I had the impression that the breadcrumb code influenced the color of the site links, but the problem still exists despite the new code). I leave you an example on my test site :

    http://conseilspedagogiques.com/

    At the bottom of the home page, I put two links. Colors, I put them through the features of the theme and not the code:

    link: blue
    hover: pink – purple
    visited: green

    And the result at home, is that the colors appear but not in the desired order. This result improves if I erase the color of the visited. The link and the hover then correspond to the requested colors.

    2. Regarding the android tablet sub-menu, according to my last test, this only appears on the internet explorer tablet. I have not changed anything on the test site since the last time, except for updates that did nothing bugger. I ended up opting for the click menu for more structure and stability. So that does not bother me right now.

    Thank you

    focuswp

    (@focuswp)

    N.B : For accuracy, here the links color works well on Google Chrome but not on Firefox and Safari.

    • This reply was modified 6 months ago by focuswp.
    Theme Author Tom

    (@edge22)

    Sorry, I’m not sure I understand the overall issue with the links. It looks like they’re blue, and then when they’re clicked, they’re pink. This makes sense, as you have the pink set as your visited color in the Customizer.

    I’m not seeing anything out of the ordinary there. Can you explain a bit more? I’m sure I’m just missing the point.

    As for the tablet issue, what kind of tablet has IE? IE itself is a nightmare when it comes to features like this, so I’m not 100% confident a fix will exist.

    Let me know πŸ™‚

    Sorry, I reversed the colors of “hover” and “visited”. So the setting I made initially is the following :

    link: blue
    hover: green
    visited: pink

    And what happens is that the link here is pink and not blue as set. And the visited is green. Blue never appears. It is the probleme. But if I remove the “visited”, the blue appears as a link. So I removed the link “visited” on my real site.

    I am on Firefox and Mac Book Pro regarding links.

    I understand the problem with Internet Explorer, I was not asking for a fix. I wanted to report the problem. I use the Acer One 10 Android tablet.

    Theme Author Tom

    (@edge22)

    Hi there,

    Here’s what I see when I visit your site, since I’ve visited both links: https://screencast.com/t/lqQ2UZcCda9

    If I hover over them, they go green.

    When I visit your site in incognito mode (no cache or cookies, so it doesn’t think I’ve clicked the links), I see this: https://www.screencast.com/t/uFJylqkTgu1T

    When I hover, they go green.

    Can you try in incognito/private mode as well?

    Thanks for the reporting the IE issue, I’ll see if there’s anything I can do.

    Hello,
    I opened the site on Firefox with the private window, and I have the same results as you. In non private, the color blue is not respected and in private, it is. I do not understand where it comes from.

    Theme Author Tom

    (@edge22)

    When you click a link, the browser remembers it’s been clicked and will now use the “visited” color when the link appears again. This is true even if you visit the page a week later.

    This visited color will persist until the browser forgets about your click (cookies are cleared).

    Private mode doesn’t keep cookies, so it always shows the regular link.

    OK that, I did not see it. I was not aware at all. Thanks Tom for this information!
    Best regards πŸ™‚

    Theme Author Tom

    (@edge22)

    You’re welcome πŸ™‚

Viewing 13 replies - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.