Divi Mobile Solutions

Hiding the Header and Footer on Homepage Mobile View

Written by Divi Mobile Team

On February 27, 2017

Often when making a mobile version for a divi website I do not want the default header or footer to show on a mobile device. This is a simple action with a little bit of css and can be done for the entire site or a page by page basis. I added code for a few scenerios. 

To put this in-place for the entire site, simply paste the below code into the Divi/Theme Options CSS box.

To put this in-place for individual pages….. While on the page go to the page settings and paste this code into the CSS box for the page.

 

CSS

/* Hide Home Header and Footer Mobile Only */
@media only screen and ( max-width: 768px ) {
.home #main-header { display:none; }
.home #page-container { padding-top:0px !important }
.home #main-footer { display:none; }}

CSS

/* Hide Home Header Mobile Only */
@media only screen and ( max-width: 768px ) {
.home #main-header { display:none; }
.home #page-container { padding-top:0px !important }}

CSS

/* Hide Home Footer Mobile Only */
@media only screen and ( max-width: 768px ) {
.home #main-footer { display:none; }}

CSS

/* Hide  Header and Footer for all pages and devices*/
#main-header { display:none; }
#page-container { padding-top:0px !important }
#main-footer { display:none; }

You May Also Like…

How to Control the Divi Mobile Menu Top Border

How to Control the Divi Mobile Menu Top Border

Adding some color or flare to your divi mobile menu is a nice idea, but what if want to control it on a page by page basis? Yes it is possible with a little bit of CSS. You may even want the whole top border to be gone and not used at all. The CSS is listed below. You...

How To Add Text Above or Below the Mobile Hamburger Menu

How To Add Text Above or Below the Mobile Hamburger Menu

Adding some text below or above the mobile hamburger menu on Divi is really easy to add and edit to your liking.  With the code below simply add it to your Divi / Theme Options / Global CSS and you are done. You can change  the word MENU to anything you like, change...

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *