The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS On hover, move the navigation’s icon from current page item to the hovering

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #44005

    I’m currently creating a navigation. So far, I have a bg-image for the hover/current-page item which just appears on hover/when the site is active.

    But now, I want to advance it and add a nice transition effect to it. The idea was to move the icon of the current page item towards the hovering element.

    So, if you are on start and hover over ‘Vertrieb’ the pointer above the text should move to Vertrieb.

    If you are on ‘referenzen’ and move towards ‘blog’ or ‘├╝ber mich’ it should move towards it.

    I researched, however I didn’t find anything. Neither in German nor in English. Probably I missed the english one, since I’m not sure what to look after for it.

    Any Ideas? I already made a lot of navigations with text-transition, but this is way over my skill level.


    Thank you! I guess there’s no way to do it in CSS only?


    if the indicator icon is a abolutelly positioned element for example div or span and inserted at the end of the ul list you can make seperate rules for hovering each navigation element like

    .blog:hover ~ .indicator{left:500px}

    you will have to calculate all the values your self


    While this will work when everything is static, it’ll be hard/impossible if it’s dynamic.
    Thank you guys for your help!

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.