Grow your CSS skills. Land your dream job.

Help with jquery-magicline-navigation

  • # May 19, 2013 at 10:17 am

    Hey everyone.

    I am trying to use this technique for my own wordpress website re design.

    This is what im trying to do http://css-tricks.com/jquery-magicline-navigation/

    and this is my wbsite http://dev.planbfootball.com/

    As you can see its not sliding when you hover over.

    Can anyone please help ?

    # May 19, 2013 at 3:13 pm

    When you remove the bit about the background-color `backgroundColor: $magicLineTwo.data(“origColor”)` , and the comma on the line before in example.js then it should be good.
    It’s probably because you are not including/using the `jquery.color-RGBa-patch.js` (, but are calling it without it being defined ).
    **!Edit = incorrect : see under.**

    # May 19, 2013 at 4:26 pm

    @Atelierbram thanks for that. But I still can do it. I have removed the line you said and comma.

    I really suck with this kind of stuff !!

    # May 19, 2013 at 5:39 pm

    @hal8 Seems that my previous suggestion was not correct, since I can not reproduce the issue [here in this Codepen](http://codepen.io/atelierbram/pen/gCqDy “”), where I tried to isolate the problem, but which just works strangely enough. Maybe you can try to temporarily disable some of the other javascript files, and see if you can isolate it that way.

    # May 19, 2013 at 6:01 pm

    The css-tricks version put in CodePen, doesn’t work (the width needs to come from the `a` elements, not the `li`). What it does is floating all the `a` elements, so the `li` elements don’t contain them anymore. All the `li` elements hug up with width and height zero, that’s why setting the magic line position to the `a` position works.

    You however, are using inline-block on the `li` elements, making them to contain their floated `a` elements (because of block formatting context of inline-blocks).

    # May 19, 2013 at 6:29 pm

    This should work for you: http://codepen.io/CrocoDillon/pen/KxLpq

    # May 19, 2013 at 7:24 pm

    @Atelierbram I think it works in your Pen but not on @hal8‘s website because on his website he got `position: relative` on almost everything. Without `position: relative` and padding on the `li` elements it seems to work as well (put the padding on the `a` elements instead).

    # May 20, 2013 at 7:44 am

    @CrocoDillon Yes you cracked it! @hal8 : either remove the `list` element from `line 33` in `style.css`

    div,
    article,
    section,
    header,
    footer,
    nav
    /*, li */ { position:relative;
    }

    ( Can maybe also remove that block all together; it’s a bit heavy handed. )
    Or override the style in `navigation.css` like so:

    #fancy-nav li {
    padding: 0;
    float: left;
    display: block;
    position: static;
    }

    # May 20, 2013 at 4:45 pm

    @Atelierbram and @CrocoDillon. Thank you so much for the help. I really appreciate it. Think it is done now !! You guys are legends

    # July 2, 2013 at 5:58 am

    Can someone help me ! I do really want to use this for my project, but the problem is, everytime im going to put all the files & codes. My other plugin slider is not working. any tips ?

    # July 2, 2013 at 8:06 am

    Try putting your code into Codepen so we can see a n example of what it is you are trying to do and what might be breaking.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".