FontAwesome issue

RapidWeaver Classic Stacks
1

Hello

I’m facing a strange issue which appeared after some stack (or RW) update (or at least I hope so). One of the web site pages contains in the header the 3 bar awesome mark which appears on the tablets or the smartphones for the navigation. You can check it here
The other pages of the site don’t have this issue.

Do you have any idea where could this come from? In the index.php file of this page there is a following line:
<a href="#menu" class="nav fa fa-bars fa-3x"></a>
but it is also in the files of all the other pages. I can delete it manually but in this case I loose the navigation button on smartphones and tablettes.

Tank you for your help

2

That’s strange.

Try this. Put in the page contact in CSS this code. Perhaps :wink:

.fa-navicon:before, .fa-reorder:before { display: none; }

3

Looks like a combination of the theme css that controls the display of those bars not being tight enough because of the way the css is being consolidated, and read by the browser not being consistent.

The .fa class on the bars has a display property of inline-block which is trumping the .nav class display property of none, on that page.

While in the other pages the order of css as the browser is seeing it means that the .nav class display property of none is winning.

I’d contact the theme dev with this example, who will be able to force the css what ever way the browser reads it.

4

@Oscar: unfortunately, this doesn’t work :disappointed:

@Doobox:I’ll try

Thanks!

5

@zden This should get you by for the time being :

.nav {
        display: none !important;
    }

@media only screen and (min-width: 480px) and (max-width: 768px) {
    .nav {
        display: inline-block !important;
    }
}

@media only screen and (max-width: 479px) {
    .nav {
        display: inline-block !important;
    }
}
6

I think, that must work. It had a little error in the code, try this.

.fa-navicon:before, .fa-reorder:before { display: none; }

7

neither… none of them helps - in any way, thanks guys
I remember there was an update of the stack I’m using in this page: FormSnapBase from http://yabdab.com/stacks/formsnap
and it seems the issue started at this time (not sure).
I’ll try to contact them

8

That code I posted works. I tested it live in the console of your page. Where are you putting the code? Are you sure you are uploading the page to the same location? Anyway that code should work inside RW as well as long as it is placed in the css input area in the page inspector for the page, or the css input area provided by RW for the entire website.

9

You are true, Doobox, it works. I had to regenerate the index file - apparently it was not uploaded correctly.
Many thanks.