Transparent Header

  • Hello. I’m using Ocean WP and Elementor free. When I try to add a transparent header through the customizer, it works for desktop layout only.
    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. I now have two options:
    1) Make a transparent header through the customizer and have it look not exactly how I like it, plus the mobile menu completely disappears when a different screen size is simulated and
    2) Set a top margin of -100 on the block below the header via elementor editor. That way they overlap nicely and everything looks and works fine, but is that okay, would that cause any issues with the page layout, etc.?
    If someone can help me out with the disappearing header or tell me if it’s okay for me to go with the second option it would be great.

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

  • Negative margins usually cause a lot of problems, especially if an image is involved because the image might not load, and the image could be different sizes on different windows.
    Usually, to make two things overlap you use position: absolute but it has to have a close ancestor with position: relative. And it can be tricky to get them to size consistently on different devices.
    It seems strange to deliberately put a transparent element anywhere.

    Thread Starter thebulgarian

    (@thebulgarian)

    Well… I wouldn’t call it strange, I’ve seen transparent headers very often in many websites; if you would advise me against a negative margin, perhaps you might have an idea on why the mobile menu disappears or in the case of the Elementor header, why does it not want to overlap but pushes down the content block?

    You should ask in your theme’s support forum about the mobile menu.
    And ask in the Elementor support forum about the overlap problem.

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