Mobile CSS gone wrong for TRVL theme

burridgej · Member · Mar 5, 2014 at 10:14 am
Copy link

Add topic to favorites
Hell WordPress Gods,

My blog is http://www.joeburridge.com

I recently purchased the Custom Design upgrade and inserted the following CSS to allow the menu bar to be at the top of the page for easier navigation:

body {
position: relative;
padding-top: 52px;
}

.navigation-main {
position: absolute;
top: 0;
}

Eventhough I have made sure to not tick the box that will allow this CSS to be enabled on mobile, it is somehow on the mobile version of the site. The result is not a good one.

Please help.

Thanks,
Joe

The blog I need help with is: (visible only to logged in users)
burridgej · Member · Mar 5, 2014 at 10:14 am
Copy link
*Hello WordPress Gods
hfzrhmn · Member · Mar 5, 2014 at 10:36 am
Copy link
Hey Joe,

It seems to me that the ‘ Include this CSS in the Mobile Theme’ option only apply if you activate the separate WordPress Mobile Theme. If you’re using a mobile-ready theme, then the WordPress Mobile Theme is probably deactivated, so the option above doesn’t apply.

(It’s confusing, I know.)

So basically, if you want your CSS to not apply on mobile devices, you will need to wrap them in media queries. Here’s a good overview of CSS media queries:

Media Queries for Standard Devices

As an example, to make your CSS to apply on desktops only, you can do this:
```
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
body {
position: relative;
padding-top: 52px;
}

.navigation-main {
position: absolute;
top: 0;
}
}
```
burridgej · Member · Mar 5, 2014 at 10:50 am
Copy link
Thanks, but I’m afraid it doesn’t seem to work.

I’m completely non-technical, so I just need some magical CSS to copy and paste in.
hfzrhmn · Member · Mar 5, 2014 at 11:01 am
Copy link
No problem, you can copy and paste the following code to your Custom CSS box:
```
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1024px) {
	body {
		position: relative;
		padding-top: 52px;
	}

	.navigation-main {
		position: absolute;
		top: 0;
	}
}
```
And make sure you delete your old Custom CSS first before adding the above CSS.

Doing this will make your changes apply to devices with screen width of 1024px and wider, so basically most desktop computers. On mobile devices, the menu will remain at the bottom.
burridgej · Member · Mar 5, 2014 at 11:04 am
Copy link
YES!

Legend! Thanks for getting back to me so quickly. All works great!
hfzrhmn · Member · Mar 5, 2014 at 11:25 am
Copy link
Nice! You’re welcome.

No items found.