PRO Header with Button staying in place, possible?

Support
#1

Hello to each of you! It has been awhile! I am really moving away from using Rev Slider in any header areas on my sites and instead using just PRO headers. Can you please look at the secure note and tell me if it it possible to make the button stay in a relevant position like I can do in rev slider? I want the image underneath to stay at least visible enough to see the writing on mobile. Right now I have it where you see the entire image which I like. The button I cannot get to stay basically in the area of the image I am including.

I am also giving you the login to see this specific header as it is not assigned and is private.

Thank you!
Noelle
Have a wonderful weekend!

#2

Hello Noelle,

Thanks for the very detailed post information.

I would highly recommend that you create a Global Block in Pro > Global Blocks. With global blocks, you will have more control over the display of your columns. You can even nest rows and columns. Once you are done with the block, you can simply insert it in your custom header.

If you want to position a button below an image partly overlapping the image, you can insert an image element and the button element in your column. To make the button positioned as overlapping the image, you can insert a negative top margin in the button element.

NDkwIEM3Tu6sVF8BNMob8Q
NDkwIEM3Tu6sVF8BNMob8Q880×461 60.5 KB

You may also enable the Flexbox option in the column settings to make sure that both the image and button elements stay in the middle of the column. To learn more about this Flexbox setting, kindly check this out:

Hope this helps.

#3

Thank you @ruenel I am just having such a hard time keeping the button from getting higher and higher on the image as it adjusts for mobile. I am in the global blocks, which I will say, I have not ever found a use for them but can see the benefit in this.

I cannot seem to get the button to stay. I think I cannot have both the image stay full size AND have the button stay in a good place across devices.

Unless making a new button for each device cut off??

FEEL FREE to login and see and add your magic. :slightly_smiling_face: :wink:

#4

Hello @Noellemena,

We would love to check out your global block. Regretfully we cannot get pass the authentication in your WP login. Can you please temporarily disable it so we can log in?

Thanks.

#5

Hey @ruenel ,
I have added more codes in the secure note. It says none of them were used yet. I have set the backup codes to be the primary. Let me know this is good for you!
Thank you!
Noelle

#6

Hi Noelle,

I have logged in and created a test global block.
You can check it the secure note below.

Cheers.

#7

@ruenel thank you so much for going in and doing a test. I see it was the same issue with the button moving through device settings and I would need to do a different button for each device. Unless I am missing something. :slight_smile:

I have a PRO header I have done that I am happy with, I will leave you a link in a secure note. As the course is not live yet. Thank you for your help and I do need to implement global blocks more for sure. Noelle

#8

Hello Noelle,

I have logged in again and created the following:

  • A test page
  • custom header
  • and a global block

You can check the link of the example in the secure note.

I have inserted a button and an image element. The button has a top margin of -120px so that it will always display 120 pixels above its original position. With the global block, you can modify it and add several buttons for different screen sizes having the button with varying negative top margins.

Hope this helps.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.