Make navigation bar + other blog elements partially transparent

I’ve gotten quite a few questions recently about how to make the navigation bar and other elements slightly transparent so that’s what I’ll cover today. It’s really simple, just two lines of CSS that need to be applied to an element with a background. I’ll be using a navigation bar to demonstrate this tutorial but you can apply this effect to most blog elements, some work better than others.

Opaque vs. Transparent vs. “Translucent”

Transparent is clear or completely see through, for this we use

background-color: transparent;

Opaque is the opposite of transparent, for this we use a normal background declaration like

background-color: #FFFFFF;

Translucent or partially transparent is when the colour can be seen but the background behind the object is also slightly visible through it. For this we use

background-color: #FFFFFF; opacity: 0.5; filter: alpha(opacity=50);

as I’ll demonstrate below. Edit the value (number) for opacity level, 0.0 is fully transparent and 1.0 is fully opaque. If using RGBA instead of HEX VALUES (#FFFFFF) or Template Designer ($(tabs.background.color) $(tabs.background.gradient)) it would be background: rgba(255, 255, 255, 0.5);.

We add CSS in Blogger to above ]]> </b:skin> in Template > Edit HTML. If you cannot find ]]> </b:skin> then check this tutorial for help.

Making navigation menu slightly transparent

I have numerous tutorials here for adding navigation menus to your blog and adding other elements to your navigation. To make the drop down navigation menu shown in this tutorial slightly transparent we would add the above opacity declaration to #cssnav in Template > Edit HTML > Above ]]> </b:skin>

#cssnav {
opacity: 0.5;
filter: alpha(opacity=50); 
}

Make-navigation-menu-partially-transparenttransparent navigation menu

If using Bloggers tabs navigation, apply it to .tabs-inner .widget ul in Template > Edit HTML > Above ]]> </b:skin>

.tabs-inner .widget ul { opacity: 0.5;
filter: alpha(opacity=50); 
}

If using page list gadget on blogger you can apply it to .PageList or #PageList1 (could be #PageList2 or #PageList3 depending on your template and how many you’ve added). Go to Template > Edit HTML and paste above ]]> </b:skin>

#PageList1 { opacity: 0.5;
filter: alpha(opacity=50); 
}

If using my tutorial on how to make your navigation sticky here, add the opacity to #navigationbar or sticknav depending on which part of the tutorial you used. Paste it above ]]> </b:skin> in Template > Edit HTML.

#navigationbar{ opacity: 0.5;
filter: alpha(opacity=50); } 

or

sticknav { opacity: 0.5;
filter: alpha(opacity=50); } 

Fading opacity effect on hover

If you want your object to be opaque initially but when you hover over it it becomes slightly transparent then you’d use something like the following, here I’ve used Blogger post images as an example.

DEMO

.post-body img {
    opacity: 1.0;
    filter: alpha(opacity=100); 
}

.post-body img:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
}

Adding effect to another element

If you want to add this effect to another blog element then you need to choose the correct selector and apply this effect to it. For example if you want to make your header image slightly transparent on hover/mouse/roll over then you’d use the selector #Header1_headerimg:hover.

Here is a recap of how to write CSS (from this post on understanding CSS in Blogger)

Selector { Property: Value; }

The selector is the HTML element you want to edit (heading, sidebar, paragraph). Declaration consists of a property and a value. Property (color, font, size) is the style attribute of the HTML element you want to edit and the value (black, 12px) is what you are changing it to.

Buy me a coffeeBuy me a coffee

32 Comments

  1. Love all of your tutorials! Do you use a different code to make a dropdown nav bar translucent? When I try this code, my dropdown tabs become completely transparent!

  2. Hey Ellie, I’ve made some modifications to my code and it seems like people are now unable to make comments on my blog…any ideas on how to fix that?

      1. Sorry about that, I figured it out about 2 minutes after I posted it! But do you think you could do a post on how to give the “No comments” and “Labels” links at the bottom of a post on the homepage a colored background? Or if it’s quick and easy you could just let me know here 🙂

        1. Hello! You can add a background to the full footer line using .post-footer-line.post-footer-line-1 { ... } or just to the comments and labels using .post-comment-link { ... } and .post-labels { ... }

  3. Hi Elaine!

    Thankyou so much for all of your wonderful navbar tutorials, they have been so helpful. I was just wondering how I could make my navbar transparent only when it starts scrolling?

  4. Hi there, I was just wondering how to make a slightly transparent background but keep the text the same color? I am using your drop down menu.
    Thanks

    1. You can wrap the navigation in a div with an id or class and apply the opacity and background to it instead. The comment by Eoaql is another alternative that will work for you.

    1. Hello, thank you. Find .tabs-outer { in Template > Edit HTML and replace background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0; with background: $(tabs.background.color);, that will remove the gradient.

  5. Hi there,

    These are great tutorials – thanks.

    I’m using WordPress 4.0.1, and just using the TwentyFourteen theme while I learn how to customize the navigation. I’m sorry, but where is it that I insert this code:

    > To make the drop down navigation menu shown in this tutorial slightly transparent we would add the above opacity declaration to #cssnav in Template > Edit HTML > Above ]]>

    Which template do I edit? Is it in style.css, or…?

    Thanks,
    Matt

  6. Hi Elaine,

    This is a great blog and is helping me a learn a lot of new things. I just wanted to ask you how can we make a menu more mobile device friendly? I like the way your menu shows up on a mobile device

  7. Thank you so much. This is exactly what I was looking for and it worked perfectly. I have just changed the code a little bit to have the perfect degree of opacity. thanks for sharing all those tips with us.

  8. Hi I have trouble making my top menu bar transparent. When I apply the code, it ends up making my whole blog content transparent. I am using a blog template, but although I am not a pro in HTML I am still learning how to manipulate the template without destroying my whole blog template. So I know there’s a way to just make my top menu bar transparent without making everything else. I just need help finding how. Thank you.

    1. Hello, it’s due to how your template has been coded – there’s no background on the navigation. That’s just the body background. Even if there was a way to implement it, you wouldn’t notice that it is tansparent as there’s nothing behind it.

  9. Hello again!
    So I was able to make it transparent but when I hover over a dropdown section I want it to be opaque so that way when it is over top of an image or something people can see it instead of it being transparent.

    I tried to add #navigationbar:hover with all the rest but its not working…

    Thank you again for your help!

    1. You need to target the menu or list item directly, not the wrapper (#navigationbar). You could also just add a background colour to the list item itself over the transparent background in the hover state.

  10. Hey I was wondering how can you make the navbar ends transparent? I do not want the whole navbar transparent, only the ends so the background can show through the ends. (it will be like:
    [*transparent*(non-transparent nesting)*transparent])
    Please contact me through email because I probably might not find this site again. (I am on break at work). thank you.

    1. Hello, you could use something like background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 0)); to achieve this. You may need to play around with the percentages to adjust where the opacity changes.

  11. I haven’t been able to make my fixed navigation bar transparent…all the other sites were so confusing, because the menu items would also become opaque. Your directions were so clear and included the alpha coding. THANK YOU SOOOO MUCH!

  12. Thank You for the wonderful tut but i have a problem..the scroll bar go under the nav bar like your website is there anything i can do about it ? And what is the perfect opacity for a grey nav bar ?

Sorry, comments are closed!