Pro Builder Sticky Bar Jumping Around

[Curiouser]

Hi there, this is a continuation of this thread: X theme menu divided with logo in middle? but the original problem there was solved so I thought it’s cleaner to start a new one here.

Secure logins are over at the original site.

This is a problem I haven’t been able to figure out:
I had duplicated the original nav bar with x support instructions to make it sticky, so that I can create a mobile version. I’ve managed to make it look the way I want but I can’t understand why it’s not staying in place? Here’s a video I took of what’s happening: https://www.dropbox.com/s/cqiqwbiefnms3ez/20200401_211914.mp4?dl=0

Can’t figure out why it’s doing this? Am I missing a setting? Thanks so much!

The Curio Shop

[friech]

Hi Amy,

Thank you for creating a new thread, on your screencast although that effect seems to be bizarre, that is actually normal behavior and that is because both your 1st and 4th bar are both sticky and set as absolute.

• 
  
  
  

I think you’ve made your setup a bit complicated, on your first bar you could have kept the logo, and hide just the 2 Inline Navigations, and add the Navigation Modal that will only show on mobile. Make this bar position relative and shown on all screen sizes.

Then duplicate that first bar and make that duplicate bar as the sticky bar and initially hidden so it will only show on scroll. This would now be your dedicated sticky bar.

Then work on your banner image, do not use a huge margin on the container, the bar has a height option, use a bit (not too much) of a negative margin on the container to achieve that overlapping effect you’re effect under the logo.

Cheers!

[Curiouser]

Hi Friech,
Oh thank you so much for this! Hah, this way is much better!
I am almost there, a few things I couldn’t figure out:

1. At mobile size, there is a straight line in the bottom of the original NAV bar that should be a torn edge. This is working fine at larger sizes, the margin/bar height thing worked but no amount of adjusting is making this straight edge go away at mobile sizes. The image is definitely going UNDER the bar, but for some reason the Nav bar bottom is getting cut off. Here’s a video of what I mean:

2. Is there a way to stack the nav modal so it’s under the logo instead of to the right of it? I tried using column but it’s not working. The way it is now makes the logo off center.

3. The preview function in the builder (little left arrow in a circle that makes the editor window go away) makes some of the items go away and leaving just blank space, see image below. I’ve used this in x Cornerstone all the time and have never seen this. Thoughts?

Thanks!

[ruenel]

Hello @rotipom,

1.) The lines is coming from the background images itself. You will need to position your background images as top center or bottom center to prevent the edge lines from displaying. You will also need to play around with the background size from cover to 100%.

2.) If you make the elements stack putting the Nav Modal under the logo, the bar height needs to be set to auto. Once your set it to auto, the background image which is the logo itself will expand.

3.) The little arrow in the left side will expand or collapse the Cornerstone Left panel. It has been there for a while already.

Hope this helps.

[Curiouser]

Hi Ruenel,
Thank you so much for your reply!

1. I tried this but it doesn’t make the lines go away? This only happens at mobile sizes.
   Note that the blue hero image has a torn edge on the top that appear when I make the image height tall but I shouldn’t have to do that. The Nav bar torn edge should be visible the same way it is on the bigger screens and sticky bar. Here’s a video:
   https://www.dropbox.com/s/vrfp3kay7wjb94e/Untitled.mp4?dl=0

2. I tried adding auto to bar height but it didn’t change anything? I also tried making the height bigger to see what would happen but the modal doesn’t move?

Thanks so much!

[christian]

Hey @rotipom,

1. Set a negative top margin to the bar containing the “The Natural History…” image. The previous login method in the other thread doesn’t work anymore and it is hard to write down why and also the side effects of what I’m going to suggest so I recorded a screencast with narration here: https://youtu.be/ZpP4bpFPP60
2. Sorry for the wrong info. The image will not expand and push the toggle below it and also because the Container uses Flex Layout and the direction is set to Row. Regretfully, there’s no way to change that to Column on mobile so what you can do is move the mobile nav to a new container.

Hope that helps.

[christian]

Hey @rotipom,

I’m sorry but I only see login credentials in the secure note. Would you mind providing feedback regarding the setup I’ve shown in the screencast and regarding the mobile nav? They are configurable in the builder.

Thanks.

[Curiouser]

Hi Christian, so sorry for the confusion.
Your help worked! I think it’s all good now on the above questions. THank you!!
Here it is: https://vpzry3xn2p3.c.updraftclone.com/shop/

The only thing I’m struggling now with is responsive text in header builder…any resources for this? (see gold text below hero not scaling)…I’ve tried the calcs method I borrowed from the sample template but for some reason it has not worked for me. It will show it works on the editor but not in live view.

Here’s video : https://www.dropbox.com/s/s5h9ckevo6le0ev/4-4-textshop.mp4?dl=0

Exact same problem I’m having on the homepage: https://vpzry3xn2p3.c.updraftclone.com/2020-homepage/

Am I missing something about the calcs method?

Thanks so much!

[christian]

Hey @rotipom,

I see 2 problems with your responsive text and first, is a h1 tag within the Headline element. I’d recommend not using the Rich Text editor for the Headline element.

Please switch to the HTML editor and remove the HTML tags. Then, use the Headline element Text options for your text design.

Secondly, you’re using vmin for the responsive text. Try using vw instead like in the following video.

If you still have problems with the responsive text, I’d kindly ask to please open a new thread for that as it’s a separate topic from the sticky bar problem.

Hope that helps.