[Resolved] How can I create a fixed top bar, header and top menu?

Home Forums Support How can I create a fixed top bar, header and top menu?

Viewing 15 posts - 1 through 15 (of 32 total)
  • Author
    Posts
  • #880310
    Gerhard

    Hi,
    I’d like to have the top bar, header and main menu stay in place on top while scrolling the content.
    I’ve tried various methods (e.g. hooks) but in vain.
    Can you help me solve the issue, please.
    Thanks in advance!

    Gerhard

    GP Premium 1.8.1
    #880327
    David
    Staff
    Customer Support

    Hi there,

    in your CSS:

    .custom-fixed-header {
          position: fixed;
          top: 0;
          width: 100%;
          z-index: 2000;
    }

    you can change the top: 0; value to 41px which is the height of the top bar. And then fix your top bar:

    .top-bar {
        position: fixed:
        width: 100%;
        z-index: 1;
    }
    #880349
    Gerhard

    David, thanks a lot for the very quick reply!
    The problem has not completely been solved yet. Header and menu are sticky now, but the top bar partly hides the header.
    In fact, I only introduced a top bar because when adding two text widgets to the header they appeared one below the other, not side-by-side.
    If I could place the info given in the top bar in a text widget to the right of the existing text widget with the company address I would be happy and the top bar could then be eliminated.

    #880351
    David
    Staff
    Customer Support

    if you want to add the content to the header widget and provide us a mockup of how you want it to look then we can help with some CSS to do that.

    #880356
    Gerhard

    The header area should look like that:
    The company logo is left.
    Right of the logo the company address should appear in 3 or 4 lines:
    street
    postal code and town
    phone
    (email)
    Right of the company address (i.e. on the right side of the header area) the info about business hours should be placed (3 lines).
    Alternatively the email address (which is relatively long) could be placed as an extra line below the two text blocks.
    I try to visualise this:

    logo company address business hours
    email (with a link)

    I hope I could make myself understood 🙂

    #880360
    Gerhard

    Visualising again:

    logo……………………………company address …………………business hours
    ……………………………….email

    #880439
    David
    Staff
    Customer Support

    In your header element can you add a separate HTML widget for each of those elements ie.
    1. Company Address
    2. Business Hours
    3. Email

    Remove the top bar. And then i provide some CSS to align them

    #880463
    Gerhard

    Very well! Thank you.
    I’ ll add the three widgets and tell you when I’m ready.

    #880588
    Gerhard

    David,
    I’ve created the three html widgets which now show one below the other.
    I’d like to arrange the two top sections horizontally and the email below both.
    The header section shouldn’t consume much more space than the logo. Font size could be made smaller if necessary.
    The header section as well as the main menu should stay visible while scrolling.

    #880601
    David
    Staff
    Customer Support

    Try this CSS:

    .header-widget {
        display: flex;
        flex-wrap: wrap;
    }
    .header-widget .widget {
        flex: 1;
        margin: 0 1em;
    }
    .header-widget .widget:last-child {
        flex: 1 0 100%;  
    }
    @media (max-width: 1024px) {
        .header-widget {
            max-width: 100% !important;
        }
    }

    You need to give the Header some top padding in Customizer > Layout > Header.

    #880608
    Gerhard

    David,
    you are so quick! Thanks!
    Almost perfect solution!
    2 things remain:
    the beginning of the mail address is not visible (“ail@….)
    The header and the menu are not yet sticky.

    #880630
    David
    Staff
    Customer Support

    I made a slight adjustment to the CSS above to fix the email being cut off.

    What happened to the code you were using to fix the header and nav before? This would still apply.

    #880660
    Gerhard

    The mail address is okay now.
    I inserted the css code for the sticky header area and menu but there is no effect: Both still disappear when scrolling the content. The top bar is no longer used.
    css code:
    .custom-fixed-header {
    position: fixed;
    top: 41;
    width: 100%;
    z-index: 2000;
    }

    .top-bar {
    position: fixed;
    width: 100%;
    z-index: 1;
    }

    #880684
    David
    Staff
    Customer Support

    So scrap that CSS. We’re gonna need to put a wrap around the site header and the navigation. This will require creating 2 hook elements:

    https://docs.generatepress.com/article/hooks-element-overview/

    First Hook:
    Title: Header Wrap Open
    Content:
    <div class="custom-fixed-header"><!-- Open header wrap -->
    Note: the editor may add a closing </div> automatically. Delete it, if it does.
    Hook: before_header
    Display Rules tab > Location: Entire Site

    Second Hook
    Title: Header Wrap Close
    Content:
    <!-- Close header wrap --></div>
    Hook: after-header
    Display Rules tab > Location: Entire Site

    Then add this CSS:

    .custom-fixed-header {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }
    #880700
    Gerhard

    I created the two hooks.
    When I add the css code there are two errors:
    position: -webkit-sticky; (only “static / relative/ absolute / fixed” possible)
    position: sticky;(only “static / relative/ absolute / fixed” possible)

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