Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #996764

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

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

    #996823

    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

    #996858

    https://panomedia.net/screenshot_228.jpg

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

    #996962

    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

    #997137

    Worked perfectly, THANKS!

    #997186

    Hi crtdude,

    Glad we could help :)

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

    #997275

    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.

    #997309

    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

    #997479

    Thanks Victoria – perfect!

    #997531

    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

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.