Sticky Header Color

  • Author
    Posts
  • #1697

    pgrenier
    Participant

    Hey there,

    Ultra theme has been wonderful for me; thank you for developing it!

    I have been trying to change the color on the menu and have been successful until I scroll down. When using the sticky menu, the color changes to white.

    Is there a way to change the color on the sticky menu as well?

    Thank you for any help,

    — Paul Grenier

    #1698

    Andrew Misplon
    Keymaster

    Hi Paul

    Thanks for your support, glad to hear Ultra has been useful.

    Please remember not to edit style.css directly as all WP themes overwrite their theme folder during updates. Let me know if you need help recovering from a style.css edit situation.

    Using a plugin like Simple Custom CSS you can try the following:

    /* Header */
    
    .site-header { 
    	background: #ffffff; 
    }
    
    @media (min-width: 1024px) { 
    	.overlap .site-header:not(.fixed) { 
    		background: rgba(255, 255, 255, 0.9); 
    	} 
    	.site-header.site-header-sentinel.fixed { 
    		background: rgba(255, 255, 255, 0.9); 
    	} 
    }

    Edit as required. #ffffff is white and so is 255, 255, 255 (RGB). 0.9 is opacity. Change that to 1 to remove opacity.

    Here is a hex (#ffffff) to RGB (255, 255, 255) tool if you need it: http://hex.colorrrs.com/.

    Let me know how you come along.

    #1700

    Andrew Misplon
    Keymaster

    Quick follow-up to see how this went 🙂 Let me know if you need any further help.

    #1701

    pgrenier
    Participant

    Andrew,

    I am sorry for the delay in my response. That worked like a charm. Seemed like I had half of what I needed

    Thank you again for a quick response.

    — Paul.

    #1702

    Andrew Misplon
    Keymaster

    No problem.

    Awesome 🙂 Really glad to hear that did the trick.

    If anything else comes up, please, let me know.

    Cheers for now.

    #2154

    pgrenier
    Participant

    Hey Andrew,

    I updated the theme and now the header is not keeping the same color across both states. Is there anything that I need to change that is different than the solution you gave me above? FYI – I am using a child theme, which I thought would prevent me from having to change things on updates.

    Thank you again for any help,

    — Paul Grenier

    #2155

    Andrew Misplon
    Keymaster

    Hi Paul

    Sorry to hear about the hassle.

    Is the Custom CSS we previously inserted still saved in your Custom CSS plugin or child theme style.css file?

    #2156

    Andrew Misplon
    Keymaster

    If you just upgraded from free to premium, please, check what you have set at Appearance > Customize > Theme Design > Header > Header Background Color.

    I’m just guessing at the moment. If you’d like to send a link to your site you can use the Set as private reply checkbox below the comment field. I should be able to find the problem quite quickly then.

    Thanks

    #2157

    pgrenier
    Participant

    It is in the child theme style.css.

    #2158

    Andrew Misplon
    Keymaster

    Thanks for the update; I’d need to take a look to try figure out what’s happened.

    #2159

    pgrenier
    Participant

    Meaning at the site? Or is there another way that I can send you the files or excerpts from the code? The site is currently hidden because it does not have approval to be visible to the public yet.

    #2160

    Andrew Misplon
    Keymaster

    These kind of CSS problems are really easy to inspect using Chrome Developer tool. Each browser has it’s own developer tool. So, unfortunately, without inspecting the site, I’ll just be guessing as to what the problem is. I’m online now, if you’d like you could take the site out of maintenance mode for 5mins and send the link privately using the Set as private reply checkbox below.

    #2161

    pgrenier
    Participant
    This reply has been marked as private.
    #2162

    Andrew Misplon
    Keymaster

    Apologies for the hassle. Please, can we try this in your child style.css file:

    .site-header.site-header-sentinel.fixed {
    	background: rgba(104, 95, 69, 0.9);
    }
    #2163

    Andrew Misplon
    Keymaster

    Sorry, let’s make it:

    .site-header.site-header-sentinel.fixed {
    	background: rgba(104, 95, 69, 0.9) !important;
    }
Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.

Scroll to top