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

[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

[David]

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;
    }
}

[Author]

Posts