CODEWITHSUNDEEP
htmlcssweb
user6718998
user6718998

Reputation:

Replace navigation bar color with an image's

This is how navigation bar image looks like:

Navigation Bar Image

Code Snippet

main nav #wrap {
  width: 100%;
  height: 50px;
  margin: 0;
  z-index: 2;
  position: relative;
  background-color: #3a3a3a; }
  main nav #wrap .navbar {
    height: 40px;
    padding: 0;
    margin: 0;
    position: absolute; }
    main nav #wrap .navbar li {
      height: auto;
      width: 150px;
      float: left;
      text-align: center;
      list-style: none;
      font: normal bold 12px/1.2em Arial, Verdana, Helvetica;
      padding: 0;
      margin: 0;
      top: 20px;
      background: #3a3a3a; }
    main nav #wrap .navbar a {
      padding: 18px 0;
      text-decoration: none;
      color: white;
      display: block; }
    main nav #wrap .navbar li:hover, main nav #wrap .navbar a:hover {
      background-color: #54879d; }
    main nav #wrap .navbar li ul {
      display: none;
      height: auto;
      margin: 0;
      padding: 0; }
    main nav #wrap .navbar li:hover ul {
      display: block; }
    main nav #wrap .navbar li ul li {
      background-color: #54879d; }
    main nav #wrap .navbar li ul li a {
      border-left: 1px solid #1f5065;
      border-right: 1px solid #1f5065;
      border-top: 1px solid #74a3b7;
      border-bottom: 1px solid #1f5065; }
<main>
    <nav>
        <div id="wrap">
            <ul class="navbar">
                <li><a href="#">Home</a></li>
                <li><a href="#">Retrievals</a>
                    <ul>
                        <li><a href="#">Data Listing</a></li>
                        <li><a href="#">Web Scheduling</a></li>
                        <li><a href="#">Google Maps Application</a></li>
                    </ul>
                </li>
                <li><a href="#">Reporting</a>
                    <ul>
                        <li><a href="#" >Ad Hoc Report</a></li>
                        <li><a href="#">Drill Down Report</a></li>
                        <li><a href="#">Ranking Report</a></li>
                    </ul>
                </li>
                <li><a href="#">Business Intelligence</a>
                    <ul>
                        <li><a href="#">Business Dashboard</a></li>
                        <li><a href="#">Web Pivot Table</a></li>
                        <li><a href="#">Interactive Report</a></li>
                        <li><a href="#">What-If Analysis</a></li>
                    </ul>
                </li>
                <li><a href="#">Data Maintenance</a>
                    <ul>
                        <li><a href="#">Database CRUD</a></li>
                        <li><a href="#">Database Update</a></li>
                        <li><a href="#">Order Entry</a></li>
                        <li><a href="#">Drag-and-Drop Application</a></li>
                    </ul>
                </li>
                <li><a href="#">B2B Portal</a>
                    <ul>
                        <li><a href="#">B2B Portal</a></li>
                        <li><a href="#">Secure Data-Driven Listings</a></li>
                        <li><a href="#">Secure Shopping Cart</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
</main>

nav bar picture

I have this navigation bar and I am trying to replace that gray color with the one of the above attached image. As you can see, it is not a simple color. It has small transparent dots.

Is there anyway I can copy that color?

PS: I do not want to use the image.

Upvotes: 3

Views: 93

Answers (1)

Sworrub Wehttam
Sworrub Wehttam

Reputation: 598

As I mentioned on my comment, there's no css method for adding noise. However, you can embed images in html by base64 encoding them. I've pinched the code from this answer, it's transparent so can be applied over any colour. If you need a different level/style of noise then you'll have to create it and base64 encode it (a simple google search will bring plenty of options).

Anyway, hope this helps! 

main nav #wrap {
    width: 100%;
    height: 50px;
    margin: 0;
    z-index: 2;
    position: relative;
    background-color: #3a3a3a;
    background-image: url(data:image/png;base64,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);
}
main nav #wrap .navbar {
    height: 40px;
    padding: 0;
    margin: 0;
    position: absolute;
}
main nav #wrap .navbar li {
    height: auto;
    width: 150px;
    float: left;
    text-align: center;
    list-style: none;
    font: normal bold 12px/1.2em Arial, Verdana, Helvetica;
    padding: 0;
    margin: 0;
    top: 20px;
    background-color: #3a3a3a;
    background-image: url(data:image/png;base64,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);
}
main nav #wrap .navbar a {
    padding: 18px 0;
    text-decoration: none;
    color: white;
    display: block;
}
main nav #wrap .navbar li:hover,
main nav #wrap .navbar a:hover {
    background-color: #54879d;
}
main nav #wrap .navbar li ul {
    display: none;
    height: auto;
    margin: 0;
    padding: 0;
}
main nav #wrap .navbar li:hover ul {
    display: block;
}
main nav #wrap .navbar li ul li {
    background-color: #54879d;
}
main nav #wrap .navbar li ul li a {
    border-left: 1px solid #1f5065;
    border-right: 1px solid #1f5065;
    border-top: 1px solid #74a3b7;
    border-bottom: 1px solid #1f5065;
}
<main>
    <nav>
        <div id="wrap">
            <ul class="navbar">
                <li><a href="#">Home</a></li>
                <li><a href="#">Retrievals</a>
                    <ul>
                        <li><a href="#">Data Listing</a></li>
                        <li><a href="#">Web Scheduling</a></li>
                        <li><a href="#">Google Maps Application</a></li>
                    </ul>
                </li>
                <li><a href="#">Reporting</a>
                    <ul>
                        <li><a href="#" >Ad Hoc Report</a></li>
                        <li><a href="#">Drill Down Report</a></li>
                        <li><a href="#">Ranking Report</a></li>
                    </ul>
                </li>
                <li><a href="#">Business Intelligence</a>
                    <ul>
                        <li><a href="#">Business Dashboard</a></li>
                        <li><a href="#">Web Pivot Table</a></li>
                        <li><a href="#">Interactive Report</a></li>
                        <li><a href="#">What-If Analysis</a></li>
                    </ul>
                </li>
                <li><a href="#">Data Maintenance</a>
                    <ul>
                        <li><a href="#">Database CRUD</a></li>
                        <li><a href="#">Database Update</a></li>
                        <li><a href="#">Order Entry</a></li>
                        <li><a href="#">Drag-and-Drop Application</a></li>
                    </ul>
                </li>
                <li><a href="#">B2B Portal</a>
                    <ul>
                        <li><a href="#">B2B Portal</a></li>
                        <li><a href="#">Secure Data-Driven Listings</a></li>
                        <li><a href="#">Secure Shopping Cart</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
</main>

Upvotes: 2

Related Questions