Forum replies created
in addition, that CSS causes the logo to push the menu to a second line when the sticky header appears on scroll. so, overall not an ideal solution.
thanks. the centering worked but changing the height to 400px makes the mobile view have a massive header height.
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?
further update: in trying to figure out why the icons were now working in Firefox and Safari but not in Chrome, I found that the font files are actually included in the theme files but they do not need to be (unless there’s something I missed). In fact, their inclusion in the theme leads to trouble if your site files are installed somewhere other than the url of the site itself.
If you don’t have access to (or don’t know how to use) the .htaccess file, the solution is simple. You must add
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
to the header.php file after the <head> statement. You can find this file by going to Appearance > Editor and then scrolling down to Header in the list on the right. After clicking on Header, look down a little bit in the file and add that statement after <head> and you should be ok. I’ve since returned my .htaccess file to its initial state and all seems fine.
FIXED:
my site is hosted in a subdirectory on my server (which is then pointed to the domain by my domain registrar) and as such, Firefox will not display the font awesome icons since the font files are hosted in a different directory.
ADD THIS TO .htaccess
<IfModule mod_headers.c>
<FilesMatch “\.(eot|font.css|otf|ttc|ttf|woff)$”>
Header set Access-Control-Allow-Origin “*”
</FilesMatch>
</IfModule>
before the ‘end wordpress’ statement. problem solved.
screen grab doesn’t seem to have worked. it’s here
https://www.dropbox.com/s/6epjke7v2e5ui55/Screenshot%202015-06-10%2014.49.36.jpg?dl=0
thanks for the reply. the problem with using # (which I know well and which I’ve used many times) is that the link is actually still clickable. I want the top level with-child links to be completely NOT clickable yet still trigger the drop down on mouse over in the desktop view. this does work when I create the menu item and then go back and edit it and remove the #.
I also know about changing the cursor using CSS, but this does not apply on mobile where there is no cursor. this was my original question.
If I use a # as the link for the top level menu item with child, will that convert into a non-tappable menu item on mobile?
ultimately I’d prefer a solution where I can update a txt file using ftp rather than a text entry area like the theme custom css and jetpack provides.
I know jetpack but I’d like the dev to comment on its use. Roman?
thanks! I wonder if there’s a way to enter custom CSS manually through a separate file? in other themes I’ve used, there was a file called user.css which was not affected by theme updates and which allowed me to enter custom CSS through a text file. Is there a way to do this with evolve?
I suppose style.css will be overwritten by theme updates and therefore is the wrong place for me to put custom CSS, correct?