Navigation bar overlaps Slider

Hello everyone,

the navigation bar of my website is overlapping the picture in the slider below. The navigation bar has a height of 130 px.

I checked the forum and saw that a few others had the same problem and I tried the offered codes but none of them could solve the problem.

I hope the screenshot explains the problem:

The first picture displays the navigation bar overlapping the slider image:
The second picture displays the section which is cut off:

Thank you very much in advance

Dana

Hi,

Please post a link to your website, so I can check.

Kind Regards,
Csaba

Hi Csaba,

thank you for the quick response.
the link is www.vonhohenseeimmobilien.de.

It is my very first website and by trying to achieve small changings (e.g. other font size of header title, smaller font size etc, I put in several CSS-Code. I am a little bit afraid that they might block the usual “behavior” of the Sydney theme.

Kind regards,
Dana

Hi,

Don’t worry about Custom CSS that won’t cause other issues ( if you’re using the correct CSS ), but please deactivate the maintenance mode, so I can access your website and also please point out / clarify the areas you want to change and exactly what would you like to change on them, so I can give you a correct Custom CSS for that.

Kind Regards,
Csaba

Hi,

I deactivated the maintenance mode.

Now I try to specify my problem:

  • I gave the navigation bar a white background (CSS), a certain height of 130 px (CSS) and put the header on “fixed”
  • the images in the header-slider are now covered partly by the white background/the header. A part of the image is swallowed

What I would like it to be:
The images should automatically start right below the white background in their full height.

Thank you very much!

Kind regards,
Dana

Hi,

Ok, now I understand it better, you have the header height of 121px, so you must add a 121px margin-top to your hero area with this Custom CSS:

.sydney-hero-area {
    margin-top: 121px !important;
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Kind Regards,
Csaba

Hi,

unfortunately this code does not change the margin. The only thing happening is that the position of the writing “Finden Sie die Immobilien die zu Ihnen passt” comes down a bit.

Kind regards
Dana

Hi,

Yes, it comes down a bit and the fixed header doesn’t cover 121px of your hero area anymore, so not only the text goes down, but the whole hero area, isn’t that what you wanted to achieve? If not, then please clarify what would you like to achieve.

Kind Regards,
Csaba

Hi Csaba,

I am very sorry. I came back to athemes to ask a new question in the forum and saw that I’ve not answered your last comment.

Lately I’ve tried a lot and in the end Iachieved what I wanted.

Thank you for your help!

Greetings
Dana

Hi,

Great! I’m glad it’s resolved! If you need help with anything else, please open a new topic.

Have a nice day!

Kind Regards,
Csaba