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

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

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

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1649553
    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?

    #1649592
    Leo
    Staff
    Customer Support

    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 ๐Ÿ™‚

    #1649799
    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?

    #1649820
    Elvin
    Staff
    Customer Support

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

    A wise man once said:
    "Have you cleared your cache?"

    #1650431
    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

    #1651212
    Elvin
    Staff
    Customer Support

    It’s simply to align things properly and to keep the visual balance. ๐Ÿ™‚

    No problem.

    A wise man once said:
    "Have you cleared your cache?"

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.