How to make main header on a slider and transparent?

Hello,
So lately i have started using Sydney theme, i cannot show you the site because it has to be on maintanance mode. But i can show you pictures of this site.
My problem is that i have main header with logo and menu but i want to make this header not above slider (hero area) but on a slider.
I found this topic: Sydney - Header transparent - #5 by vimalwplogin
There is i think the same problem so i used the solution from this post.
I put this code:
.page-id-13 .page-wrap {
padding: 0;
margin-top: -132px !important;
}
I put this code in style.css and in additional css but nothing changes.

I also put this code:
.site-header {
background-color: transparent !important;
}
And still nothing changes.

My site looks like this:

And i would like it to look like this:
http://vedha.byethost7.com/

Thanks for any reply.
Best regards.

Hello,

First thanks for using our theme!

Which version of Sydney you running in your website? Is the latest? Since Sydney 1.84 you can add the header transparent style on a page-by-page basis. For it, go to WP Admin > Pages, edit the desired page and check the Transparent Menu Bar option at the bottom right corner.

image

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

Hello,

Thanks for answer. I have 1.85v. I checked the “transparent menu bar” option but it became white.

I mean its white because the backgroud of the site is white, but how to put now hero area under that menu (header) (or rather put menu on a hero area - slider)? Like here:

http://vedha.byethost7.com/

I was trying using this code:
.page-wrap {
padding: 0;
margin-top: -132px !important;
}

but it only cuts the slider from the bottom.

Hello,

Could you please share your website link/URL with us? Probably there’s some custom code pushing the content to down. So we need do a inspection in your website to see what’s happening and send the best solution for you.

Kind Regards,

Rodrigo.

aThemes Support

Hello,

It is linosfund.pl
but like i said earlier i cannot turn off the maintenance, is it possible to get solution without it?
If not eventually i could turn it off for a few minutes.

Hello,

Oh right! In this case, please share with us your custom CSS. Normally it is added through Appearance > Customize > Additional CSS or a child theme stylesheet. So we can try to reproduce the same issue here and send the best solution to you.

Kind Regards,

Rodrigo.

aThemes Support

It is long so i put it in a txt file, this is the link:
https://drive.google.com/file/d/1WyZEoH-LS5eMnhIRUmIQBzletD0IN4P1/view

I was trying to put there something from this:
.site-header {
background-color: transparent !important;
}

.page-wrap {
padding: 0;
margin-top: 0px !important;
}

#top .av_header_transparency {
background: rgba(0, 0, 0, 0.6);
}

Changing the margin-top, but nothing helped. Thanks for your answers.

Ok, so i found solution but it is not perfect, i used this code in additional CSS:

.sydney-hero-area {
margin-top: -120px;
}

It put whole hero area with slider up, so now menu is on slider what i wanted. But i don’t know why sometimes when i scroll up to the top my menu and header background still has color. I mean i put color behind menu so menu would be visible all the time because menu letters are white. So when on top menu has no background and thats good, when scrolling up has background and that also good, when reached the top sometimes stays with background sometimes switching off.

If there is no solution to this, maybe i could turn off background completely and change the color of letters in menu when scrolling up, like here (letters changing colors from white to blue when scrolling):

Could you tell me which option would be best and how to reach it?

Edit: Maintenance is now off if you want to check it: linosfund.pl

Hello,

I did a test now with your custom CSS and it’s working fine as you can see in the below screenshot:

You are using a child theme?

The best way to help you is inspect your website. As your website is with maintenance mode on, you can give me temporary admin access, so I can inspect your website. Thus I request sharing your website’s temporary admin login link and send it privately to me over email. You can generate the link with this plugin .

rodrigo@athemes.com

P.S.: Ensure the link expiry is set to 7 days and all admin rights are enabled.

Kind Regards,

Rodrigo.

aThemes Support

I just got permission to turn off maintenance mode, you can check it all yourself.
linosfund.pl

Edit:

When i was logged in everything woked, i mean the background was changing to transparent when i scrolled all up. When i logged off after scrolling up to the top background stays with colour.

Hello,

Thanks for the access to your website, now I can see you are with the “Sticky header - On scroll to top” enabled. Really, there’s an issue with the theme and the header transparent is not working when this type of sticky header is enabled. I already talked with our development team and this should be fixed in a future update of the theme.

For now to fix, please follow the instructions below:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

    window.addEventListener( 'scroll', function(){
        var y = window.pageYOffset;

        if( y < 80 ) {
            document.getElementById( 'masthead' ).classList.remove( 'is-sticky' );
        }
    } );


We hope this helps!

Kind Regards,

Rodrigo.

aThemes Support

I pasted it but looks like nothing changed, so now i turned off sticky header and my header is under hero area, can i do it somehow like on your screen? to be on not under slider? its probably because i added that line:

.sydney-hero-area {
margin-top: -120px;
}

but when i deleted it the background under menu and header is white.

Hello,

Really strange, I am testing the JS code I provided here and it’s working. Let’s try to run the code after the page is loaded. For it please change the JS code to:

window.onload = function(){
    window.addEventListener( 'scroll', function(){
        var y = window.pageYOffset || document.documentElement.scrollTop;

        if( y < 80 ) {
            document.getElementById( 'masthead' ).classList.remove( 'is-sticky' );
        }
    } );
}

Please keep the negative “margin-top” in the “.sydney-hero-area”. Also, keep the color in your background (I see now that you changed to transparent).

Please try that and let us know how it goes.

Kind Regards,

Rodrigo.

aThemes Support