Making things look a little nicer hopefully

This commit is contained in:
William Miceli
2019-12-03 05:44:33 -05:00
parent a71ea11075
commit e8a40fc89b
2 changed files with 26 additions and 20 deletions

View File

@@ -1,24 +1,26 @@
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
.topNavBar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0px;
width: 100%;
}
/* Style the links inside the navigation bar */
.topnav a {
.topNavBar li {
float: left;
color: #f2f2f2;
}
.topNavBar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
.topNavBar li a:hover {
background-color: #111;
}
/* Add a color to the active/current link */
.topnav a.active {
.topNavBar .active {
background-color: #4CAF50;
color: white;
}

View File

@@ -1,6 +1,10 @@
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<ul class="topNavBar">
<li><a href="/friends.php">See Friends</a></li>
<li><a href="messages.php">See Messages</a></li>
<li><a href="search.php">Search</a></li>
<li><a href="sendMessage.php">Message Someone</a></li>
<li><a href="findFriend.html">Find a New Friend</a></li>
<li><a href="pendingFriend.html">Check Pending Friends</a></li>
<!--Maybe show the user's name here?-->
<li style="float:right"><a href="#">Logout</a></li>
</ul>