Header Container Background is Being Cut Off

Support
#1

Hello,

I’m working with X Pro in the new header feature. Referring to the picture below.
At (a) I want my header to be the full page with the logo background and a button. When you press the button, then the header moves slightly up and the logo becomes 50% smaller and two buttons slide up on either side (b). I would like the buttons to move on top of the header.

Currently, I have

  • a page set up that has a section on it with the two buttons.
  • a header made assigned to that page, with one bar, a container with the logo as the background (the logo has the text on it).
  • a button in the header’s container.


    Eventually, I will be adding
  • a background to the bar or page (I originally had it set as a background page but it wasn’t responsive…which is for another post)
  • type text between the K9 STORM lettering and button.

Here is are some screenshots of what it currently looks like:

I’d like it not to be cut off at the very least!
Thank you so much in advance for your help and I apologize for the lengthy post!

Meghan

#2

Hello Meghan,

Thanks for a very detailed post. Please make sure that the height if your bar is more than the height of your image. Is the buttons on the same bar with the logo image or with a different bar? Could you please provide us access to your site so that we can check your settings and have a closer look at it?

Best Regards.

#3

Hi RueNel

Thank you so much for your help.

A secure note is left for you.

Please let me know what I should do!

#4

Hello There,

You can use a smaller image by uploading it again and use it as the background image instead. To resize the background image logo as soon as you scroll the page, please add the following CSS code in the custom css section of the header.

.x-bar .x-bg-layer-lower-image {
    transition: background 1s ease;
}

.x-bar.x-bar-fixed .x-bg-layer-lower-image {
    background-size: auto 60% !important;
    transition: background 1s ease;
    background-position: bottom center;
}

.x-bar.x-bar-fixed  .x-bar-container {
    margin-top: 0;
}

Please keep in mind that this code might not directly resolve your issue. It is merely a guide and example of what you can do achieve what you have in mind.

Hope this helps.

#5

Thank you, I will try this out.

#6

You’re welcome!, Let us know :wink:

#7

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