How to make top navigation transaprent

[crissy76]

Hello! I've been working on my blog for weeks--switching back and forth between themes trying to find the one that feels like me. I finally decided on the Beautiful Pro Theme. I'd like to make my top navigation transparent so you can see the pink flower background underneath. Here is a link to my site: http://www.crystalssweetlife.com/

Can anyone help?

🙂
Crystal

[Brad Dalton]

One method is to use negative margin on your site header banner which is the same height as your menu bar.

---

Tutorials for StudioPress Themes.

[crissy76]

That totally works. With a margin of -60px the menu sits on the flower background. But, that's not quite what I'm trying to do. I probably didn't explain it right. What I want to do is on this site: http://robincornett.com/about/. If you look at the menu at the top, you can see through it to the photo. That's what I want to do. 🙂 Is that possible without destroying my site? LOL

Thanks for responding, Brad. I really appreciate it.

[Gandt]

Crissy, to make that area transparent, all you need to do is get rid of its background colour and change it for transparent. Currently, you have this:

.nav-primary {
width: 100%;
background-color: #292c33;
background-color: rgba(41, 44, 51, 0.9);

Remove both background colour rules and replace them with:

background:transparent;

So that the resulting css for .nav-primary looks like:

.nav-primary {
width: 100%;
background:transparent;

(or get rid of the background rules entirely, assuming you have no other leftover css styles that can override this)

My recommendation is simply to state it as you want it to be.

[Author]

Posts