Best way to achive the following Header - Nav

Hi there,

what happens to CTA Button on mobile?
Does it still show in the header or inside the menu dropdown ?

If you can explain both ways, it would be good so I can decide later ;-)

Hi @David,

Any news on this ?

Thanks !

Sorry i thought replied on this.

Option 1 - Menu item as a button, so it will be inside the mobile drop down:

1. Follow this guide:

https://docs.generatepress.com/article/adding-buttons-navigation/

But don't add the CSS.

2. Add this CSS instead:

@media (min-width:769px) {
    .main-navigation .main-nav ul li.nav-button a {
        background-color: #ffffff;
        border: 2px solid #000000;
        color: #000000;
        line-height: 35px;
    }

    .nav-float-right #site-navigation,
    #site-navigation .main-nav {
        flex: 1;
    }

    #site-navigation .main-nav>ul>li:where(:first-child, :last-child) {
        margin-left: auto;
    }
}

Option 2 - use the Menu Bar items to add a button which will be in the header on all devices.

1. Use a Block Element to add your button to the menu_bar_items hook:

https://docs.generatepress.com/article/block-element-hook/

2. Add this CSS:

@media (min-width:769px) {
    .nav-float-right #site-navigation {
        flex: 1;
    }

    .nav-float-right #site-navigation .main-nav {
        margin: auto;
    }
}