hide navigation and header on mobile

You can follow the instructions here to customize the look of Jetpack’s Mobile Theme:
https://jetpack.me/2013/06/27/customize-mobile-theme/

Thanks to the Custom CSS module, you’ll be able to add custom CSS to your mobile theme to hide the header. This CSS should do the trick:

.mobile-theme .menu-search {
	display: none;
}

great, it works. thanks.

so now few questions:

1 how do i remove the auto-generated header with the site’s name? my theme has no header.

2. how do i remove the site’s title? on the page i can define to hide page title, but the mobile theme still displays it.

3. i put a clickable phone number in the header.
on desktop you see it, it’s there. on mobile theme you don’t see it. it’s not there. how do i display it?

4. where can i find the mobile theme’s html of the page, so i can see names of div’s etc.

5. where can i find the css of the mobile theme?

sorry for the many questions, but it seems important in order to use it to its full potential.

and lastly, a feature request: you wrote to me before that the css additions here are theme specific and all the additions to the css will disappear when i change a theme. even momentarily. i learned it the hard way.
please add a way to keep a copy of the text within the site for future use.

really thanks a lot

1 how do i remove the auto-generated header with the site’s name? my theme has no header.
2. how do i remove the site’s title? on the page i can define to hide page title, but the mobile theme still displays it.

You can hide the header (including the site’s name) with the following CSS:

.mobile-theme #branding {
	display: none;
}

Beware, though: once you do so mobile readers won’t be able to find their way back to your home page once they’re looking at a single post or page.

3. i put a clickable phone number in the header.
on desktop you see it, it’s there. on mobile theme you don’t see it. it’s not there. how do i display it?

I’m not sure where you’d put it once you remove the menu bar, the search form, and the Site Title area. Maybe instead of the Site Title, like so?
https://i.wpne.ws/Zxr4

You can do so with the following CSS:

.mobile-theme #branding {
	display: block;
}
.mobile-theme .site-branding {
	display: none;
}
.mobile-theme #branding:before {
	content: '0102030405';
	color: #111;
	font-size: 1.846em;
	font-weight: bold;
	line-height: 1.3;
}

4. where can i find the mobile theme’s html of the page, so i can see names of div’s etc.
5. where can i find the css of the mobile theme?

You can use your browser inspector to find out more about the mobile theme structure as well as the CSS applied to each element.

If you use Chrome, you can follow these instructions:
https://developer.chrome.com/devtools/docs/device-mode
https://developer.chrome.com/devtools/docs/elements-styles

You can then paste all your custom CSS inside the custom CSS editor in your dashboard, under Appearance > Edit CSS.

hi

it’s not working, YET…
i’ll play with it and get back to you.

as for the mobile’s page html, is it identical to the desktop’s version?

i’ll update you.

thank you very much

lenny

as for the mobile’s page html, is it identical to the desktop’s version?

No, it’s a specific theme. Chrome’s dev tools will help you there, as it will allow you to see the structure when on a mobile device.

thnks. i’ll check it.

lenny

I’m having similar issues with mobile views, with Jetpack overwriting/overruling any styles and headers/footers/etc. of the selected and modified theme’s existing mobile view; is there a way to use an existing theme’s mobile view instead of Jetpack’s? Having a check box to “use theme’s mobile view” might be a welcome addition instead of requiring the developer to recode Jetpack’s mobile settings.

still can’t find a way to hide the page tile (the name of the page.

in my theme i selected to hide it, and still the name is displayed, it seems auto generated with the page’s name.
can’t get rid of it.

any solution?

still can’t find a way to hide the page tile (the name of the page.

in my theme i selected to hide it, and still the name is displayed, it seems auto generated with the page’s name.
can’t get rid of it.

Could you post a screenshot of how things are displayed on your end, and let me know exactly what you’d like to remove? I’m not sure I understand what you’d like to remove.

@pa-plinka If your theme is already responsive, I’d suggest that you disable Jetpack’s Mobile Theme module under Jetpack > Settings in your dashboard.

This information was optimal. Best in class. Answered all I needed.

Though, I have one question:

On mobile, I have my home page elements stacked on each other (logo, banner content, etc). Moreover, the content seems to tilt to the side (left).

Please advise:
https://www.burningbush.press

@belovedarrow I had a look at your site, and you don’t seem to be using the Jetpack Mobile Theme right now. You’ll want to contact your theme author for help:
https://themeforest.net/item/avatar-one-multi-page-parallax-wordpress-theme/9450806