Responsive WordPress Menu CSS Rules

Comment on Stallion Responsive WordPress SEO Theme by SEO Dave.

Doh!, forgot the menu CSS code that’s located within the style-****.css files where **** is related to the colour scheme selected.

Similar instruction to the earlier comment, find the relevant style-****.css file for example if using White n Blue Rounded Corners it’s the file

/wp-content/themes/stallion-responsive/colors/style-white-n-blue-rc.css

and copy to the child theme folder.

Near the bottom of the CSS file you’ll find:

@media only screen and (max-width: 800px) {

Change the 800px to whatever size you want the mobile menu to kick in, so 480px based on what you said.

That will fix the menu issue. If you change colour scheme you’ll need to make the same change to the corresponding CSS file.

Not able to test code snippets right now, waiting on a new PC to arrive, so below is quite significant CSS changes that I haven’t tested.

Think I know what the issue is with the sidebars not doing what they should do after the CSS change, forgot that I minified the CSS code after creating it. Basically my original mobile.css code repeated a lot of CSS rules for each screen size, since pagespeed is now important to Google SEO I removed all the repeated CSS rules for the lower screen sizes as they are present in the 800px rules: some of the 800px max-width CSS is needed for the lower screen resolutions and I told you to delete them all :-)

If you replace your current code between this CSS code:

@media only screen and (max-width: 480px) {
.... css rules
@media only screen and (max-width: 400px) {

With this code:

@media only screen and (max-width: 480px) {
#wrap_stallion {
width: 460px;
}
#stsearchform,
#header_widget {
right: 10px;
}
#content_all {
padding-right: 0;
padding-left: 0;
min-width: 100%;
}
.singleside {
width: auto;
margin-right: 0px;
margin-left: 0px;
position: relative;
float: left;
padding: 0 0 15px 0;
}
* html .singleside {
left: 0px;
}
.leftside,
.rightside {
position: static;
float: inherit;
width: auto;
margin-left: 0;
margin-right: 0;
padding: 0 0 0 0;
}
* html .leftside {
left: 0px;
}
#footer_stallion {
margin-right: 0px;
margin-left: 0px;
}
#footer_stallion2 {
width: auto;
margin-right: 0px;
margin-left: 0px;
}
#archive_widget,
#banner_widget,
.stfullwidget,
.stfoot,
.stfoot3 {
width: 432px;
padding: 0;
margin: auto 10px auto 10px;
}
#right-sidebars,
#left-sidebars,
#queries_stallion {
width: 440px;
padding: 0;
margin: auto 10px auto 10px;
}
.sidebars-plus1,
.sidebars-plus2 {
width: 100%;
padding: 0;
}
.st-footer-links ul {
padding: 0 0 10px 0;
}
.str_landscape {
height: 132px;
width: 460px;
}
.post-meta,
.extra-padding,
#comment-area textarea,
.comment-stallion {
width: 440px;
}
.home .odd0,
.archive .odd0,
.search .odd0,
.home .odd1,
.archive .odd1,
.search .odd1 {
width: 440px;
margin: 10px;
}
#st_feature_content,
.st_feature_post {
height: auto;
}
.st_feature_pager a {
line-height: 0%;
visibility: hidden;
}
.st-profiles-left,
.st-profiles-right {
width: 24px;
}
.st-profiles-left {
left: 3px;
}
.st-profiles-right {
right: 3px;
}
#imageMenu {
width: 440px;
}
#imageMenu ul li a {
width: 84px;
}
}
@media only screen and (max-width: 400px) {

It should work.

Been a couple of months since working on the CSS files and there were a few tricky CSS rules that needed a few tweaks as the screen sizes changed, if you find something doesn’t quite work look at the CSS rules you’ve deleted from the mobile.css file for ones missing above.

David