Highlight active Navigation Typo

[fotofred]

I want to make highlighting the item in the menu when this page is active (not pseudo “:active”).
Does anybody knows a workaround?

greetz
Fred

[rod_barbee]

You can highlight the current page menu item with phplugins and custom css. See the phplugins-pangolin-sample.php file, starting at line 407 for a sample function.
That function will add the class “current_page_item” to the menu item. You can then create the class “.current_page_item” in your custom css file and style it however you like.

[fotofred]

Thx a lot, i will try.

[fotofred]

Hi Rod,

i know tried this 3 command but i think there is an error:

/* Navigation Menu highlight*/
.menu-highlight{
color: #aaaaaa;
}

.fancybox-button svg {
display: block;
height: 100%;
overflow: visible;
position: relative;
width: 100%;
background-color: none;
}

nav.nav_v .menu-item a:active, nav.nav_v .menu-item span:active, nav.nav_v .menu-item li a:active, nav.nav_v .menu-item li span:active {

color: #aaaaaa;

}

a:active, a:focus {

color: #aaaaaa;
text-decoration: none;

}

---

Try and Error, but no honor hahaha

[rod_barbee]

Is “menu-highlight” the class you added to the current page’s menu item in the phplugins function?
Did you activate that function by removing the indicated line just before the function?

can you post a link to the site?

[fotofred]

Yes is added in phpplugins.

the style commands from my posting before are in custom.css

pagelink:
https://fotofred.de/?page=reihen

[rod_barbee]

then your custom css should use that class:

.current_page_item {
your styling...
}

[rod_barbee]

I see the script in the page source code, but I don’t see the class being added to the anchor tag.
I think @Matthew will need to take a look in case something needs to be changed in the script.

[Matthew]

window.location is going to break down the address https://fotofred.de/?page=reihen like this:

{
    "ancestorOrigins": {},
    "href": "https://fotofred.de/?page=reihen",
    "origin": "https://fotofred.de",
    "protocol": "https:",
    "host": "fotofred.de",
    "hostname": "fotofred.de",
    "port": "",
    "pathname": "/",
    "search": "?page=reihen",
    "hash": ""
}

So, I think the problem you’re facing is that matching window.location.pathname to the current URL just isn’t going to be a match.

Maybe …

..."ul.menu a[href='" + window.location.origin + window.location.search + "']")

or …

..."ul.menu a[href='" + window.location.pathname + window.location.search + "']")

[fotofred]

@Matthew

ul.menu a[href='" + window.location.pathname + window.location.search + "']")

both don’t work

[rod_barbee]

try a little more specificity in the selector:

li.menu-item.current_page_item a {
    color: red;
}

[fotofred]

Yes! Got it.

In my Admin Setting i´ve got:

but the Url in Browser shows:

because of that my startpage www.fotofred.de got no highlightning in the Menu,

[Matthew]

@Ben might be able to comment further on why your page URLs are formatted as such. Is there anything historically relevant, like did we troubleshoot a host problem for you in the past that might have resulted in your URLs being in that format?

[fotofred]

I had probleme with Lightoom Publisher to connect.

Unable to find Publisher. Please check that the API URL is correct. But Subdomain works

Hi @fotofred, thanks for your reply about the different domain. The issue is that clean URLs are not working on this domain. Is this on the same host and server as your other sites? A workaround is to use the following for the Publisher API URL: https://fotofred.de/backlight/?m=publisher

After this it works. Not shure if it can be the probleme of issue.
I check my Hosting configuration at Hoster cpanel later.

[fotofred]

After designing the layout more precisly i like the highlight off at Landingpage.