Pro Header Builder - Issues with Shrink on Sticky Bar!

[core365]

Hi, I’m using the Pro header builder and I’ve tried to look for a guide or something in writing to help me with it, but all I could find is this link https://theme.co/docs/header-footer-overview and some video tutorials. The documentation doesn’t go into any detail, it’s very basic and the videos aren’t specific to what I want to know, so is there a page or link I haven’t come across which explains the header builder in more detail?

I’m hoping you can help me with the following:

1. I’ve set the header to be a sticky bar with ‘shrink amount’ of 0.65. When you scroll down, the logo shrinks but the transition is quite jerky. Is there a way to make it more smooth?
2. Can you explain how the containers work, they don’t make a lot of sense to me - I’m not sure if I need to be using the row element within the 1 container, or several containers!
3. I wanted to put the scaling function on the 2 smaller logos which are to the right of the text, but when I do this, they go way too big and I’ve tried to change the ‘Object Fit’ to see if that makes a difference but it doesn’t. Do you need to upload images at the exact size you want them to show at before you scroll down?
4. Is this possible to do:
   To have 2 rows, on the first row to have a primary logo on the left and then some text next to it and then on the right hand side, two further secondary logos and the second row to have the menu. When you scroll down, the first row disappears and the second row has the addition of the primary logo to the left of the menu (with which the logo shrinks), along with the text?

I’ll put the URL in a secure note as I need to give you the By Pass Password as I’ve got a construction page up at the mo!

Thanks!

[tristup]

Hi @core365,

Please find the answer to your queries below.

1. I would suggest you create two different headers bar one for the ** non-sticky** and another one for sticky by following the below steps.

   Step 1: Create a copy of the first bar.
   Step 2: Set first bar background color to transparent
   Step 3: Make the second bar Hide initially.
   Step 4: Make second bar as sticky
   Step 5: Set content scrolling off, initial postion set to absolute for the Second Bar.

2. The containers in the header works as the column and you can add multiple container to a single bar and set the width to adjust it in the column or row. You can add any element within it.

3. Not clear what exactly you are trying to do?

4. The first point described it already.

Thanks

[core365]

Hi @tristup,

Many thanks for the info!

1. Step 5 - I can’t find the ‘Content Scrolling’ option to set it to ‘off’.
   I’ve got the first bar to roughly how I want it, but the content goes off the screen and isn’t responsive! If you view it on a desktop and resize the screen manually the content doesn’t move or adjust to keep within the screen, it just falls off the side of the screen! I have no idea what setting controls that. I find the header builder very confusing to use. Here’s a screen grab - you can see the nav bar is cut off and on the row above it, there are 2 logos that should be on the right hand side of the screen, but they’ve gone off the page:

2. Ah ok, I just find the containers more difficult to work with compared to the columns!

3. I think I can get around this now you’ve explained what to do in step 1.

4. Great, thanks!

Is there any detailed documentation for the Pro header builder?

Thanks!

[ruenel]

Hello @core365,

Content Scrolling should be before the Sticky option.

If this is NOT helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​
To know how to create a secure note, please check this out: How The Forum Works

By the way, please check out this documentation and video tutorials:

• https://theme.co/docs/header-footer-overview

Better Headers: Content Scrolling

Hope this helps.

[core365]

Hi @ruenel,

Is it the ‘Content Scrolling’ that’s causing the content in the header to fall off the right hand side of the page when resized? It doesn’t look like I have the ‘Content Scrolling’ option available, here’s a screen grab for your reference:

I’ll put the admin info in a secure note.

Thanks!

[tristup]

Hi @core365,

The Content Scrolling option is only available for the fixed value height of the Bar. It has been seen that you have set the value of the height to auto which is the reason why the Content Scrolling option is not showing.

Hope it helps.
Thanks

[core365]

Hi @tristup,

As far as I’m aware the Content Scrolling won’t fix the issue of the content in the header falling off the right side of the screen, instead of it being responsive and resizing - please see previous posts with screen grabs for your reference. Please can someone let me know how to stop this from happening!

Thanks

[ruenel]

Hello @core365,

In your bar settings, set the content maximum length to calc(100vh - 4em).

And then in your Container, set a maximum width of 100%.

Kindly let us know how it goes.

[core365]

Hi @ruenel,

Thanks for that, it seems to have sorted the issue for the non sticky bar, but when you scroll down, the second bar replaces it and I have the same issue with the content going off the side of the page with that bar. I’ve set the bar ‘Content Maximum Length’ to calc(100vw - 4em) but I’m unable to set the containers to 100% as there are 4 of them and they need to be at the widths I’ve already specified for them. Can you tell me what I need to do to solve this please.

Also, I don’t understand why the content is going off the sides in the first place! For every header I do in the Header Builder, do I have to set the ‘Content Maximum Length’ to calc(100vw - 4em)?

Thanks

[ruenel]

Hey @core365,

Your first bar layout will not because the bar does not have enough room to display all those elements in each container. You need to re-think the design that will give you enough width especially if you are viewing it on a small desktop screen. You can re-arrange your menu so that you will have fewer parent menu items. You can always place other menu items in a submenu. It will be much cleaner and easier to display on smaller screens. There is also an option to use the navigation dropdown.

The vw means viewport width. The content maximum length is equivalent to the difference between the viewport width and the outer spacing settings.

Hope this helps.

[core365]

Hi @ruenel,

I find the Header Builder quite confusing to use, so I’ve just done what I usually do and created global blocks and added them into the bars instead - I know what I’m doing with those!

Thanks for all your time and help!

[prakash_s]

Hello @core365

Glad that we were able to help you. Please feel free to reach us if you have more query regarding our theme and theme settings.

Have a great day!
Thanks