Short Challenge

by General Free Credits · 23 posts
10 years ago in Help & Requests

Posted 10 years ago · Author

I need this navigation bar to be transparent (faded look) in .css any one?

Code

<div class=" navbar navbar-static-top"> 
  <div class="navbar-inner">
    
    <a class="brand" href="#">Brand</a>
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
     <li class="divider-vertical"></li>
     <li><a href="#">More</a></li>
      <li><a href="#">Options</a></li>
    </ul>
    
  </div>
  </div>

Posted 10 years ago

Welcome back to the family, nice to have you back.

What do you want to be transparent, The text? Other than that there's nothing to make transparent considering there's no border or background.

If you want to make the text transparent, do this:

Code

<style type="text/css">
   .navbar-inner a{
      opacity:0.4;
      filter:alpha(opacity=40); /* For IE8 and earlier */
   }
</style>

Hope that helps. If it's not what you want, let me know and I'll pump out some new code.

Posted 10 years ago · Author

Thanks for the welcome back... I didnt know I was gone though :twisted:

Any ways

I dont want the text to be transparent, I just want the background to look faded like a lightly tinted car window.

P.S when running the code you will see that it has a background. :doubt:

Posted 10 years ago

General Free Credits wrote:
Thanks for the welcome back... I didnt know I was gone though

Well, I hadn't see you post in a while or say anything

General Free Credits wrote:
Any ways I dont want the text to be transparent, I just want the background to look faded like a lightly tinted car window.

Okay, I can do that.

General Free Credits wrote:
P.S when running the code you will see that it has a background.

I ran the code and didn't see a background. I used this online tool: http://www.jmarshall.com/easy/html/testbed.html

Anyway, the only way to modify the background transparency without also modifying the content is to use css3:

Code

background-color: rgba(0,0,0,0.3);

Mess around with this code and see if you can get it how you wanted. It's a bit difficult to get the tinted window look, you'll have to mess with different rgba values.

Code

<html>
   <head>
      <style type="text/css">      
         .navbar-inner {
            background-color: gray;
         }
         
         .nav {
            background-color: rgba(0,0,0,0.3);
         }
      </style>
   </head>
   <body>
      <div class=" navbar navbar-static-top">
         <div class="navbar-inner">         
            <a class="brand" href="#">Brand</a>
            <ul class="nav">
               <li class="active"><a href="#">Home</a></li>
               <li><a href="#">Link</a></li>
               <li><a href="#">Link</a></li>
               <li class="divider-vertical"></li>
               <li><a href="#">More</a></li>
               <li><a href="#">Options</a></li>
            </ul>
         </div>
      </div>
   </body>
</html>

Posted 10 years ago · Author

Thanks D.M, but thats not what I want

I need you to use this to view the code http://www.bootply.com/61032#

you will see three menu bars with their html codes and .css

I can do like any thing with them but cannot get the background faded... every thing get faded when I try. :doubt:

P.S we using bootstrap method to code
and I've become a slave to work

thats why I'm not here plus I dont remember my email I used to sign up for imvu and I forgot the imvu pass so I cant reset it :doubt:

Posted 10 years ago

So you want the navbar-inner div to be faded?

Posted 10 years ago · Author

Yes I want the Navbar to be faded, not the buttons though... speaking of buttons maybe I'm going about this the wrong way <_<

I've tried all the .css skills I have for 12 hours yesterday and still I cant figure it out

Last edited by General Free Credits on Fri May 30, 2014 3:07 pm, edited 1 time in total.

Posted 10 years ago

General Free Credits wrote:
Yes I want the Navbar to be faded, not the buttons though... speaking of buttons maybe I'm going about this the wrong way <_<

Everything I have tried has resulted in the same results you're getting (faded background and content). The only way I think you will be able to accomplish this is by using a background image and repeating it.

EDIT: after reading articles and StackOverflow questions, I would say using an image is your best bet. Every work around I've heard would require a lot more code and effort than I think is worth it for this project.

Posted 10 years ago · Author

I know I could do that but

I'm required to use .css to complete the task

Posted 10 years ago

General Free Credits wrote:
I know I could do that but I'm required to use .css to complete the task

Well according to every source I've read on the internet, it's impossible to have a transparent background without effecting child elements. Unless you resort to redundant code and tricky positioning.

However, this article claims to have a solution: http://robertnyman.com/2010/01/11/css-b ... d-filters/

Though it didn't work for me and it's not supported by all browsers.

Product Requests

Short Challenge

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign in

Already have an account? Sign in here

Create an account

Sign up for a new account in our community. It's easy!