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

View File

@@ -1,6 +1,10 @@
<div class="topnav"> <ul class="topNavBar">
<a class="active" href="#home">Home</a> <li><a href="/friends.php">See Friends</a></li>
<a href="#news">News</a> <li><a href="messages.php">See Messages</a></li>
<a href="#contact">Contact</a> <li><a href="search.php">Search</a></li>
<a href="#about">About</a> <li><a href="sendMessage.php">Message Someone</a></li>
</div> <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>