0

I'm trying to achieve this:

https://codepen.io/digistate/pen/OXXjXM

The only difference with my code is that I am using a :before to display the line and my line is at the top of the menu instead of the bottom.

I've tried this code but I can't get it working...

This is my menu code:

<nav class="raven-nav-menu-main raven-nav-menu-horizontal">
    <ul id="menu-1adb35a" class="raven-nav-menu">
        <li class="menu-item menu-item-type-post_type menu-item-home current-menu-item page_item current_page_item">
            <a href="http://185.104.28.45/~pmnew/" aria-current="page" class="raven-menu-item raven-link-item  raven-menu-item-active">Item 1</a>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-194">
            <a href="http://185.104.28.45/~pmnew/program/" class="raven-menu-item raven-link-item ">Item 2</a>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-195">
            <a href="http://185.104.28.45/~pmnew/about/" class="raven-menu-item raven-link-item ">Item 3</a>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-196">
            <a href="http://185.104.28.45/~pmnew/news/" class="raven-menu-item raven-link-item ">Item 4</a>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-197">
            <a href="http://185.104.28.45/~pmnew/contact/" class="raven-menu-item raven-link-item ">Item 5</a>
        </li>
    </ul>       
</nav>

The code for the line on top (:before)

nav li.menu-item.current-menu-item > a:before {
    content: "";
    height: 3px;
    width: 100%;
    background-color: #952d95;
    top: -61px;
    left: 0;
    position: absolute;
}

This is the javascript code I changed to work with my code:

$nav = j$(".raven-nav-menu-main"),
$slideLine = j$("a.raven-menu-item:before"),
$currentItem = j$(".current-menu-item");

Link to pen: https://codepen.io/mdia/pen/XWXwRvX

Can someone help me with this?

n00bly
  • 395
  • 6
  • 21
  • Please provide a proper [mre] of your issue. – CBroe Jul 28 '20 at 09:23
  • @CBroe I've added a link to my Pen – n00bly Jul 28 '20 at 09:40
  • You can not access and manipulate pseudo elements like this, https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin – CBroe Jul 28 '20 at 09:45
  • @CBroe Clear, I've tried to add a but it's done with a page builder so when I add a a lot of code around it will be added also :( – n00bly Jul 28 '20 at 09:47
  • 1
    “page builder” meaning something server-side, I presume? Then just add it on the client side, _via_ JavaScript. – CBroe Jul 28 '20 at 09:50
  • Thanks, that's maybe another way to do it. I will try to add a through javascript and then try the code again. – n00bly Jul 28 '20 at 09:51

0 Answers0