[Resolved] Formatting For Safari & Firefox

Home Forums Support [Resolved] Formatting For Safari & Firefox

Home Forums Support Formatting For Safari & Firefox

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #707759
    Mary 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.4
    GP Premium 1.7.2
    #708404
    Tom
    Lead Developer
    Lead Developer

    I’m not sure I understand. Can you remove your fixes so I can see the original issue?

    Let me know 🙂

    #708411
    Mary 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?

    #708673
    Tom
    Lead Developer
    Lead Developer

    Yes please – what are those negative values achieving?

    #708674
    Mary 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.

    #708686
    Tom
    Lead Developer
    Lead Developer

    Have you tried setting the Section top padding to 0 in the Section settings?

    #708687
    Mary Pearson

    Yes. It is at 0 px for top and bottom now.

    #708697
    Tom
    Lead Developer
    Lead Developer
    #708698
    Mary Pearson

    No. I want the slider to go to the top of the page with logo and menu background transparent so slider shows behind.

    #709082
    David
    Staff
    Customer Support

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

    #709543
    Mary Pearson

    Thanks David. I’ll give that a try. Much appreciated!

    #709704
    Mary 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.

    #710052
    David
    Staff
    Customer Support

    Ok, so the Element Hook before header, can you edit that and change the priority to 0.

    #710149
    Mary 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 7K8
    Call Us Today! (905) 683-3811     

    #710304
    David
    Staff
    Customer 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&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
        <div class="clear"><!-- clearfix --></div>
    </div>
Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.