Pro header responsive logo

[philysgdy]

Hi guys
Is it possible to set up elements to be responsive in a Pro header
I will add a secure note for you to have a look at with the URL. Between MD and XL I want to

• keep the motif in its position on the right of the page rather than it moving towards the left as the page moves from L to XL.

• change the logo size starting larger in XL and reducing to responsive views from XL to MD

I see you guys using calc() but I’m not sure how to apply that and where.

[ruenel]

Hello @philysgdy,

Thanks for writing in!

Please use right 10rem for the position of your background image so that the image will always be at the right side of the page.

Hope this helps. Kindly let us know.

[philysgdy]

Thanks Rue
Will do and I followed one of your vids excellent. Next was the the Logo in the bar above Just want to solve the sizing and responsive issue. Can you help on that?

[ruenel]

Hello @philysgdy,

For your image, since there is no option in the image element settings, you will have to resort to inserting a custom inline element CSS. For example, you can use @media to target which screen sizes will the CSS be applied. Take this code for example:

@media(min-width:980px) and (max-width: 1280px){
  $el.x-image {
   min-width: 230px;
    max-width: 280px;
  }
}

The code above will set the minimum width of 230 pixels up to 250 pixels only. Feel free to make adjustment as you need. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Intro to CSS - https://goo.gl/mFuWQT
How to get CSS selectors - https://goo.gl/BmoH39
Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
CSS Media Queries - https://goo.gl/L3ZHNg

Reminder: We are only giving you an example for you to start your modifications. Any results from these modifications might cause any issues sooner or later. Please be advised that heavy modifications of any feature or functions in the theme are beyond the scope of our support. Any results that will complicate things or even messed up the page will be your sole responsibility.

Best Regards.

[philysgdy]

Rue
I changed it to a bgd image which gave me more options in terms of size. I have applied right 30rem so I have it where I want it in terms of vertical position, but I want to move it more to the right. How do I go about that?

[ruenel]

Hello @philysgdy,

Do you want to display like this?

Please set the Flexbox Child Placement as a Column and align it horizontally to the end.

Hope this helps.