How to emulate top bar and header of docs.generatepress.com?

Hi there,

If you add two top bar widgets then one should be on the left and the other should be on the right by default.

You can use a navigation menu widget for one of the widgets.

Let me know if this helps :)

lovely, thank you so much. This is now nearly right, but in the primary menu the items right hand edge are not aligned to the right hand edge of the top bar secondary menu items.

I've tried adjusting the padding but this isn't solving the problem

I've added the url in the private information area for you to see, if you compare this with the docs.generatepress.com site - you'll see on your site the right hand edge of both the top bar and primary menu area are perfectly aligned. Any why it isn't aligned on my test site?

Hi there,

You can try adding this CSS:

.inside-top-bar.grid-container {
    max-width: 1200px;
    padding: 10px 20px 10px 0px;
}

@media (max-width: 1210px){
.inside-top-bar.grid-container {
    padding: 10px 20px 10px 10px;
}
}

@media (max-width: 768px){
.top-bar .inside-top-bar.grid-container {
    justify-content: space-between;
    padding: 10px 10px 10px 10px;
}
}

that's sorted it, thank you. out of interest and so I learn, why does the @media (max-width) need to be 10pixels larger than the main container?

Thanks again for excellent support

It's simply to align things properly and to keep the visual balance. :)

No problem.