Tranceparency above Custom Header?

Hello,

It is not working because the container color is also white. Instead of padding try to add a top margin to achieve it.
Or use the below code to fix it. Add it to the Customize > CUstom CSS section.

div#site-header-inner {
    padding-top: 70px;
    margin-top: 40px;
}

• This reply was modified 6 years, 1 month ago by Amit Singh.

Thank you that worked well for the desktop version.

There is a white line still on the mobile and tablet version however. Is there a way to either have the header graphic sit along the top in the last two versions or also have the gap with the background through?

Thanks

Use the below code instead of the previous one and check it works or not.

@media only screen and (min-width: 959px) {
div#site-header-inner {
    padding-top: 70px;
    margin-top: 40px;
}
}

If I replace that one with the previous one, the main screen on desktop is still okay, but tablet and mobile versions don’t change.

Since the mobile and tablet version does not show the normal page border might it be showing as white above the logo because it’s not loading the background? I didn’t tell it not to load that area but I just noticed it focuses on the body only.

Okay, remove all codes and use this only.

@media only screen and (min-width: 959px) {
div#site-header-inner {
    padding-top: 70px;
    margin-top: 40px;
}
}
@media only screen and (max-width: 959px) {
div#site-header-inner {
    padding-top: 70px;
}
}

Hi,
That keeps it working on desktop, and tablet it pushes it to the top which is good. The only issue is that on mobile, it does push it to the top but there is a white area below the menu.

I also fixed WordFence’s over enthusiastic blocking if you had been trying to look at my site.

Thanks

Use this code to remove the header bottom margin in the mobile view.

@media only screen and (max-width: 767px) {
.elementor-586 .elementor-element.elementor-element-12e0f41 > .elementor-widget-container {
    margin: -29px -24px 0 21px;
}
}

Thank you for continueing to try to help me through this. I added this to the custom css and it didn’t have an effect.

I am new to Elementor and I tried to play with the margins and the padding just now to the menu itself. I thought it had to do with the padding in the menu section, but even when things are set to 0 it still does that so if it’s an issue with that I don’t know what it could be.

I’m so frustrated at this point I wish I could just pay someone to go in and fix it for me. I used to do css the old way where you just type it in and that made sense, but I never was taught how to do the fancy menus and such.

Okay, try this one. Remove the last one and add this one in the Custom CSS section of the Customizer.

@media only screen and (max-width: 959px) {
div#site-header-inner {
    padding-top: 0px;
}}

@media only screen and (max-width: 959px) {
section.elementor-element.elementor-element-e6247e8.elementor-section-full_width.elementor-section-content-middle.elementor-section-stretched.elementor-section-height-default.elementor-section-height-default.elementor-section.elementor-top-section {
    margin-top: 0;
}}

That didn’t work but I paid someone to go in and fix it. Thank you for your efforts though.