Jump to content

Put Triangle Above Menu Line


chaseman

Recommended Posts

I've set up a  test page trying to move the triangle shortly above the menu bar, but unfortunately when I adjust the top attribute to a negative number of the background-position then the arrow simply gets cut off, because of the division.

 

Here's the test page: http://www.webprofitideas.com/css_testing/

 

I want to have the triangle right above the SUB-MENU (the blue line) when somebody hovers over the menu items of my blog on http://www.webprofitideas.com, I use the jQuery plugin Superfish for the navigation bar.

 

I'm not even sure if my approach is the right way do to so, by simply using the triangle as a background, maybe there's a better approach. I'd appreciate some suggestions.

 

Link to comment
Share on other sites

It indeed works, I stand corrected.

 

So I think if I assign a div into the SUB-MENU with jQuery for example (meaning without touching the source code or superfish) I may be able to achieve the same thing that you showcased on your link.

Link to comment
Share on other sites

Thanks for your suggestion btw, I got it to work on the test page: http://www.webprofitideas.com/css_testing/

 

And I "technically" got it work on my blog with Superfish as well, the only problem I have is that arrow is not showing up at all. You can have a look it here, if you simply hover over CONTACT http://www.webprofitideas.com I made the background red on purpose so it's visible where the arrow SHOULD be, I can not figure out why the superfish_arrow.png is not showing up at all, any ideas?

Link to comment
Share on other sites

I don't know when you looked, maybe you looked when I uploaded the new version. But anyway I got it to work now. It's placed in the exact position I wanted it to be placed. The only problem I have now is that it shows up a tad bit too late, it's animated together with the sub-menu.

 

Not sure how exactly to fix that, but I'll tackle that problem sometime later, I just have too much else to do now.

 

Thanks again for your help.

 

EDIT:

 

The arrow didn't show up because I had the path wrong, jQuery path seems to work differently, I thought if I add it to the JS folder and simply directly call it would work, but it doesn't strangely I had to put it in the wordpress folder (outside of the theme). I will define a better path later once I've figured out how jQuery paths work.

 

 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.