• Resolved tiggerkater

    (@tiggerkater)


    dear malihu,

    thanks for your plugin.

    i am using it on several sites, but cannot figure out how to setup the css properly for highlighting.

    the websites are one page sites (built with generatepress) with anchor links, which should change color on scrolling and jumping to sections. the “active” section should stay highlighted.

    i can see the ps2id classes but dont know how to call the right attribute.

    i tried e.g. (and many other versions ๐Ÿ˜‰

    #primary-menu .main-nav a.__mPS2id-highlight {
    color: #FBBE4D;
    } 
    #sticky-navigation a.__mPS2id-highlight {
    background: #FBBE4D; 
    } 

    please help! thanks!

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 15 total)
  • Plugin Author malihu

    (@malihu)

    Hello,

    The correct CSS should be:

    #primary-menu.main-nav a.mPS2id-highlight {
    	color: #FBBE4D;
    } 

    The second CSS rule you have is not needed as there’s no #sticky-navigation in your page.

    Also, go to plugin settings and disable the “Keep the current element highlighted until the next one comes into view” option.

    Let me know ๐Ÿ™‚

    Thread Starter tiggerkater

    (@tiggerkater)

    thanks mailhu,
    for the super fast reply!
    i tried your code and it works e.g. on the blog page, but it does not on homepage/front-page.
    there all links are red and not only the one of the clicked section…
    kind regards!

    ps (edit): interestingly the “hover” color doesnยดt work, too, so perhaps i have to ask GP support!

    Plugin Author malihu

    (@malihu)

    No problem ๐Ÿ™‚

    To reset the theme’s highlight and keep “Page scroll to id” scrolling and hover highlight, add the following to your CSS:

    .main-navigation .main-nav ul li[class*="current-menu-"] > a:not(:hover):not(.mPS2id-highlight){
    	color: #FBBE4D;
    }

    Also, since you don’t need to highlight the mobile menu links, you should change the “Selector(s)” option in plugin settings to:

    #primary-menu a[href*='#']:not([href='#'])
    Thread Starter tiggerkater

    (@tiggerkater)

    dear malihu,
    thanks for all your help. we are getting there – but still a tiny way to go ๐Ÿ˜‰

    the hovering works now, but the color does not change when scrolling through the one pager and does not stay highlighted, when the menu-item is selected. what can cause the problem?

    and please clarify for me the “selector(s)” option: should i put your code in the the “selectors are excluded” box?
    kind regards and many thanks again!

    Plugin Author malihu

    (@malihu)

    No, not in the โ€œselectors are excludedโ€ box. You change the first “Selector(s)” field from:

    a[href*='#']:not([href='#'])

    to:

    #primary-menu a[href*='#']:not([href='#'])

    Change this option, save changes and let me know so I can check it again.

    Thread Starter tiggerkater

    (@tiggerkater)

    thanks for clarifying, i just changed it! many thanks!

    Plugin Author malihu

    (@malihu)

    OK try one more thing:
    In plugin settings disable “Allow only one highlighted element at a time” option.

    Thread Starter tiggerkater

    (@tiggerkater)

    YEEESSS!!!
    removing th “allow only one highlighted element” did the trick!

    thanks a million! all the best!

    • This reply was modified 4 months, 3 weeks ago by tiggerkater.
    Thread Starter tiggerkater

    (@tiggerkater)

    ps: on another onepage i have again problems with the “hover” attribute. should i open a new topic to send you the site-link?
    thanks again for your support (just gave you a well deserved 5 star review.)

    Plugin Author malihu

    (@malihu)

    Thanks for the review ๐Ÿ™‚

    No need to open a new topic. Tell me which page you want to me to check ๐Ÿ™‚

    Thread Starter tiggerkater

    (@tiggerkater)

    its this page: https://www.kochtafelkultur.at/
    the highlighting works perfectly, but hovering does not work. the color is set in the theme editor, but if i enable your css from above,

    .main-navigation .main-nav ul li[class*="current-menu-"] > a:not(:hover):not(.mPS2id-highlight){
    	color: #FBBE4D;
    }

    hovering does not work and also highlighting is somehow “disturbed”.
    so perhaps the wrong selector. but i cant figure out the problem…. (my tiny css skills ๐Ÿ˜‰

    Plugin Author malihu

    (@malihu)

    No problem ๐Ÿ™‚

    Not sure if this is the color you want for the hover but you can simply do this:

    #primary-menu.main-nav a:hover {
        color: #A71B18;
    }

    Let me know ๐Ÿ™‚

    Thread Starter tiggerkater

    (@tiggerkater)

    thanks malihu,

    it works, as it should.
    Interesting to know would be for me: why does the (hovering) color/scheme selected in the customizer not work, and the costum css does?
    thanks again for all your help, best horst

    Plugin Author malihu

    (@malihu)

    You’re welcome ๐Ÿ™‚

    Sometimes we need to override some CSS rule with another one. Selecting a color in the customizer adds a CSS rule to the document but another plugin or some other CSS might override it. In such cases we need to override it again ourselves with another rule.

    Thread Starter tiggerkater

    (@tiggerkater)

    thanks malihu for clarifying,
    so i will try to do this in the future as a first step.
    and thanks again for all your help and great support!
    kind regards!

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