Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1461727

    Hi, i enabled the funcion to have the logo appear only after scrolling the page down, then i added the following CSS code to make it work also on mobile. Everything works fine, but on mobile i’d need this funcion to be enabled only on the home page, i need the other pages to just show the header right away. I tried with page-id code but i couldn’t make it work.

    @media only screen and (max-width:767px) {
     .responsive #top #wrap_all #header {
        opacity: 1;
        position: fixed !important;
        top: 0 !important;
    padding-bottom: 20px !important;
      }
     .responsive #top #wrap_all #header.header_color.av_header_transparency {
        opacity: 0;
      }
    }

    Another request: i need to enable the social icons also on mobile inside the header, as they are showing only on desktop, i added the following CSS code, which it works but the icons are shown in the top middle instead of the top right of the header.

    @media only screen and (max-width: 767px) {
    .responsive #top #header .social_bookmarks {
        display: block !important;
    }
    }

    Thank you very much

    #1461777

    Hey Qgrafica_7,

    Please post a link to the site in question so that we can have a closer look at it.

    Best regards,
    Rikard

    • This reply was modified 3 months ago by Rikard.
    #1461902

    Hi,
    i’ve added the link in the private section.
    As you can see, the social icons are centered instead of being top-right.
    Thanks

    “LINK HOME PAGE”: here it works correctly, but i want the code to work only on this page, and not on the other pages
    “LINK OTHER PAGE”: i want the header in the other pages to be static, instead of appearing only after scrolling

    #1461916

    Hi,

    1. Please try this instead:

    @media only screen and (max-width:767px) {
     .responsive .home #wrap_all #header {
        opacity: 1;
        position: fixed !important;
        top: 0 !important;
    padding-bottom: 20px !important;
      }
     .responsive .home #wrap_all #header.header_color.av_header_transparency {
        opacity: 0;
      }
    }

    2. Please try this to align the social media icons to the right:

    @media only screen and (max-width: 767px) {
      .responsive #header .social_bookmarks {
        text-align: right;
      }
    }

    Best regards,
    Rikard

    #1462227

    thank you for your reply, but the CSS for header doesn’t work, can you help me?
    it works for the social media icon instead, thanks

    #1462295

    Hi,

    It seems to be working on my end, the header only appears after scrolling on the home page on mobile. Did you try checking in a private or incognito browser window?

    Best regards,
    Rikard

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