Sticky header that stays the same as designed in desktop & mobile.

Hi,

In a cap prior to implementing the whole song and dance:

" what was kind of nebulous is the height that I had to apply for the header to stay exactly the same. There is margin that is applied automatically by the plugin and I wasn’t certain that I would get it right."

Essentially I don't want to get the wrong height to avoid CLS caused by CSS resizing of the logo and other items and I can't figure it out.

Since the beginning I want the layout that is in the sandbox to become sticky exactly like it is ;) Sticky top bar, sticky header & sticky border. I switched the content from the menu widget to the top bar thinking it was the only way to implement 50% transparent background on scroll with an ease in of 4 seconds :)

If it's too complicated, and it seems so, screw it, I will leave it as it is with a cumulative layout shift of 0.026 I like that CLS and a fully loaded mobile website of 1.1 second in webpagetest.org without a Content Delivery Network CDN eh eh :)

Please advise.

Hi,

I'm having display issues with the sticky header & top bar on all browser on an ipad mini.

There is a large gap between the top bar & the header that's introduced. Also the header is overlapping on the hero image.

Find enclosed the screenshot:

Please advise on solution.

Forgot

The top bar and header also don't stick.

Hi,

After watching all the videos and reading almost all the documentation.

I now understand that the https://docs.generatepress.com/article/generate_menu_bar_items/ is to add items to the menu bar that I confused with the top bar.

The documentation is cryptic. There is no onboarding get started on anything. I don't have the slightest idea how the elements add-on works even after watching all the videos and reading all the documentation.

Think you are confused I am confused as hell. I don't understand how hooks work and where to put the code for them. I don't understand in elements what code I must put at the beginning of the header element.

After all this I finally understand that the opening hours, phone number & button would be added to the menu bar instead of putting them in the top bar. Still, I have no idea how to implement that with the header element and a hook as recommended. And then it probably would not be the best solution as I would run out of space.

I see that there is a possible way to accomplish possibly anything although the documentation and guides are so scarced that I don't even understand the hooks and elements of Generate Press pro. I even saw in a video that I can use GenerateBlocks in elements and can't grasp how to actually implement it.

Between going through the customizer in WordPress, creating a page with WordPress Gutenberg using GenerateBlocks or not, the elements with using again GenerateBlocks or not and the hooks I am completely confused, completely lost and basically feel like I have a mental disability although I know that I don't.

The documentation and guides are as lean as the code although it's definitely not as performant since I don't understand the ecosystem.

Is it possible to get a getting started guide or video and another guide or video explaining the whole ecosystem. How a bout videos or guides that accomplish tasks from beginning to end instead of take part of this guide with part of this other guide and do your best to fill in the gaps.

Sorry for the confusion. Let's tackle one issue at a time.

Can you first confirm that this is the final result you'd like to achieve for both static and sticky navigation?

If so I'll write out the step by step for you.

Hi,

Sincerely I would like the design of the site header to look like the one on the existing site. I find that now the top bar looks like poop in desktop in the sandbox.

I can't figure out how to get the site logo starting at 327 wide, menu going centered to two lines high when reducing screen size with opening hours and phone number on the right in desktop.

Tablet site logo at 192 wide, hamburger menu in the center, opening hours & phone number on the right.

Mobile site logo 192 wide, hamburger menu on the right, opening hours & phone number underneath.

All the above with the bottom border going sticky with the ease in and 50% black.

The only thing that I would actually change from the original site is the phone number with link for the button in the sandbox that I find hot.

I actually figured out how to do a hook. I implemented https://docs.generatepress.com/article/split-header-three-sections/ the site logo didn't show and there wasn't any menu! I dropped it like a hot potato. Yeah, a site header without a menu that doesn't display the site logo! Fill in the huge gaps dude!!!

Don't get me wrong I'm really doing my best to learn this. I am learning a lot. The documentation isn't really helping. The documentation is done like a whole bunch of separate modules with very little start to end video or text tutorials.

When I started using GeneratePress I searched for a getting started video. Nothing on GeneratePress website. I found this on YouTube https://www.youtube.com/watch?v=N0C1Mj-v8fI Shouldn't you guys be doing videos like that on your theme? Another complete video on how to create a site header. Another complete video on how to create the footer. And so on.

Frankly, the only reason that I am persisting is because of the outstanding performance results and support.

I really like GenerateBlocks ;)

Hi,

I just found this little nugget nicely hidden: https://docs.generatepress.com/article/block-element-overview/ "Block Elements allow you to use the WordPress block editor to create hooks, site headers, site footers and sidebars."

Hmm build site headers!

Let me play with this for a while. I will get back to you.

Hi,

No navigation block from WordPress ARGH!

https://make.wordpress.org/core/2020/02/07/navigation-block-exclusion-from-wp-5-4/

Damn thing is ready they aren't releasing it because "As I said, the Navigation block is usable right now. But we don’t think it’s useful yet – at least not until it has an intuitive place to live.

It’s hard to imagine cases where users would want to add a Navigation block to the post or page content. It’s much more likely that a given user would want to add a Navigation block to Header or Footer block areas – maybe even a Sidebar. However, that functionality in Gutenberg just isn’t ready."

Back to square one...

Unless other navigation block plugins are compatible?

To complete this header layout here:
https://www.screencast.com/t/nseUUcegcF

Please do the following in your staging site:

1. Activate the navigation as a header option:
https://docs.generatepress.com/article/navigation-as-a-header/

2. Create a new hook element:
https://docs.generatepress.com/article/hooks-element-overview/

3. Copy and paste the following content:

<span class="menu-bar-item">
    8AM-11PM 514-9COPINE <br>
    (514-926-7463) ►
</span>

4. Select the generate_menu_bar_items hook under the hook list.

Here is a screenshot: https://www.screencast.com/t/RmuQ7W0iMUQp

5. Go to the Display Rules tab in the hook element and select Entire Site:
https://www.screencast.com/t/SHm84ryI9

Let me know once this is done and I'll take another look.

Hi,

Done

Now add this CSS:

.main-navigation {
    background-repeat: no-repeat;
    background-size: 100% 3px;
    background-image: linear-gradient(45deg,#f4da60,#fcf6ba,#efc451,#fbf5b7,#d3a933,#fcf6ba),linear-gradient(45deg,#f4da60,#fcf6ba,#efc451,#fbf5b7,#d3a933,#fcf6ba);
    border-bottom: 3px solid #d3a933;
    background-position: bottom;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Then activate the sticky navigation option in the customizer:
https://docs.generatepress.com/article/sticky-navigation/

Hi,

Done and the menu background color is overlapping the border.

Some css will adjust the font size of the text on the right I can most likely figure it out and need to apply it to the hook.

I guess it's possible to do media queries also for the text to display in one line in mobile?

Hi,

It was introducing a whole bunch of display issues including a Cumulative Layout Shift of .250

I solved the problem and took the KISS route.

I will possibly revisit it later or give it to a developer to solve.

Moving forward...

Thanks

Sounds good :)