Conditional header

Hi there,

can you describe what the difference between that standard header and the conditional header will be ?

I want 2nd header to be transparent.

You can use a Header Element, to a. make the header transparent and b. merge it with the top of your content:

https://docs.generatepress.com/article/transparent-header-and-navigation/

Both options will use:

1. Customizer > Site Identity - a logo added here
2. Customizer > Layout > Primary Navigation --> Nav Location > Float Right.

Option 1:
Inline menu button will appear inside the mobile drop down:

Add a Menu Button to your navigation.
See this article:
https://docs.generatepress.com/article/adding-buttons-navigation/

BUT use 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 a Menu Bar Item for the button, will display in the header on desktop and mobile.

Use a GP Element, hook or block to add your Button:

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

Set the Hook to: menu_bar_items.

Save that.

And add this CSS:

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

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