IE Header Opacity Problem

  • Author
    Posts
  • #3007

    Tomas Sears
    Participant

    Hi

    Thanks for the theme you created, its great for my needs!

    I have the header overlapping the slider (Which I configured in theme options) and using Custom CSS I have set the opacity of the header to 0.85 to give it a nice look. It works perfect in Chrome, but no in IE or Edge.

    This is the code:
    .site-header {
    opacity: 0.85;
    }

    and I already tried putting in the code you suggested on other IE problems.

    the web address is http://www.kimberley-stemcollege.co.uk/

    Let me know if you need any other info

    Many Thanks,
    Tom

    #3008

    Andrew Misplon
    Keymaster

    Hi Tom

    Thanks for your support, it’s most appreciated.

    Try instead using the following:

    /* Header */
    
    @media (min-width: 1024px)
    .overlap .site-header:not(.fixed) {
    	background: rgba(0, 0, 0, 0.85);
    }

    This assumes you continue to use a black header. If you change the header colour just change the 0, 0, 0 value to your preferred colour rgb value. This will require that you have the slider overlap setting enabled.

    Let me know how it goes. Hopefully it makes a difference 🙂

    #3020

    Tomas Sears
    Participant

    Thanks for getting back to me so quickly!

    I took out:
    .site-header {
    opacity: 0.85;
    }

    and put in the code you provided and it unfortunately didn’t work, it took away the opacity all together.
    Sorry I should have provided more info:
    The header background is an image and the logo it a PNG image with a transparent background.
    I set the opacity of the header to 0.85 which worked fine in both Chrome and IE, but the issue was that in IE it didn’t show the logo or menu items, but successfully showed the header background image with the opacity applied.

    Hope this info helps explain the problem better, sorry for the vague info from before.

    Also, on another question, as im making all these changes to the CSS file, would I be best making a child theme?

    Thanks again,
    Tom

    #3021

    Tomas Sears
    Participant

    Just had another look and next to the code it has a red x and says
    “Expected LBRACE at line 7, col 1
    Rule is empty”

    Line 7 was this: .overlap .site-header:not(.fixed){

    #3022

    Andrew Misplon
    Keymaster

    Hi Tomas

    Thanks for all the feedback.

    All WordPress themes completely overwrite their own folder during theme updates so if we release an update for Ultra and you run that update you’d lose all changes made to theme files. If you’re only making CSS changes then you don’t need to use a child theme and a plugin like Simple Custom CSS will be perfect.

    You’re using SiteOrigin CSS, that’s perfect, so no need to install anything else.

    The rule that’s empty can be found at Appearance > Custom CSS. You can remove it there.

    #3023

    Andrew Misplon
    Keymaster

    Try the following to set opacity of the background image:

    /* Header */
    .site-header:before {
        opacity: 0.85;
    }
    #3024

    Andrew Misplon
    Keymaster

    Insert the above at Appearance > Custom CSS.

    #3028

    Tomas Sears
    Participant

    Great stuff regarding the child theme, I’m glad I wont be having to tackle that!

    Thanks for the new code, it works, but its not as transparent as the original code and if i change it below 0.85, it goes very white

    Is there anything else I could try? Don’t worry if not!

    Many thanks,
    Tom

    #3029

    Andrew Misplon
    Keymaster

    Sure, try going to Appearance > Customize > Theme Design > Header and set the Header Background to black. Hopefully, that does the trick. Let me know how it goes.

    #3070

    Tomas Sears
    Participant

    Thanks for all your help – managed to get it to how I wanted!

    #3072

    Andrew Misplon
    Keymaster

    Awesome 🙂 Thanks for the update.

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

You must be logged in to reply to this topic.

Scroll to top