How to improve the hero image?

Hi there,

is this for Desktop or Mobile or Both ?

Hi Dave,

Good question, it should be for both.
The website is responsive. Due to many (and expected)changes in the next days, the mobile version is at the moment not yet optimal. That's work to be done.

-Henk.

Hi Henk,

To add to the conversation:

The most obvious ones (design-wise) would be to not use grid-container class on the page-hero so it goes full-width. Another would be to reduce the padding top of the main container so it's not too large that users have to scroll.

While I understand why that large padding may be required to display as much of the image as possible, you really have to surrender to a bit of cropping if you don't want the page hero to be too large.

Hi Elvin,

I changed the page structure and made things more simple.
Most is working right now, here and there still some things to do.

One thing left is the following.
I configured that the menu should be sticky. For the primary menu this works, but not for the secondary menu. I tried different CSS settings but I can't get it right.

Can you help for a sticky top menu?

Thanks Henk.

Hi Henk,

Can you try this CSS:

@media (min-width:769px){
    .secondary-navigation {
        position: -webkit-sticky;
        position: sticky;
        top: 0px;
        z-index: 1000;
    }

    nav.main-navigation {
        position: -webkit-sticky;
        position: sticky;
        top: 34.022px;
        z-index: 1000;
    }
}

Kindly let us know if this works! :)

Thanks Fernando, this works!

While implementing the website I also try to learn as much CSS as I can.
I have two questions:
* why are you specifying the z-index? Is it to make sure the menu is always shown on top of the content?
* how did you calculate the "top: 34.022px"

Thanks, Henk

Yes, you are correct. The value of the z-index of an element dictates how it will stack among other elements when occupying the same space. I placed a high value to relatively assure that these elements while appear on top of the other elements in your website.

If however you create or edit a different element with a higher z-index, then this other element would appear on top if and when they occupy the same space.

With regards to the height of the secondary menu, here is a screen recording of how I was able to do that: https://share.getcloudapp.com/qGurqxnz

To do this, I inspected the element, and checked the Box Model computed height of the entire container holding the secondary menu. Checking again, the value should be 34.02px, as I rounded up a bit. I accidentally pressed 2 twice.

Here is a link you may refer to with regards to the CSS Box Model: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

Hope I was able to answer your inquiry! :)

Hi Fernando,

Many thanks for your reply.
This really helps to understand things better.

Thanks, Henk.

You’re welcome! Glad to be of help! Feel free to reach out anytime if you’ll need any further assistance!