Forums

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

Home Forums CSS [Solved] Circle navigation with up arrow below

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

    Hello all,

    I am attempting to create element from a photoshop mockup for a company site. A screenshot of this element can be seen in the Screenshot of Element link. I am not a CSS ninja but I have put together a fair attempt, however it is flawed. The result can be seen in the codePen link. You can see that the green border under the arrow is not flush with the left most circle because the padding extend the parent element. If anyone can give me some pointers I would appreciate it. I also added my code. Thanks.

    Screenshot of Element

    CodePen

    #164968
    Paulie_D
    Member

    Ok…it took me a few minutes to wrap my head around it but the .wrap div actually came in handy.

    http://codepen.io/Paulie-D/pen/tjeFA

    #165112
    Paulie_D
    Member

    @aaron1919 Hope the above helped.

    #165115

    Hello Paulie D,

    Thank you for your input, yes it helped very much. I made some slight adjustments in the end since the arrow was only supposed to show on the active link, however your concept was much appreciated. Again thank you.

    Best Regards,
    Aaron.

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