Header image "eaten" by navbar

Support
#1

Hi there,
I 've been trying everything around this issue, but I can’t get it fixed.
Something is wrong with the navbar on my home page: the image below is sitting too high, so that the upper part of the little red flag is being cut off (see screenshot 1). Now on the other pages with breadcrumbs everything is fine (screenshot 2), the red flag is displayed fine.
How come that the upper 0,5 cm of my image on home page are cut off?, or maybe better, are overlayed by navbar?
I can’t figure it out. Changing navbar height makes things even worse. What can I do to get the image a little lower?
Any help would be great, thanks.
Regards, Karen

#2

Hi,

Thanks for writing in!

To fix it, you can add this in Theme Options > CSS

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: auto;
}

Hope that helps.

#3

Hi Paul,
I tried this right away, unfortunately no change. Then I added a space between “body” and “.x-navbar” like in other code in CSS, no change.
Do you have another idea maybe…? Why isn’t that working?
Best, Karen

#4

Hi There,

The red flag is loading fine without cut off, in both active and normal state of the header.

Please let us know if the issue has been resolved in your ened.

Thanks

#5

hi Basanta, now I understand: we are talking about different things! The flag in question is on the image right hand side…
This is what the image should look like:

And this is what shows, no matter what I do:

You see? The flag is cut off and hair too. The upper part of that image is either cut off or overlayed by someting. The problem is only on my homepage.
I hope you can help me now.
Regards
Karen

#6

Hello @x-vision,

Thanks for asking. :slight_smile:

I checked and can confirm that on home page image is indeed getting cut off under navigation area. To fix that, you need to do couple of things.

  1. Assign a class name image-home-page to the section that’s holding header image. In Cornerstone section name I see is Photo. https://cl.ly/1I0N3P1H0D26
  2. After that add following CSS under X > Theme Options > CSS:
.home .image-home-page {
    padding-top: 16px !important;
}

Sharing a screenshot as in how header image should look like on home page upon adding above CSS code. https://cl.ly/3N2e04440A1v

Let us know how it goes.

Thanks.

#7

Hello Prasant,
yes! That worked, problem is solved :slight_smile: :slight_smile:
I went down with “16px” a little, as there was a little gap - at “8px” the setting was perfect and neat.
But, EDIT half hour later: the problem has kind of moved downwards: now there is a huge gap between the image and the headline… I just went through every setting I could get hold of but couldn’t find a way to reduce the gap: top padding, top margin, all is at zero.
Please can you tell me how to move the headline upwards? The first headline should be visible when opening the page of course.
Thank you very much for your help!
regards, Karen

#8

Hello Karen,

Thanks for updating thread. :slight_smile:

Upon inspecting in dev tools it seems that the spacing is coming due to section bottom-margin of 20px. https://cl.ly/1n3g3G241y1a

I suggest you to remove the section margin and that should fix the spacing issue. https://cl.ly/2P1I3v2b2m2R

To further reduce the spacing I also suggest you to remove margin-bottom from image also. To do that you can add following CSS under X > Theme Options > CSS:

.home .image-home-page {
    margin-bottom: 0 !important;
}

Thanks.

#9

Hi Prasant,
couldn’t open the screenshots you sent, nevertheless I found 20px bottom margin and took it out. The CSS worked as well - great, much better now :slight_smile: thank you!

One more thing. This homepage was built with “old” X and classic elements. So I tried to re-build the image section on top of the page, to get more control etc.
The thing is, I couldn’t replicate it neatly.

  • I added a section and inserted the image as “upper background” (like in 2015) - but now it wouldn’t fit: The image frame provided is too small. So I added 100 px padding top and bottom, that added space and made things look better. But is that the correct way to proceed? Don’t want to mess anything up.
    I would be very glad if you told me :slight_smile:
    Best
    Karen
#10

Hi Karen,

It seems to look fine the way it is now.

But if you want to use it as background, I suggest you use gap elements to add space instead of using padding.

That way you can add multiple gap elements with different size and visibility.

So you can have a big space on desktop and small space in mobile.

Hope that makes sense.

#11

Hi Paul,
just tried again to rebuild, not with “background” but simply with “image.” No way to get the image wide enough (like in my image above the fold). See screenshot. The frame provided is too small.
What am I overlooking?
Regards, Karen

#12

Hi There,

Thanks for the screenshot!

Please make the image 100% width and remove the retina option.

Hope this helps!

Thanks

#13

Hi Basanta,

oh yes that helped! Image is working out neat that way - thank you very much! And by the way I’m learning all the new stuff that way that “old” X didn’t provide :slight_smile:
Best
Karen

1 Like
#14