- This topic has 16 replies, 3 voices, and was last updated 3 years, 6 months ago by David.
October 22, 2018 at 8:56 pm #707759Mary Pearson
My website looks fine on Chrome and Opera, but on Firefox and Safari there is a space of about 40px at the top of the page under my hook for Before Header.
In Firefox the Nav Menu fits in there, but in Safari it is just a blank space.
I have raised section-1 by 170 px so that the slider will show right up to the top of the page.
If I raise it by 210px then it looks fine on Safari. It doesn’t affect Firefox.
But it covers my “before header” hook in Chrome and Opera.
I’m wondering if I used Widgets with Top Bar instead of the hook if this might work, but I don’t know how to set it up to have all three widgets aligned horizontally.
Would appreciate your input.
Thanks!GeneratePress 2.1.4GP Premium 1.7.2October 23, 2018 at 10:45 am #708404TomLead DeveloperLead DeveloperOctober 23, 2018 at 10:51 am #708411Mary Pearson
Not sure what you mean by my “fixes”. I can either have it with -170px or -210px.
With -170 it looks OK on Chrome and Opera
With -210 it looks OK on Safari and Firefox.
Do you want me to remove my CSS completely?October 23, 2018 at 6:30 pm #708673TomLead DeveloperLead DeveloperOctober 23, 2018 at 6:32 pm #708674Mary Pearson
The slider is in the first section. The negative values are to move the section up to the top of the page.
I have removed all CSS now.October 23, 2018 at 6:41 pm #708686TomLead DeveloperLead DeveloperOctober 23, 2018 at 6:44 pm #708687Mary Pearson
Yes. It is at 0 px for top and bottom now.October 23, 2018 at 6:56 pm #708697TomLead DeveloperLead DeveloperOctober 23, 2018 at 6:58 pm #708698Mary Pearson
No. I want the slider to go to the top of the page with logo and menu background transparent so slider shows behind.October 24, 2018 at 7:34 am #709082DavidStaffCustomer Support
have you tried using the Header Element?
Heres an example set-up:
The Header Element itself can be empty without a background or padding, you just need to add a HTML comment to the Hero content eg.
<!-- merged header -->October 24, 2018 at 12:32 pm #709543Mary Pearson
Thanks David. I’ll give that a try. Much appreciated!October 24, 2018 at 5:15 pm #709704Mary Pearson
I did as you suggested, made it a header and merged, however I still have the same problem. Please see screenshot at https://pasteboard.co/HK0qh2l.jpg
Note that I have an element for before header on black background. Then under that is the logo and nav bar.
In the one on the left (Chrome or Opera) the logo and menu are nearly touching the top.
In the one on the right (Firefox or Safari) the logo and menu are correctly positioned.
This was exactly the same scenario as when I had the slider in a section, only now I don’t have to enter a negative top-margin.
How do I make Firefox and Safari show the same as Chrome and Opera?
Thank you.October 25, 2018 at 5:26 am #710052DavidStaffCustomer SupportOctober 25, 2018 at 7:43 am #710149Mary Pearson
Well the Element Hook before the header is definitely the problem – thank you, but I don’t know how to fix it. If I remove it completely then all is good. I have changed priority of the hook to 0 but there must be something wrong with my code and I can’t figure out what it is.
‘95 Bayly Street West, Suite 200, Ajax ON L1S 7K8Call Us Today! (905) 683-3811
‘October 25, 2018 at 8:02 am #710304DavidStaffCustomer Support
OK, so it just needs a clearfix like so:
<div class="hide-on-mobile hide-on-tablet"> <div class="grid-33 header-left">95 Bayly Street West, Suite 200, Ajax ON L1S 7K8</div> <div class="grid-33 header-center">info@DentistInAjax.ca</div> <div class="grid-33 header-right">Call Us Today! (905) 683-3811 </div> <div class="clear"><!-- clearfix --></div> </div>
- You must be logged in to reply to this topic.