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)
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
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.
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.