Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • January 5, 2015 at 7:03 pm #375255
    Snurp

    Hi again.
    I´m sorry, I was a bit quick to “ok” my last topic, https://kriesi.at/support/topic/header-transparency-on-mobile-menu/#post-375241
    After I put in the css, something happened to the social icons(to all the icons it looks like actually), both in header area and “downstairs”. Could you take a look please?
    Also, is this a fix for just this page or will it work with new pages with the same type of styling(I see the code refers to page 452)?

    Regards
    Snorre

    • This topic was modified 9 years, 10 months ago by Snurp.
    January 6, 2015 at 3:40 am #375453
    Andy

    Hi Snurp!

    do you refer to this code?

    @media only screen and (max-width: 769px) {
.page-id-452 div#header_main {
background-color: #93d733;
}
.page-id-452 a#advanced_menu_toggle {
background-color: #93d733!important;
}

    I don’t think this CSS is responsible for the social icons which do not display correctly. But you can check when you remove the code.
    Try do deactivate all plugins to see if anyone is causing the issue.

    Yes, only pages with this specific ID are influenced by the CSS. Here is a way to check the page ID: http://en.support.wordpress.com/pages/#how-to-find-the-page-id

    Regards,
    Andy

    January 6, 2015 at 1:52 pm #375656
    Snurp

    Hi. I tried to remove the code, and then everything was ok, so I think it must have something to do with the code.
    Here are some screenshots of the icons; It also affects the arrow icon to scroll to top of the page.

    https://www.dropbox.com/s/a3880fctfnfkoqs/Screenshot%202015-01-06%2012.43.57.png?dl=0
    https://www.dropbox.com/s/2ix40eti02vtm6d/Screenshot%202015-01-06%2012.45.01.png?dl=0

    Its a pitty that theres no global workaround, It´s a little bit odd that the header area can’t be transparent at mobile sizes. But ok, I´ll live with it :-)

    Best regards
    Snorre

    January 8, 2015 at 4:34 am #376614
    Andy

    Hi!

    I am not sure if I understand you correctly. Do you still ned help for your icons? If yes please send us a link to your website showing the issue.

    Which area header do you want to be transparent on mobile? Maybe we could fix it for you if you give us a link.

    Regards,
    Andy

    January 8, 2015 at 11:14 am #376698
    Snurp

    Hi.
    Since theres not a global work-around, I will design my site in another way. My problem was that the menubar was transparent when sized for desktop, but when sized to mobile/tablet, the menubar changes to the selcted color in the theme settings. In other words, the design for desktop was not consistent when viewed on mobile devices.

    I will remove the css you sendt me in a while, but maybe you would like to check what happened to the icons first?
    Just take a look at my site http://www.hey.no on a desktop, look at the social icons at the top right, the iconlist in the middle, the social icons at the bottom right, and the scroll-to-top button. They all have the same icon. When i remove the code, it´s back to normal.

    Best regards,
    Snorre

    January 10, 2015 at 3:59 am #377680
    Josue

    Hey!

    The code in question has a missing closing bracket that may be the root of the issue, try changing it to:

    @media only screen and (max-width: 769px) {
.page-id-452 div#header_main {
background-color: #93d733;
}
.page-id-452 a#advanced_menu_toggle {
background-color: #93d733!important;
}
}

    Regards,
    Josue

    January 20, 2015 at 2:57 pm #382471
    Snurp

    Hi.
    Tnx, this fixed the issue :-)

    s

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Social Icons’ is closed to new replies.