Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • January 26, 2015 at 12:25 am #385219
    pelyon

    Hi,
    I have two sets of pages with a different header image than the rest of the site. On these sets of pages only, the header disappears in mobile view.
    Link to one of the affected pages:
    http://billrusselldesign.com/sr_volunteers/home/volunteer-opportunities/san-rafael-clean/

    1. I have tried disabling all plugins,
    2. removing the css that puts the the new header images in place, (quick css)(see below)
    3. removing the css that changes the background color on these same pages (in a code block per page) (see below)
    4. removing the css that removes the logo from those pages, (quick css)(see below)

    all to no avail. Any ideas you have to rectify are greatly appreciated.

    -Pelyon

    (2)/*different header background image for SRC pages*/
    .page-id-1137 #header_main, .page-id-991 #header_main, .page-id-993 #header_main, .page-id-996 #header_main, .page-id-1400 #header_main{
    background-image: url(“http://billrusselldesign.com/sr_volunteers/wp-content/uploads/2015/01/SRC-headerG_logo.jpg”);
    }
    (3)<style type = “text/css”>
    #main .main_color .container, .main_color {
    background: none repeat scroll 0 0 #c3d2d5 !important;
    }
    </style>

    (4)/*removes srv logo from src pages*/
    .page-id-1137 .logo, .page-id-1400 .logo, .page-id-993 .logo, .page-id-996 .logo{
    display:none!important;
    }

    http://billrusselldesign.com/sr_volunteers/home/volunteer-opportunities/san-rafael-clean/

    January 26, 2015 at 10:07 pm #385872
    Elliott

    Hi Jason!

    I think it’s coming from this CSS.

    .responsive #header_main .container {
  height: auto !important;
}

    Best regards,
    Elliott

    January 27, 2015 at 12:40 am #385950
    pelyon

    Thanks Elliott, Is that css in my quick css area, because I didn’t see it there, nor in my codeblock.

    Thanks again,

    Pelyon

    January 27, 2015 at 9:17 pm #386589
    Elliott

    Hey!

    Try adding this to a codeblock element in the pages where your having the problem.

    <style type = "text/css">
.responsive #header_main .container {
  height: 200px !important;
}
</style>

    Regards,
    Elliott

    January 27, 2015 at 9:56 pm #386618
    pelyon

    Thanks Elliott, that change revealed the header on the mobile view, however on the desktop view, it also made the menu bar extra tall (see link below). What do you think?

    http://billrusselldesign.com/sr_volunteers/home/volunteer-opportunities/san-rafael-clean/

    January 28, 2015 at 5:08 pm #387128
    Yigit

    Hey!

    Please try adding the code to Quick CSS field as following

    @media only screen and (max-width: 480px) {
.responsive #header_main .container {
  height: 200px !important;
}}

    Best regards,
    Yigit

    January 28, 2015 at 6:53 pm #387298
    pelyon

    Thanks Yigit, that did it. Thank you too Elliott, you guys rock!

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Header missing on mobile view on some pages’ is closed to new replies.