Home › Forums › Free Themes › Photo Perfect › Header images on mobile devices

Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • July 9, 2016 at 1:42 pm #12381
    cdutly
    Participant

    Hi,

    The Header Image on Laptop and Pad occupy the whole area starting from the top of the screen. Logo, Site Title and Dropdown Menus display on top of the Header Image.

    While on mobile devices, for example an iPhone 6, there is a grey bar on top of the Header Image. Logo, Site Title and Dropdown Menus show on top of that grey bar instead of the Header Image.

    Is it possible to change this behavior? I prefer a consistent display of the Header Image across multiple platforms and devices.

    My website is: http://www.magicbricktech.com

    Thank you for your support.
    Best 🙂

    July 9, 2016 at 2:04 pm #12387
    wensolutions
    Keymaster


    @cdutly    ,

    Paste the following Custom CSS code in Appearance -> Customize -> Theme Options -> Advance Options -> Custom CSS

    @media only screen and (max-width: 767px) {

	
.site-header {

		background-color : none; 
		position: fixed;

	}
}

    Hope this will resolve your concern in mobile devices.

    Thanks

    July 9, 2016 at 2:21 pm #12391
    cdutly
    Participant

    Hi,

    Thanks for your response.

    The code doesn’t work. But if I add one more line, it will work. Is it ok to add the line ‘width: 0’?

    @media only screen and (max-width: 767px) {

    .site-header {
    background-color : none;
    position: fixed;
    width: 0;
    }
    }

    Best

    July 9, 2016 at 2:33 pm #12392
    cdutly
    Participant

    Hi,

    Sorry, my mistake. If ‘width: 0;’ is added, then Logo will go away on mobile devices.

    Best

    July 10, 2016 at 6:41 am #12402
    wensolutions
    Keymaster

    Add the z-index value something higher. It should work now.

    Final code

     @media only screen and (max-width: 767px) {

	
.site-header {

		background-color : transparent; 
		position: fixed;
                z-index: 99999;

	}
}

    Hope this helps!

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.