Hey Everyone!
First off, thank you for this site - this is what I needed for my new job!
I have a question where I need help. I am using HTML to build a Sharepoint page for my team.
On the page I need 2 navbars, 1 on top of the other. The top nav bar will have 3 "buttons" and the bottom 4 "buttons". I have the following code, but here is the issue. I would like the top bar to fill the page, ie center above the 4, but it keeps sticking to the left!
Thoughts? Ideas? Thanks!
PS - Ignore the **** that's for me visually to know where a new item starts.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: Arial, Helvetica, sans-serif;}
.navbar {
width: 100%;
background-color: #FFFFFF;
overflow: auto;
align: center;
}
.navbar a {
float: left;
padding: 12px;
color: black;
text-decoration: none;
font-size: 17px;
width: 33%; /* Three links of equal widths */
text-align: center;
}
.navbar a:hover {
background-color: #A1FFFA;
}
.navbar a.active {
background-color: #4CAF50;
}
@media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
width: 100%;
text-align: left;
}
}
</style>
<body>
<div class="navbar">
<a href="#">Home</a>
<a href="#">Search</a>
<a href="#">Contact</a>
</div>
******************
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: Arial, Helvetica, sans-serif;}
.navbar {
width: 100%;
background-color: #FFFFFF;
overflow: auto;
}
.navbar a {
float: left;
padding: 12px;
color: black;
text-decoration: none;
font-size: 17px;
width: 25%; /* Three links of equal widths */
text-align: center;
}
.navbar a:hover {
background-color: #A1FFFA;
}
.navbar a.active {
background-color: #4CAF50;
}
@media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
width: 100%;
text-align: left;
}
}
</style>
<body>
<div class="navbar">
<a href="#">Home</a>
<a href="#">Search</a>
<a href="#">Contact</a>
<a href="#">Contact</a>
</div>
******************