- This topic has 11 replies, 4 voices, and was last updated 7 years, 6 months ago by Tom.
-
AuthorPosts
-
November 2, 2016 at 11:30 am #241153Denis
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}}November 2, 2016 at 12:10 pm #241156NickAssuming 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?
November 2, 2016 at 2:07 pm #241202DenisHi, 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 appearingNovember 2, 2016 at 5:49 pm #241221LyleHi 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!
LyleNovember 2, 2016 at 7:54 pm #241234TomLead DeveloperLead DeveloperThe 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
November 3, 2016 at 6:27 am #241349DenisHi 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 LyleNovember 3, 2016 at 6:48 am #241361DenisAlso 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.November 3, 2016 at 10:41 am #241429TomLead DeveloperLead DeveloperYou 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.
November 3, 2016 at 11:27 am #241449DenisOk, 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.
November 3, 2016 at 12:21 pm #241467TomLead DeveloperLead DeveloperHmm, 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”.
November 5, 2016 at 11:33 am #241994DenisAll seems grand now thanks.
You may close this ticket.November 5, 2016 at 2:20 pm #242020TomLead DeveloperLead DeveloperThanks!
-
AuthorPosts
- You must be logged in to reply to this topic.