Mobile Header Background Colour

  • Author
  • #132705

    Hi Team… Just wondering if you could please provide the CSS code, or another solution, for adjusting the background colour of the header banner in the mobile & tablet versions which is defaulted to White.

    I currently have the awesome CSS code for changing the mashead.scroll-header, and would like this to also apply to the white header in the mobile and tablet versions:

    #masthead.scroll-header {
    background-color: #03202e;
    opacity: 0.5;
    animation: none;

    #page #masthead.scroll-header,
    #page #masthead.scroll-header a {
    color: #ffffff;

    Could someone please advise the code for this to apply as the default in mobile and tablet, but NOT in the desktop version?

    Still love the functionality of how the above works across all versions, just want to replace the white header as my default logo is white and this is fixing the problem nicely as opposed to using some of the code designed for 2 logos that have a few bugs.


    The blog I need help with is


    Theme Author


    To change a header background color in mobile and tablet views, please use this custom CSS:

    @media only screen and (max-width: 768px) {
    	#masthead.header-loaded {
    		background: #03202e;

    Please note, the header section stays at the top in smaller screens.

    Hope this helps.



    Amazing… Works perfectly.

    Thanks Taras!


    Theme Author

    You are welcome! :)

The topic ‘Mobile Header Background Colour’ is closed to new replies.