Archived topic

Button in main navigation should overlap header height

1 reply · Started by Michael on January 12, 2021

Viewing posts 1–2 of 2

January 12, 2021 at 2:53 am #1615421

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

January 12, 2021 at 4:39 am #1615528

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

This archived topic is closed to new replies.

Start building better websites today.