Ask your WordPress questions! Pay money and get answers fast! (more info)

Hide header on mobile WordPress

  • SOLVED

I need to hide header in mobile everytime (iframe or not) via css using http://wordpress.org/plugins/mobble/

Answers (3)

2014-02-13

S├ębastien | French WordpressDesigner answers:


<?php
if(!is_mobile){
?>
<header id="header" class="site-header" role="banner">

<div class="container">

<a href="#" class="menu-toggle"><i class="icon-menu"></i></a>


<hgroup>

<h1 class="site-title">

<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">

<?php $header_image = get_header_image();

if ( ! empty( $header_image ) ) : ?>

<img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />

<?php endif; ?>



<span><?php bloginfo( 'name' ); ?></span>

</a>

</h1>

</hgroup>

<nav id="menu">

<?php wp_nav_menu( array( 'theme_location' => 'primary-right', 'container' => false, 'menu_class' => 'right' ) ); ?>

</nav>

<!-- / navigation -->


</div>

<!-- / container -->


</header>

<!-- / header -->
<?php } ?>


tomaso1980 comments:

great! works fine

2014-02-13

John Cotton answers:

CSS?


/* iPad layout */
@media only screen and (device-width: 768px) {
#my_header { display: none; }
}


Repeat for each device or screen size you want hidden on.

2014-02-13

Hariprasad Vijayan answers:

Hello,

You can do this using is_mobile() function. Write code in your php file like

if(!is_mobile){
// Code to hide on mobile
}

The code inside condition will not display in mobile device.

If you need to hide using css

@media only screen and (device-width: 320px){
#header {
display:none;
}
}

you can change "header" with your header id. Also you can change 320px to 480px if you need to hide upto 480px.