• Closed
  • steven wilson
    Spectator
    June 10, 2015 at 10:36 pm #18171

    in mobile Chrome (and desktop Firefox with window narrowed) the responsive mobile menu icon is broken along with its menu top image. See screen grab:

    https://goo.gl/photos/jReDR3xeyjKYGuoz9

    I’ve fixed fa on all desktop browsers but mobile seems to be broken.

    Denzel Chia
    Moderator
    Posts: 2656
    June 11, 2015 at 6:55 am #18185

    Hi,

    Works properly for me.
    Please see a screenshot from my iPhone. http://prntscr.com/7fmpbz
    Not by narrowing desktop window.

    Seems like your server is still giving you issue on font-awesome fonts.
    This is a screenshot from my desktop. http://prntscr.com/7fmqkn
    No font-awesome icons.
    See firebug, font-awesome loading from CDN or within Evolve theme are all blocked by CORS

    I am no server expert and does not know how to resolve this CORS issue, but looking at your previous forum thread,
    https://theme4press.com/support/topic/all-fontawesome-icons-showing-broken-symbol/
    I think you are well verse in server setting. So perhaps this article is able to help you. http://benjaminhorn.io/code/setting-cors-cross-origin-resource-sharing-on-apache-with-correct-response-headers-allowing-everything-through/

    Base on the fact that font-awesome fonts on our demo site is showing up properly, and the CORS errors seen in my firebug console when visiting your site, I would like to highlight that this is not a theme issue but your own server setup issue.

    Thanks!
    Denzel

    steven wilson
    Spectator
    Posts: 22
    June 11, 2015 at 5:04 pm #18214

    Thanks, it was indeed still a CORS problem. I fixed it by adding

    # Apache config
    <FilesMatch ".(eot|ttf|otf|woff)">
    Header set Access-Control-Allow-Origin "*"
    </FilesMatch>

    to my .htaccess file in the root of the subdirectory where the wordpress files live. I had modified this file previously but must have needed to tweak it a bit. For the benefit of someone finding this post with the same problem, there is an .htaccess file in the root of the server as well, which I did not edit.

    Interestingly, it seems that Firefox is following the correct procedure in not allowing CORS fonts to be loaded, and the fact that they were showing in webkit-based browsers is an error on the part of the devs of those browsers. Here’s hoping all of this sticks as browsers are updated to comply with regulations.

    Now my only remaining problem is that the mobile menu ‘bar’ (which starts with the three line menu icon) is blank. Can it say ‘menu’ or something like that?

    Roman
    Spectator
    Posts: 3147
    June 11, 2015 at 7:45 pm #18226

    sure try this Appearance -> Theme Options -> Custom CSS

    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (orientation : portrait)
    {
    #wrapper .dd-container .dd-selected-text span:before {
    position: relative;
    top:0px;
    padding: 0px;
    margin: 0px;
    content: "Menu";
    }
    }