Make Logo Area Transparent for Polyclinic

Home Forums Polyclinic Make Logo Area Transparent for Polyclinic

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #21733

    InspirationStudio
    Participant

    Make Logo Area Transparent for Polyclinic

    Resolved

    Hey there! Have you noticed this support service is provided FREE of charge?
    If you like the speed and accuracy of resolutions, please consider supporting me with a small donation. Thank you

    Consider a donation →

    Hi Oliver,

    Our client wants to make their Polyclinic main navigation menu transparent so they can put a nice background image in that goes behind the navigation menu so it looks more modern. I have the navigation menu transparent, although, their logo area is still showing as white box on the top left even though it is set as transparent background. So obviously, I have that CSS code wrong and I cannot find what would make the logo area itself have a transparent or “no” background. How do I do that? This is what I currently have in to try but it’s not working for that logo area only– but works for the main navigation menu:

    .site,
    .site-header,
    .masthead,
    .has-styled-logo,
    .site-title,
    .masthead-placeholder,
    .site-branding,
    .site-header-inner,
    .site-content {
    	background: transparent;
    	z-index: 10;
    }
    .site-branding img {
      max-height: 100px;
    	background: none;
    	background: transparent;
    }
    • This topic was modified 1 month, 1 week ago by  Oliver Juhas. Reason: Formatting code
    #21735

    Oliver Juhas
    Keymaster

    Hi InspirationStudio,

    Please note that you should not only make the header transparent, but set its position too. By default each element in browser has a position of static, or the theme sets this to relative if needed. This means that the image you want to display beneath the header will still display below the header, rendering the header simply transparent, but not overlapping your image. To fix this, please set absolute position in your custom CSS:

    .site-header {
    	position: absolute;
    	width: 100%;
    	background: transparent;
    	color: black;
    }

    As the theme was not designed this way, I suggest to test this on various screen sizes and for various types of pages. You might need to apply additional CSS code or tweak the above code to your needs. Such as:

    .intro {
    	padding-top: 160px;
    }

    Tip: Try using your web browser code inspector to determine the CSS for your theme modifications.

    Best regards,

    Oliver Juhas
    WebMan Design

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

You must be logged in to reply to this topic.