0

I'm trying to create a nav with search functionality. When I input text input field, nothing is displayed. Also how do I deactivate the hover effect? ...using w3.css framework. Thanksview image here

<div class="w3-top">
<ul class="w3-navbar w3-cyan text-color-black w3-large" style="height:         49px; color: black">
 <li><a href="#">Hello</a></li>
<li class="w3-right" style="font-size: 90%"><a href="#">Log Out</a></li>
<li class="w3-right" style="font-size: 90%"><a href="#">Dashboard</a>       </li>
 <li class="w3-right" style="font-size: 90%"><a href="#">Bookmarks</a></li>
<input class="w3-input w3-border w3-small" style="width: 350px; height: 30px; margin-left: 400px; margin-top: 10px" name="first" type="text" placeholder="search names here">
<button class="w3-btn w3-small w3-white w3-border w3-round" style="margin-left: 615px; margin-top: -30px; height: 30px">Search</button>
<!--<" style="width:450px; height:28px; margin-left: 390px; margin-top: 20px; font-size: 70%" name="first" type="text">-->
</div>
 </ul>
 </div>
Obi Kolin
  • 29
  • 6

2 Answers2

0

I can't figure out why there is an ending </div> tag before </ul> remove it.

<div class="w3-top">
<ul class="w3-navbar w3-cyan text-color-black w3-large" style="height:         49px; color: black">
 <li><a href="#">Hello</a></li>
<li class="w3-right" style="font-size: 90%"><a href="#">Log Out</a></li>
<li class="w3-right" style="font-size: 90%"><a href="#">Dashboard</a>       </li>
 <li class="w3-right" style="font-size: 90%"><a href="#">Bookmarks</a></li>
<input class="w3-input w3-border w3-small" style="width: 350px; height: 30px; margin-left: 400px; margin-top: 10px" name="first" type="text" placeholder="search names here">
<button class="w3-btn w3-small w3-white w3-border w3-round" style="margin-left: 615px; margin-top: -30px; height: 30px">Search</button>
<!--<" style="width:450px; height:28px; margin-left: 390px; margin-top: 20px; font-size: 70%" name="first" type="text">-->
</div> <!--please remove this line --> 
 </ul>
 </div>
Panna Das
  • 611
  • 6
  • 11
0

<div class="w3-top">
<ul class="w3-navbar w3-cyan text-color-black w3-large" style="height:         49px; color: black">
 <li><a href="#">Hello</a></li>
<li class="w3-right" style="font-size: 90%"><a href="#">Log Out</a></li>
<li class="w3-right" style="font-size: 90%"><a href="#">Dashboard</a>       </li>
 <li class="w3-right" style="font-size: 90%"><a href="#">Bookmarks</a></li>
<input class="w3-input w3-border w3-small" style="width: 350px; height: 30px; margin-left: 400px; margin-top: 10px" name="first" type="text" placeholder="search names here">
<button class="w3-btn w3-small w3-white w3-border w3-round">Search</button>
<!--<" style="width:450px; height:28px; margin-left: 390px; margin-top: 20px; font-size: 70%" name="first" type="text">-->
</div> <!--please remove this line --> 
 </ul>
 </div>

This is because button layer is over input type layer. so you can't see anything typing. you need to remove all inline CSS for the button.

  • Hello
    • Log Out Dashboard Bookmarks Search -->

    Please check this now. it's working in snippet

    Rohit Gautam
    • 312
    • 2
    • 17