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

[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

[David]

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

[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.

[David]

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.

[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 🙂

[Gerhard]

Visualising again:

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

[David]

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

[Gerhard]

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

[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.

[David]

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.

[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.

[David]

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.

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

[David]

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

[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)

[Author]

Posts