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

[Christopher]

Hi there,

The top bar of docs.generatepress.com seems to be using columns in a 1/3 align left (with a link to the main site) , and 2/3 align right configuration with the secondary menu

What do I need to do to achieve the same?

[Leo]

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 🙂

[Christopher]

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?

[Elvin]

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

[Christopher]

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

[Elvin]

It’s simply to align things properly and to keep the visual balance. 🙂

No problem.

[Author]

Posts