Header/Primary Navigation help

If we want the CSS to apply to a certain viewport, we wrap it in @media rule.

Example: applying the css only on tablets and small desktop screens.

@media(min-width:769px){
.site-branding {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 101;
}
}

GeneratePress viewports are the ff:
@media(max-width:768px) {} - for mobile screens
@media(min-width:769px) {} - for tablets to all desktop screens
@media(min-width:769px) and (max-width:1024px) {} - for tablets and small desktop screens
@media(min-width:1025px) {} - for larger desktop screens

Hmm, it also seems on mobile, that after tapping the search icon, the beginning of the search box is hidden behind the “X”. Can you please help fix this?

We can add padding to the form input so there's no overlap issue.

form.search-form.navigation-search.nav-search-active {
    padding-left: 60px;
}

Where padding-left is equal to the width of the close button.

Great to know about the @media rules. The search padding suggestion worked like a charm, thank you.

No problem. Glad it worked for you. :D