Archived topic
Formatting For Safari & Firefox
16 replies · Started by Mary Pearson on October 22, 2018
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!
I'm not sure I understand. Can you remove your fixes so I can see the original issue?
Let me know :)
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?
Yes please - what are those negative values achieving?
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.
Have you tried setting the Section top padding to 0 in the Section settings?
Yes. It is at 0 px for top and bottom now.
Looks good now, no?: https://www.screencast.com/t/ICp9ZUVS494
No. I want the slider to go to the top of the page with logo and menu background transparent so slider shows behind.
Hi there,
have you tried using the Header Element?
https://docs.generatepress.com/article/header-element-overview/
Heres an example set-up:
https://docs.generatepress.com/article/transparent-header-and-navigation/
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 -->
Thanks David. I'll give that a try. Much appreciated!
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.
Ok, so the Element Hook before header, can you edit that and change the priority to 0.
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.
'
'
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>
