Transparent Header

  • Hello. I’m using Ocean WP and Elementor free. When I try to add a transparent header through the customizer, the mobile menu disappears completely.
    The problem with Elementor header is that I can make it transparent but it doesn’t overlap with the block that’s supposed to be behind it. The block gets pushed down.
    1. How do I make a transparent header through the customizer without losing the mobile menu
    OR:
    2. can I put a top margin of -100 on the block below the header via elementor editor, so the two overlap, would that cause responsiveness issues?
    Or: 3. I put a css
    `#site-header {
    position: absolute;
    top: 0;
    }
    .admin-bar #site-header {
    top: 15px;
    }
    `
    but that applies the header setting to the whole site, I need a transparent header only on homepage.
    A solution on any of the three options would be much appreciated.
    Thanks.

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hello,

    Can you kindly share your site link so that I can check it? The mobile menu should be visible on the transparent header.

    For the Elementor header, try the below code and check it works or not – 

    header#site-header {
    position: absolute;
    background-color: transparent;
}
header#site-header section.elementor-element {
    background-color: transparent !important;
}
    Thread Starter thebulgarian

    (@thebulgarian)

    I’m working on a localhost, can’t provide link, sorry.
    Your code does work, but it still applies this transparent header setting to the entire website, is it possible for the css to apply only to the header on the homepage?

    Use the below code only for the home page –

    .home header#site-header {
    position: absolute;
    background-color: transparent;
}
.home header#site-header section.elementor-element {
    background-color: transparent !important;
}
    Thread Starter thebulgarian

    (@thebulgarian)

    It did work, but in mobile view everything disappears.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Transparent Header’ is closed to new replies.