Transparent header

  • ilan76

    (@ilan76)


    5 years, 2 months ago

    Hi,

    I’m trying to make a fully transparent header but I can’t seem to accomplish it.
    I enabled the the transparent header but any section added to the page is still below the header. I still see the header default background color (white).

    What am I missing?
    Note: I am using Gutenberg – not Elementor.

    Also, possible to enable sticky header as-well?

    Thanks

Viewing 14 replies - 1 through 14 (of 14 total)
  • Theme Author dylan ngo

    (@duongancol)

    5 years, 2 months ago

    Hi,
    Can you give me the site URL to see the problem?

    Thanks!

    Thread Starter ilan76

    (@ilan76)

    5 years, 2 months ago

    Not live yet – local.
    But I checked everything and enabled all that’s necessary – I don’t understand what’s the problem.

    I also checked with a cover image and set height vh to 100.

    Is there a working example demo I can see with a fully transparent header (using Gutenberg)?

    • This reply was modified 5 years, 2 months ago by ilan76.
    Thread Starter ilan76

    (@ilan76)

    5 years, 2 months ago

    I even set the transparent header on the specific page setting.
    It appears that only the Normal header is visible with it’s set background…

    Theme Author dylan ngo

    (@duongancol)

    5 years, 2 months ago

    Can you give me some screenshots or a video to understand your setup?
    So I can reproduce it here.

    Thanks!

    Thread Starter ilan76

    (@ilan76)

    5 years, 2 months ago

    Sure, here is what I see when set transparent header on:
    https://ibb.co/wwrSy06

    Just added a black cover block (or any other block), container – full width / stretched.

    This is what I see when transparent header disabled:
    https://ibb.co/Fq6sgRX

    Note: Using Gutenberg only

    Theme Author dylan ngo

    (@duongancol)

    5 years, 2 months ago

    Can you try to add the custom CSS below to Customizer -> Additional CSS?

    .has-header-transparent div#content {
    margin-top: 0;
}
    Thread Starter ilan76

    (@ilan76)

    5 years, 2 months ago

    Yes, that fixes it.
    Should be fixed in default theme.

    Any chance to add option for sticky header as-well?

    Theme Author dylan ngo

    (@duongancol)

    5 years, 2 months ago

    I think you can enable the stick header in Customizer -> Layout -> Sticky header

    Thread Starter ilan76

    (@ilan76)

    5 years, 2 months ago

    There is no Sticky header option.

    Thread Starter ilan76

    (@ilan76)

    5 years, 2 months ago

    There is a problem with the CSS solution: all buttons/links in header are not reachable (can’t be clicked).

    Theme Author dylan ngo

    (@duongancol)

    5 years, 2 months ago

    To fix the button/links in the header, you can try to CSS below

    .has-header-transparent .site-header {
    z-index: 99999;
}

    Here is the sticky option https://share.getcloudapp.com/Jru4WmbJ

    Thread Starter ilan76

    (@ilan76)

    5 years, 2 months ago

    It’s working but it’s not really the optimized solution as it breaks some other pages like user dashboard (if set on pages)… seems it’s not optimized for this option.

    I don’t see any sticky header menu option:
    https://ibb.co/YcW3BCQ

    I only installed the theme as is.

    Theme Author dylan ngo

    (@duongancol)

    5 years, 1 month ago

    We fixed the transparent header here and it’ll be added in the next version.

    As for the sticky header, I am sorry, I forgot that it’s only available on the Pro version.

    Thread Starter ilan76

    (@ilan76)

    5 years, 1 month ago

    ok thanks.
    When it’s released?

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

The topic ‘Transparent header’ is closed to new replies.

Tags