Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 9, 2024 at 10:26 pm #1461727
    Qgrafica_7

    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

    July 10, 2024 at 2:59 pm #1461777
    Rikard

    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 4 months, 2 weeks ago by Rikard.
    July 12, 2024 at 8:55 am #1461902
    Qgrafica_7

    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

    July 12, 2024 at 11:23 am #1461916
    Rikard

    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

    July 17, 2024 at 9:50 am #1462227
    Qgrafica_7

    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

    July 17, 2024 at 6:20 pm #1462295
    Rikard

    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

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