Override Mobile Responsive Menu CSS

Comment on Stallion Responsive WordPress SEO Theme by SEO Dave.

The mobile responsive menu on your politics site isn’t working because you’ve added .js to the Stallion Responsive 8.1 CSS rules (see my other comment), the .js CSS code is from Stallion Responsive 8.0 and is not used by 8.1 at all.

There is no easy fix for this, it’s a case of starting with the original Stallion Responsive 8.1 CSS code and add your custom colour CSS changes to it NOT change the Stallion menu code to the old 8.0 code and hacking the php template files, that’s broken the mobile menu.

The 8.0 code does not work with the new mobile responsive menu, I explained this when you asked weeks ago that it’s best to re-add the custom CSS rules not try to hack 8.0 and 8.1 together.

All because the 8.0 mobile responsive menu looks like the 8.1 responsive menu does not mean it’s the same. The HTML and CSS code was changed significantly to remove the need for Jquery to run the mobile responsive menu for performance reasons. the menu no longer uses any javascript (that’s what the .js was for), the 8.1 mobile responsive menu is a major performance improvement you want.

Had a quick look at the CSS menu colour code you’ve added and you shouldn’t have any problems using it with the 8.1 code.

Like I said in another comment, don’t overwrite the rules in the CSS files if you can help it. It’s better for future updates to add them at the bottom of either the colour CSS file or the mobile CSS file. If you do this the next update could be as easy as a simple copy and paste job to maintain your custom code.

Also try out the new CSS creator feature before manually editing a CSS file, you might find you can achieve a lot of what you want without having to edit any files, all the colour schemes are generated using the CSS creator feature.

# https://stallion-theme.co.uk/seo-silo/comment-page-1/#comment-44826

What I’d do is use the creator CSS option and add new CSS rules to the box provided (there’s a box for adding your CSS) to override the current Stallion rules or add new features, no need to manually edit any CSS files. There’s a cool ‘trick’ with CSS if you add the same class rule twice only the last version in code is used.

So if you say a class should have font colour red then repeat the same CSS, but set colour to blue the colour will be blue because it was found last in the CSS code. It’s how the mobile.css rules work, you just repeat the same rules with an additional option to load only at a particular device size and because the mobile.css file is loaded last code wise those rules are given priority.

For example you’ll find this code in all the colour CSS files:

.srumenu li li a::before {
content: '\2013';
position: absolute;
top: 0;
left: 20px;
}

This is related to the mobile drop down menu. The “content: ‘\2013’;” part is what adds the – (code for this is \2013: more examples http://css-tricks.com/snippets/html/glyphs/ ) to the left of indented menu links.

If you wanted a different sign (not -) you could hack the above CSS code or add the code again like this at the bottom of the file or the mobile.css file:

@media only screen and (max-width: 800px) {
.srumenu li li a::before {
content: '\273';
}
}

You only repeat what you changed. If you aren’t changing “position: absolute;” etc… no reason to add it again.

Which would change – to the >> sign. That’s a simple CSS overwrite, the last rule is used. The first rule says show -, but the last rule says show >> and only the last rule counts.

Note the @media line and the extra } that’s because the original code is within the same @media CSS rule set (basically says only run this CSS rule when the screen is smaller than 800px).

Only difficulty with this is when you want to remove some CSS rules rather than replace them, the normal solution is delete the relevant CSS, but that makes updates a pain. You have to try to figure a way to remove something via an override that the result would be the same as manually deleting the CSS. For the example above it’s possible:

@media only screen and (max-width: 800px) {
.srumenu li li a::before {
content: '';
}
}

Now the – sign is replaced by an empty space (I think, didn’t test :-)).

Sometimes there aren’t any ways to create an override CSS rule and you have to delete the line. In this case I suggest adding a comment (anything between /* and */ is a comment and not run) so you know what you did and why like this.

.srumenu li li a::before {
/* content: '\2013'; # MYEDIT Deleted the - sign */
position: absolute;
top: 0;
left: 20px;
}

Now you can search the file for MYEDIT when updating to replicate your modifications in the new CSS file.

When you get to grips with the concept means all (most) of your CSS hacks can be added to the bottom of a CSS file rather than hacking in bits that is HARD to keep track of and tends to result in putting off updates until you have to bite the bullet.

David