Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • August 13, 2018 at 5:07 pm #996764
    crtdude

    I have a site which was developed from an Enfold Gym demo.

    MonaLisa Touch for Vaginal Health

    I wanted a sticky header throughout the site and have the Quick CSS below to control this.

    It looks like there is some issue with:
    @media only screen and (max-width: 989px) and (min-width: 768px) {
    .responsive #top #main {
    padding-top:200px !important;

    since I cannot add any more space above my slider from 768-989

    Any ideas how to fix?

    QUICK CSS
    /* Sticky header on Mobile */

    @media only screen and (max-width: 768px) {
    #header {
    position:fixed !important;
    top: 0;
    }}

    @media only screen and (max-width: 768px) {
    .responsive #top #main {
    padding-top:80px !important;
    }}

    /* Sticky header on Tablet */

    @media only screen and (max-width: 989px) and (min-width: 768px){
    #header {
    position:fixed !important;
    top: 0;
    }}

    @media only screen and (max-width: 989px) and (min-width: 768px) {
    .responsive #top #main {
    padding-top:200px !important;
    }}

    August 13, 2018 at 7:06 pm #996823
    Jordan Shannon

    Hey crtdude,

    Apologies, but I’m not able to see the issue you are having. Can you please screenshot the problem?

    Best regards,
    Jordan Shannon

    August 13, 2018 at 8:12 pm #996858
    crtdude

    https://panomedia.net/screenshot_228.jpg

    From 769-989, the slider is jammed too high in the header.

    August 14, 2018 at 6:48 am #996962
    Rikard

    Hi,

    Thanks for the screenshot and clarification. Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (min-width: 768px) and (max-width: 990px) {
.home #full_slider_2 {
    margin-top: 80px;
}
}

    Best regards,
    Rikard

    August 14, 2018 at 3:38 pm #997137
    crtdude

    Worked perfectly, THANKS!

    August 14, 2018 at 5:58 pm #997186
    Victoria

    Hi crtdude,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

    August 14, 2018 at 8:38 pm #997275
    crtdude

    I guess I spoke too soon. If you navigate to other pages the top of the pages are cutoff while viewing between 769 and 989. I tried adding whitespace and limiting it to only that size but it did not work at all.

    MonaLisa Touch for Vaginal Health

    August 14, 2018 at 9:14 pm #997309
    Victoria

    Hi crtdude,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 989px) and (min-width: 768px) {
  .responsive.html_mobile_menu_tablet.html_header_top #top #main {
      padding-top: 88px !important;
  }
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    August 15, 2018 at 9:58 am #997479
    crtdude

    Thanks Victoria – perfect!

    August 15, 2018 at 1:05 pm #997531
    Rikard

    Hi,

    Great, glad you got it working. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

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