Navigation Highlight Current Page

[Bugbee]

I’m trying to create a highlight or indication for the current navigation menu item, i.e., the current page and having some trouble emulating the “particle” effect created by the “Navigation Collapsed” element.

You can check out what I mean by visiting the staging website. I’ll send another obscured message next with login info.

here is what I’m trying to accomplish:

Any suggestions? I feel like this should be super easy and maybe I forget something simple?

Thanks!

[mldarshana]

Hi There,

Thanks for writing in! You can target the active menu item using the following example.

#menu-main-sidebar .current_page_item .x-anchor-text-primary {
    color: red !important;
}

Hope that helps.

[Bugbee]

Thanks, but this actually did not target the right element.

This is the right element:

.current-menu-item .x-anchor-text-primary {
color: red !important;
}

Also, i’m trying to target the :before element for the nav list to draw a line like the one in the image above:

.x-menu-collapsed li:before

[XSupport]

Hi there,

Please add the following CSS code in Pro > Launch > Headers > CSS. And add an"active" class in active menu-item.

.el6.x-menu > li > .x-anchor .x-anchor-particle-primary {
    width: initial;
    height: initial;
    color: initial;
    transform-origin: 100% 100%;
}


.el6.x-menu > li > .x-anchor[class*="active"] .x-anchor-text-primary {
    color: hsl(0,0%,100%);
}

.active {
    position:  relative;
}

.active:before {
    position:  absolute;
    content:  '';
    width: 30px;
    height: 10px;
    background-color: #d1d93c;
    top: 50%;
    transform: translateY(-50%);
}

.el6.x-menu > li.active .x-anchor-text-primary {
    font-size: 25px;
    color: #fff;
    font-weight:300 !important;
}

Hope that will work.

Thanks.

[Bugbee]

Sorry, where do I add the “active” class? I’m not sure where I should be looking for this.

Thanks.

[paul.r]

Hi,

Please disregard previous post.

You can try this code instead.

body .x-menu .current-menu-item .x-anchor-text-primary {
    color: #d1d749 !important;
}

body .x-menu .current-menu-item  .x-anchor-particle-primary {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);
}

Hope that helps.