[Support request] Button in main navigation should overlap header height

Home Forums Support [Support request] Button in main navigation should overlap header height

Home Forums Support Button in main navigation should overlap header height

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1615421
    Michael

    Hi guys

    My goal is to have a call to action button as main navigation item.
    This button should overlap the header height, also for the sticky header.

    Please see images via link in the private section. One version represents the current version with the call icon (rectangle) and the other version is a mockup of a pink circle (goal).

    I believe this can be achieved using z-index in CSS – is that correct or what else would you recommend?

    Thanks a lot
    Michael

    #1615528
    David
    Staff
    Customer Support

    Hi there,

    you can try this CSS to add a rounded element behind the last menu item:

    @media(min-width: 769px) {
        .main-navigation li:last-child a {
            position: relative;
        }
    
        .main-navigation li:last-child a:before {
            content: '';
            position: absolute;
            top: -150%;
            left: 0;
            width: 100%;
            height: 400%;
            background-color: red;
            border-radius: 50%;
            z-index: -1;
        }
    }
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.