[scottdefuscoParticipant]

I’m trying to get the standard menu to hide on mobile devices. I don’t wnt the menu to display at all on mobile devices. I searched the forum and found guidance to add this customer CSS, which I have,

@media (max-width: 979px) {
.masthead-inline .x-btn-navbar {
display: none !important;
}
}

however the main menu still displays on mobile. The page is http://www.capturelife.com/capturelife-home-page-backup/

Thanks for your help.

[DarshanaModerator]

Hi there,

Thanks for writing in! The code looks fine. Copy all your custom CSS rules into an online tool like CSS Lint (http://csslint.net/) and see if you’re getting any errors.

Let us know how it goes.
Thanks!

[scottdefuscoParticipant]

I think there is a broader issue here. I’m wrestling with an issue where any changes I make that are mobile responsive, such as hiding a section based on screen width or using a mobile plugin, work fine through a desktop browser but do not work on an actual device browser, like mobile Safari or Chrome. One of your folks was trying to help me with this and I was able to clone the page and it resolved the problem, however now any changes I try to make are not being realized on mobile browsers.

So, to simplify the issue, any changes I make for my site to be mobile responsive are not showing up on an actual mobile device.

[LelyModerator]

Hello There,

I did check your site source code and notice that above CSS was added inside CSS comment. See attached screenshot.

/* This is how we declared multiple line comments in CSS. Anything added inside this slash/asterisk - asterisk/slash is considered as comment */
Your CSS is this:

	/*
You can add your own CSS here.

@media (max-width: 979px) {
	.masthead-inline .x-btn-navbar {
		display: none !important;
	}	
}

Click the help icon above to learn more.
*/

It is inside a comments. Should be like this

	
/* You can add your own CSS here. Click the help icon above to learn more.*/

@media (max-width: 979px) {
	.masthead-inline .x-btn-navbar {
		display: none !important;
	}	
}

Hope this helps.

Attachments:

You must be logged in to view attached files.

[scottdefuscoParticipant]

You guys are awesome. Stupid mistake. Thanks for the help.

I did notice that this remove menu options but the header is still showing. Is there CSS I can add to hide the header on mobile as well?

[RupokMember]

Hi there,

Do you want to hide full header? You can use this :

@media (max-width: 979px) {
header.masthead {
  display: none;
}
}

Cheers!

[scottdefuscoParticipant]

That did it! You guys are the best. Thanks.

[DarshanaModerator]

Glad we were able to help 🙂

[Author]

Posts