Looking for CSS help for custom widget

[arhyarion]

I am trying to format a price ticker at the very top of our front page. I followed the instructions here to create a custom widget:

Add Widget After Header On Home or Front Page in Genesis

And then I pasted in the ticker code. It worked, but for the life of me I haven't been able to figure out how to modify the CSS so that the white bar is transparent. Even though I added the following code in Additional CSS, it still remains white.

.widget_text .widget-wrap {
        background:none;
        color: red;
        border-color:transparent;
        border-style:none;
}
.widget_text .widget .widget_custom_html {
	background:none;
}
.custom-widget .widget-area {
	background:none;
}

The temporary red font color was applied - but ultimately I'd like white text - centered rather than all the way off to the left - on a transparent background. Any help appreciated. Thanks.

http://staging6.bsmclient.com

[Victor Font]

The white is the background for the HTML body element. The article you followed places the new widget area after the site header. It's being positioned correctly in the DOM, but on the front end it displays before the site header, not after where you added it.

The problem is because the site-header has a fixed position. Any element that has a fixed position floats above all other elements on the page. You have a few ways of fixing this. You can remove the fixed position for the site header so the new widget area displays beneath it as your code intends, but if you do that, the site header won't display over the photo background any longer.

You can also move the new widget area into the site-header. Instead of using add-action for genesis_after_header, use genesis_header instead with a lower priority than 10 so it displays on top.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[arhyarion]

Thanks for the reply Victor.

I found an alternative solution that works almost exactly the way I need.
I followed the Carrie Dils tutorial to add a utility bar.
On mobile it looks and behaves exactly the way I want it to. On desktop though, there is a strange looking gap at the top when I start to scroll down the page.

Is there anything I can do - either with CSS or javascript - to make it so the utility bar and navigation bar scroll up together at the same rate and have the black edge of navigation bar stop at the top of the screen?

[rawsta]

There are 2 small fixes that could solve it.
First would be to give the new utility bar also a position:fixed; so it stays in place.

Alternatively you could add top: 0 to .site-header.dark, which would remove the gap.

Hope that helps.

[arhyarion]

Thanks rawsta! The .site-header.dark modification is exactly what I was after!

[Author]

Posts