All menu items highlighted

Resolved

(@pesiiin)

Hi, everything worked ok before I must change menu custom links from “#anchor” to “/#anchor” to work from other pages then onepage homepage only. Now on homepage every menu links looks active/hover. On other pages (single portfolio: https://myconstruction.cz/portfolio/belocerkevska/ ) menu works like I wish. (Probably because anchors are not present on page).
My CSS to highlight menu:

.main-navigation .menu > .menu-item > a::after {
    content: "";
    position: absolute;
    left: 5%;
    color: #ff8700;  
    bottom: 0px; /* controls where the line appears on hover */
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    display: block;
    width: 0;
    height: 5px; /* controls thickness of the line */
    background-color: currentColor;
    transition: 0.3s width ease;
}

.main-navigation .menu > .menu-item > a:hover::after,
.main-navigation .menu > .menu-item > a:focus::after,
.main-navigation .menu > .current-menu-item > a::after, 
.main-navigation .menu > .menu-item > a.mPS2id-highlight::after{
    width: 90%; /* controls the width of the line */
    color: #ff8700;  
}

How could I solve this please ?
Thanx Radek

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

Viewing 4 replies - 1 through 4 (of 4 total)

Plugin Author malihu
(@malihu)

5 years, 9 months ago
Hello,

Your menu links get highlighted by the theme and another CSS selector in custom/additional CSS:

.main-navigation .menu > .current-menu-item > a::after

It’s normal for themes to highlight the current page menu items/links, as they indicate to the user the current page he/she is in. In your case, your theme’s CSS selector that does this is:

.main-navigation .main-nav ul li[class*="current-menu-"] > a

You are correct in guessing that in /portfolio/belocerkevska/ your links do not get highlighted because anchors are not present on page (i.e. are not indicating the current page).

The solution is to revert the CSS by adding the following to your custom/additional CSS:
```
.main-navigation .main-nav ul li[class*="current-menu-"] > a._mPS2id-h{
    color: inherit;
}

.main-navigation .menu > .current-menu-item > a._mPS2id-h::after{
    width: 0;
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a._mPS2id-h:hover, 
.main-navigation .main-nav ul li[class*="current-menu-"] > a._mPS2id-h.mPS2id-highlight{
    color: #ff8700;
}

.main-navigation .menu > .current-menu-item > a._mPS2id-h:hover::after, 
.main-navigation .menu > .current-menu-item > a._mPS2id-h.mPS2id-highlight::after{
    width: 90%;
}
```
The above CSS will also highlight the menu links dynamically as you’re scrolling the page, via the .mPS2id-highlight class (if you don’t want this, simply remove from the above the 2nd selector that contain the .mPS2id-highlight class).

I’d also suggest to go into plugin settings and enable “Prevent other scripts from handling plugin’s links” option (in order to prevent your theme’s smooth scrolling function).

Let me know if this helps
Thread Starter pesiiin
(@pesiiin)

5 years, 9 months ago
Thanx a lot for quick help.
Now menu is working on homepage, but on single portfolio page there is only hover color, but no ::after line. Current additional CSS:
```
.main-navigation .main-nav ul li[class*="current-menu-"] > a._mPS2id-h{
    color: inherit;
}

.main-navigation .menu > .current-menu-item > a._mPS2id-h::after {
    content: "";
    position: absolute;
    left: 5%;
    color: #ff8700;  
    bottom: 0px; /* controls where the line appears on hover */
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    display: block;
    width: 0;
    height: 5px; /* controls thickness of the line */
    background-color: currentColor;
    transition: 0.3s width ease;
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a._mPS2id-h:hover, 
.main-navigation .main-nav ul li[class*="current-menu-"] > a._mPS2id-h.mPS2id-highlight{
    color: #ff8700;
}

.main-navigation .menu > .current-menu-item > a._mPS2id-h:hover::after, 
.main-navigation .menu > .current-menu-item > a._mPS2id-h.mPS2id-highlight::after{
    width: 90%; /* controls the width of the line */
}
```
I think only need add some selector to width: 90% part, but really dont know which one 😉
Plugin Author malihu
(@malihu)

5 years, 9 months ago

Did you fix it? I can see the line when I hover your menu items on /portfolio/belocerkevska/. The CSS selector (for the 90% width) is already there:

.main-navigation .menu > .menu-item > a:hover::after

Thread Starter pesiiin
(@pesiiin)

5 years, 9 months ago

Yes I tryed something and it works. Thanks a lot for Your support.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘All menu items highlighted’ is closed to new replies.