Need Help How to Make the Header Transparent for Metro Theme

Community Forums Forums Design Tips and Tricks Need Help How to Make the Header Transparent for Metro Theme

This topic is: not resolved

Tagged: ,

This topic contains 3 replies, has 2 voices, and was last updated by  Davinder Singh Kainth 5 months, 3 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #89281

    rockyfp
    Member
    Post count: 1

    I’d like to make the header area transparent (not removing it) so that the visitors can see the header part of background image. Tried some tips found over the internet and none worked. How do I do that? And, how do I remove the header logo/image.

    Thanks a lot.

    http://www.thestoneboy.com
    #89302

    Davinder Singh Kainth
    Participant
    Post count: 1198

    This will involve changing few things in style.css file. To get started, look for following code:

    /*
    Site Header
    ---------------------------------------------------------------------------------------------------- */
    
    .site-header {
    	background-color: #fff;
    	padding: 0;
    	overflow: hidden;
    }
    
    .header-image .site-header {
    	padding: 0;
    }

    Change it to following:

    /*
    Site Header
    ---------------------------------------------------------------------------------------------------- */
    
    .site-header {
    	background:transparent;
    	padding: 0;
    	overflow: hidden;
    }
    
    .header-image .site-header {
    	padding: 0;
    }

    Need website customization services or other Genesis / WordPress help ?
    Davinder @ Design Studio iGuiding Media | My Blog | Fresh Genesis Themes Collection

    #89306

    rockyfp
    Member
    Post count: 1

    Hi Davinder,

    Thanks for your help.
    Changing background: to “transparent” doesn’t make the header transparent? Anything else I need to change?

    Thanks again.

    Rocky

    #89319

    Davinder Singh Kainth
    Participant
    Post count: 1198

    You need to check following classes for background (as white color) code.

    body {
    	background-color: #fff;
    	color: #222;
    	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    	font-size: 16px;
    	font-size: 1.6rem;
    	font-weight: 300;
    	line-height: 1.625;
    }
    
    /* Site Containers
    --------------------------------------------- */
    
    .site-container {
    	background-color: #fff;
    	margin: 32px auto;
    	margin: 3.2rem auto;
    	max-width: 1140px;
    	overflow: hidden;
    	padding: 36px;
    	padding: 3.6rem;
    }
    Site Header
    ---------------------------------------------------------------------------------------------------- */
    
    .site-header {
    	background-color: #fff;
    	padding: 0;
    	overflow: hidden;
    }
    
    .header-image .site-header {
    	padding: 0;
    }

    Comment out background-color code line and then check. For example:
    Make background-color: #fff;
    to
    //background-color: #fff;


    Need website customization services or other Genesis / WordPress help ?
    Davinder @ Design Studio iGuiding Media | My Blog | Fresh Genesis Themes Collection

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.