CODEWITHSUNDEEP
htmlcss
user10245679
user10245679

Reputation:

Unwanted transparent Navbar

I want a non-transparent navbar. When I add position: fixed; to my navbar I see that when I scroll that the navbar is transparent. How to avoid this?

GitHub Repo: https://github.com/CalogerN/Conquer

Live Preview: https://calogern.github.io/Conquer/ (under construction)

I tried opacity: 1 but it does nothing.

.navbar {
  list-style: none;
  margin-top: 0;
  height: 78px;
  font-size: 20px;
  background-color: #383e4c;
  text-align: center;
  margin-bottom: 0px;
  font-family: "Open Sans";
  font-weight: 700;
  position: fixed;
  opacity: 1;
  width: 100%;
}
<nav>
  <ul class="navbar">
    <li><button type="button" name="button" class="nav- 
    btn">Homepage</button></li>
    <li><button type="button" name="button" class="nav-btn">About Us</button>
    </li>
    <li><button type="button" name="button" class="nav-btn">Services</button>
    </li>
    <li><button type="button" name="button" class="nav-btn">Contact</button>
    </li>
    <li><button type="button" name="button" class="nav-btn">External</button>
    </li>
  </ul>
</nav>

Upvotes: 0

Views: 112

Answers (3)

Sandeep Ranjan
Sandeep Ranjan

Reputation: 834

So here there is nothing to do with transparency.

Your .navbar has position: fixed;. Here you have the problem with vertical stacking order of elements that overlap.

You are having that problem because in your code you have a .hero. The elements inside .hero have position: relative;.

You can just solve this problem by adding a z-index: 1; to your .navbar.

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

Note: z-index only works on positioned elements.

.navbar {
list-style: none;
margin-top: 0;
height: 78px;
font-size: 20px;
background-color: #383e4c;
text-align: center;
margin-bottom: 0px;
font-family: "Open Sans";
font-weight: 700;
position: fixed;
/* opacity: 1; */
z-index: 99;
width: 100%;
}

Read More about Z-Index MDN web docs

Upvotes: 0

adel
adel

Reputation: 3507

just simply add z-index:99 to your navbar !

.navbar {
list-style: none;
margin-top: 0;
height: 78px;
font-size: 20px;
background-color: #383e4c;
text-align: center;
margin-bottom: 0px;
font-family: "Open Sans";
font-weight: 700;
position: fixed;
/* opacity: 1; */
z-index: 99;
width: 100%;

}

Upvotes: 2

Mayur Kandalkar
Mayur Kandalkar

Reputation: 194

  1. When you're using Bootstrap read documentation carefully ;)
  2. When you want fixed top/bottom navbar WITHOUT transparency instead of overriding .navbar class in your's csses by adding position:fixed apply ready-to-use Bootstrap class fixed-top/fixed-bottom/sticky-top applying them to your html/jsx Bootstrap element
  3. Docs: https://getbootstrap.com/docs/4.0/components/navbar/#placement

Upvotes: 0

Related Questions