[Resolved] Customise Header

[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}}

[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?

[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

[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

[Tom]

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

[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

[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.

[Tom]

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.

[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.

[Tom]

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”.

[Denis]

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

[Tom]

Thanks!

[Author]

Posts