Forums

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

Home Forums CSS Help with overlapping elements

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #276376
    madelinelise
    Participant

    Hello,

    I would appreciate it if someone could take a look at something I am stuck on. I am trying to create the following nav and search bar design:

    Nav Examp

    I made a quick codepen mockup to demonstrate where I am stuck:

    I am trying to place the search bar over the nav and under the slideshow, where the search box keeps the curve of the nav.

    I have played with z-indexes and haven’t had any luck. Any ideas or thoughts would be appreciated.

    Thanks!

    #276377
    Atelierbram
    Participant

    Have you tried a CSS clip-path over the search element?

    #276378
    Atelierbram
    Participant
    .search-btn {
      /* stuff */
      clip-path: polygon(50% 0%, 100% 0%, 100% 95%, 20% 92%, 30% 92%, 0% 92%, 0% 0%);
    }
    

    https://codepen.io/atelierbram/pen/oPoRKZ

    #276427
    madelinelise
    Participant

    I have not tried clip path. I will play with this, thank you!

    #276429
    Atelierbram
    Participant

    BTW: note the SVG in the HTML for the clip-path. There is a web-app “Clippy” by Bennett Feelly that’s very useful for playing with CSS clip-path. Also any blogpost on the subject by Sara Soueidan is recommended.

    Take care, have fun!

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