Want to change default height of "hero" section in Top Nav

[barbs]

We are finally attempting to move from tri-pane to Top Navigation and are working on various prototypes to decide our final layout. I really like the idea of the Home topic with the Hero image, but I'd prefer it that section were not taking up quite so much room on the page. I'd like to decrease its height.

I didn't see anything very promising in the stylesheet, so I simply tried resizing my image. Nope. That didn't work. I then went back to the stylesheet and thought maybe its this little background size property.

div.topic-hero
{
padding: 8% 0;
background-image: url('../Images/Hero-Image_AllGrey.png');
background-size: cover;
background-attachment: scroll;
}

But that didn't seem to make any difference either. Per W3Schools, the "cover" property value resizes the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges. Okay, so what is the container so I can resize the container? I can't find it anywhere.

Thanks for taking a look!
Barb

HeroImage_sectionHeight.png

[NorthEast]

This part is adding 8% padding on the top and bottom, so reduce that value.

Code: Select all

padding: 8% 0;

If you want the padding size to be more predictable, then perhaps don't use % and use a different unit like px or em - for example, 40px or 3em.

[barbs]

Hello Dave! Thanks for your reply.

I'm pretty sure I tried that setting, changing it to 0 for both and didn't see an impact. But today is a new day and I'm not quite as irritated as I was yesterday (yet). So I'll give it another try and let you know what happens.
Thanks again!

Barb

[barbs]

Dave, you were completely correct. I had obviously had gotten confused somewhere and had previously changed that padding setting in the "mobile" css settings. (DOH!)
Thank you so much for help! Today is looking better already.

Barb