Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

[Support request] Transparent Header using Elementor Page Builder

Home Forums Support [Support request] Transparent Header using Elementor Page Builder

Home Forums Support Transparent Header using Elementor Page Builder

  • This topic has 4 replies, 3 voices, and was last updated 5 years ago by Mike Simmons.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #230149
    Denis

    I am trying to solve a header problem in Generate Press Pro which is holding my project up.

    This is an example of the header I want.
    http://www.kriesi.at/themes/enfold-app/
    or
    http://www.kriesi.at/themes/enfold-health-coach/

    I am trying to have the header with a transparent background, logo left, menu right where the top of the hero image on each page also serves as the header background. But I want to use Elementor to build the page and the header image, not the theme page settings.

    I create a section in Elementor, set the background image.
    I have set the theme in Customiser with; Layout – Page Header – Inside Content Area and then Above Content Area but both just end up with the hero image below the header. So then I set the Hero image to -180px margin but it then just overlays the header so no logo or menu is visible.

    I know there is a section on each page of the backend where the theme allows you to add a header image but the content then has to be added by html in a content box which makes it too complicated me for adding buttons etc. to the hero image.

    How can I solve this?

    Thanks in advance

    #230190
    Tom
    Lead Developer
    Lead Developer

    Hi Denis,

    As you posted on FB, this was your solution:

    .site-header {
        position: absolute;
        width: 100%;
        left: 0;
        z-index: 500;
    }

    Just be careful, as adding that CSS to all pages will add it to templates that won’t have an Elementor header like the 404 template, blog templates, archives etc..

    I suggest using Simple CSS to add it only to the specific pages where you’re using Elementor.

    #240904
    Mike Simmons

    Tom, you can use Simple CSS on a per page basis? How would you make transparent menu for a single page?

    #240965
    Tom
    Lead Developer
    Lead Developer

    The menu is kind of complex because there’s so many elements in it.

    The Page Header has this option if you’re adding content using the page header meta box.

    If not, you can try this:

    .main-navigation {
        background-color: transparent;
    }

    Let me know if you need the other elements (hover, current etc..).

    #241782
    Mike Simmons

    thanks I’ll try it

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.