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

[Resolved] Customise Header

Home Forums Support [Resolved] Customise Header

Home Forums Support Customise Header

  • This topic has 11 replies, 4 voices, and was last updated 5 years ago by Tom.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #241153
    Denis

    Hi, I am trying to create a header like this http://www.lynk.ie/ to make the logo bigger and for it and the menu to float on top of the header image (padding-top).

    The website I am trying to create it on is
    http://tax.denismccaul.com/

    I tried using the CSS from
    http://quiroz.co/the-overlapping-divi-logo/
    but it had no effect.
    #top-header {z-index: 99999;}

    #logo {
    max-height: 220%;
    margin-top: -32px;
    z-index: 100000;
    }


    @media
    only screen and (max-width : 980px) {
    #logo { margin-top: 0px}}

    #241156
    Nick

    Assuming you have GP-Premium – On your homepage – look in the header settings below the editor. There are advanced settings to MERGE the header with the top navigation. Let me know if that helps?

    #241202
    Denis

    Hi, yes I have GP Premium. I am building the pages with Elementor so the settings underneath the editor would only work if I was using that to set the header image.
    I increased the padding on the nav and uploaded a larger logo.
    I also uploaded a smaller logo for the sticky header.
    What I now have is various logo issues on chrome, firefox and safari ranging from no logo in sticky header to site title overlaying logo to two logos appearing

    #241221
    Lyle

    Hi Denis,

    Actually, you can set up the page header using the GP page header and then when you fire up Elementor for that page, the Elementor content goes underneath the GP page header content, background image in header area and all πŸ™‚

    Just to try it out, I set it up on a demo site I have: http://stuffingeneral.com

    I messed around with the logo in the nav a bit but it will take a bit more CSS playing around to get it to work like the Lynk one.

    Anyway, the GP page header was merged with the header and then the Elementor content added below.

    Note, however, that the content in the GP page header will have to be hand coded (as I did briefly) OR you can use Beaver Builder to create that and then add it in as a shortcode. Yes they do get along together πŸ™‚

    Cheers!
    Lyle

    http://snifflevalve.com
    Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

    #241234
    Tom
    Lead Developer
    Lead Developer

    The best way is what Nick and Lyle suggested.

    However, if you don’t want to use the Page Header add-on, this topic might help: https://generatepress.com/forums/topic/transparent-header-using-elementor-page-builder/#post-230190

    #241349
    Denis

    Hi Lyle,
    I didn’t know you were part of GeneratePress, have interacted with you on Facebook a few times in the Elementor page.
    I checked out your demo site and you were def getting there but with the header from the theme rather than Elementor.
    I am not one for hand coding I am afraid which is why I am trying to have the menu overlay the body content.
    I am using Elementor rather than Beaver Builder so shortcodes not an option as far as I am aware.
    I am going to install Yellow Pencil and see if I can make progress with it.
    Thanks for your time Lyle

    #241361
    Denis

    Also how can I resolve the logo display errors I am getting.
    On Chrome two logos are displaying on top of each other. When I scroll down no logo displays.
    On my Android tablet two logos display one left and one closer to the centre. When I scroll down no logo displays.
    On Safari one logo and one non displaying image (question mark) appear. When I scroll down no logo displays.
    I can provide login details if necessary as maybe I have ticked the wrong settings in Customizer.

    #241429
    Tom
    Lead Developer
    Lead Developer

    You have a navigation logo set which looks to be a 404.

    Go to “Customize > Layout > Primary Navigation and re-upload your navigation logo.

    Then set the position to be “sticky” so it doesn’t overlap your regular site logo.

    #241449
    Denis

    Ok, I reuploaded the logo to all three places in the Customizer. The overlap has gone but now on a laptop the logo is in line with the page content but on my 1920 x 1080 computer it is off to the left and when sticky header activated the logo position jumps left on scroll.

    #241467
    Tom
    Lead Developer
    Lead Developer

    Hmm, looks like this is caused due to the method you’re using to merge the site logo and the navigation.

    1. Remove this CSS:

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

    2. Add this CSS:

    .site-header {
        display: none;
    }

    3. Set the navigation logo to display on “Static + Sticky”.

    #241994
    Denis

    All seems grand now thanks.
    You may close this ticket.

    #242020
    Tom
    Lead Developer
    Lead Developer
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.