Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • February 16, 2014 at 7:38 pm #224568
    SonicCube

    Hello Support

    i tried various quick css options found here in the support forum, but non of them solved my issue.

    I have a Ajax plugin that opens a popup/overlay, it worked once fine and lined up perfectly underneath the fixed header.
    Since one of the latest updates, it does not work and allways hides underneath the header.

    Any ideas how to solve this with a quick css ?

    Thanks a lot for your help.

    February 16, 2014 at 7:39 pm #224569
    SonicCube

    February 17, 2014 at 5:18 am #224761
    Ismael

    Hey!

    Can you please give us a link to the website? A screenshot of the issue will help.

    Best regards,
    Ismael

    February 17, 2014 at 10:03 am #224849
    SonicCube

    sorry ismael

    the links somehow go invisible when inserted trough the “link” button.

    http://www.soniccube.ch/soniccube/grid-xf-store-v2/

    February 17, 2014 at 11:57 am #224916
    Yigit

    Hi!

    Please add following code to Quick CSS in Enfold theme options under Styling tab

    div.gridfx-item-content { top: 27%; }
.header-scrolled div.gridfx-item-content { top: 14%; }

    Regards,
    Yigit

    February 17, 2014 at 3:57 pm #224984
    SonicCube

    Hello there

    i inserted the Quick css as mentioned (please see screenshot) but it does not change anything. Could it be that my Template does not “transfer” the quick css correct ?

    http://www.sonicmediadesign.com/files/temporary/enfold1.jpg

    Thank you so much for your help.

    • This reply was modified 10 years, 10 months ago by SonicCube.
    February 17, 2014 at 4:04 pm #224992
    Yigit

    Hey!

    Please add !important rule as following 

    iv.gridfx-item-content { top: 27%!important; }
.header-scrolled div.gridfx-item-content { top: 14%!important; }

    Code is being applied just fine

    Cheers!
    Yigit

    February 17, 2014 at 7:57 pm #225049
    SonicCube

    Hello

    thanks for your answer. Unfortunately that does not work. With % It puts the overlay “somewhere” on the page depending on the size of your browser window. The second line of code does nothing at all, no action on scroll (resizing the header).

    And most of all it does not work on mobile devices as the header there scrolls completely. (check the website, it’s online with the code in the quick css.)

    If this dynamic placing underneath the header is not possible, Isn’t there just a z-index workaround to have the overlay on top of the header, but underneath the shop icon ?

    Thanks for your help

    Daniel

    February 19, 2014 at 4:49 pm #226265
    Yigit

    Hey!

    Please try following code

    iv.gridfx-item-content { top: 88px!important; }

    It seems like you have changed header style so this should work fine.

    Regards,
    Yigit

    June 4, 2020 at 5:25 pm #1219474
    Dase

    Hello,

    I also have header overlapping content. How can I fix without margins? I want the header to be just above the rest and overlap only when scrolling down.

    June 4, 2020 at 7:42 pm #1219522
    Yigit

    Hi @Dase,

    Please remove following custom CSS code

    .html_header_top.html_header_topbar_active.html_header_sticky #top #main {
    padding-top: 0px !important;
}

    Best regards,
    Yigit

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.