Navigation bar is covering top of Header image

[Gee1]

I appreciate something similar has been discussed in another post but that does not seem to fix my issue.

For info, I am using 'Unite 2 - Business' theme.

Basically the top of my Header image is being covered by the fixed Navigation bar on both Desktop and Mobile. I can clearly see the top of the image is being covered as can see it when I drag the header down and then it pings up when I let go.

I still want the Navigation bar fixed but would like the Header image to start below it so I can see the full image including the top the top.

I have the following in Settings > SEO > Header Code (as you will see, the code i have used is for white bullets and so that the header displays correctly on mobile):

<style>

div.paragraph ul li {

    color: white;

}

.wsite-section-content > .container

{

                padding:23px !important;

}

                @Media screen and (max-width: 992px)

                {

                                .banner-wrap .container{

                                                margin-top: 150px !important;

                                }

                                .banner-wrap .container

                                {

                                                padding: 150px 20px 50px !important;

                                }

</style>

Thanks

[Adam7]

Can you post a link to your site, @Gee? That'll make it easier for our Community members to figure out what you need to add or change.

[Gee1]

Thank you for reply Adam.

Here is the link which is a work in progress, plus I have hidden other pages for now.

https://618264998990771669.weebly.com/

As i mentioned before, the code I have have entered in Settings > SEO > Header works and is for white bullets and so the header looks more prominent on mobile (got this code from your replies in another post, so thanks again).

Just need to stop the top my header image getting covered by the Nav bar.

[BJ5]

All you need is this in order to push your content down so the menu doesn't cover it:

<style>
    .banner-wrap
    {
        margin-top: 120px !important;
    }
</style>

[Gee1]

Thanks for the reply @BJ, but all this does not fix the issue (even if I remove my original code for testing purposes).

Could this issue I am having be linked to the Theme I am using?

[BJ5]

Hmm... In my test that pushed the content down, although I think the background image position moves some so it's till cut off for you. Is that what you are seeing?

[Gee1]

Yes, that is exactly what I am seeing.

I understand that it would chop either side of the width depending upon screen size, but can't understand why anyone would want the top of the header chopped

[BJ5]

I think this will get you what you want: 

<style>
    .wsite-header-section
    {
        background-position: 50% 0% !important;
    }
</style>

[BJ5]

I suppose it will vary depending on the dimensions of a particular image vs the dimensions of the screen.