CODEWITHSUNDEEP
phpcss
Matthew Galpin
Matthew Galpin

Reputation: 13

How to disable fixed header on Mobile with CSS

Here is my code for a fixed header.

<?php } ?>
<header id="header" class="<?php if ( theme_option( THEME_OPTIONS, 'enable_header_fixed' ) == 'true' ) : ?> fixed_header <?php else : ?> relative_header <?php endif; ?>">

I would like to incorporate CSS to disable fixed on mobile. My website is 780webdesign.com if you need to view source. Thanks much.

EDIT: Still not resolved

Upvotes: 1

Views: 1197

Answers (3)

Sam Willis
Sam Willis

Reputation: 4211

You have inline styles which are going to cause issues with your classes, so you need !important on anyhting you use to overwrite them. The following will resolve you issue from what I see:

#header.fixed_header {position: relative !important;}
#page {margin-top: 0px !important;}

This code just needs wrapping in a css media query to set it to happen at what your preferred widths are.

Upvotes: 1

erwstout
erwstout

Reputation: 1307

Currently you're telling it to not display at all. You'd want to adjust the position of the element. So you would do something like this:

@media screen and (max-width: 767px) {
    .fixed-header {
        position: relative;
}

You may have to add some additional properties to fix positioning but that would be a good start.

EDIT:

After getting linked to the site, and taking a look this is what you would want to use.

@media screen and (max-width: 767px){
    .fixed-header{
       position: relative;
       margin-bottom: -270px;
    }
}

Upvotes: 3

Fenton
Fenton

Reputation: 251242

If you want to make the header "no longer fixed" but still visible, you can put it back to the default value, which is static.

/* To revert a fixed element to the default position */
.fixed-header {
    position: static;
}

Upvotes: 3

Related Questions