Z
Zoid in Code
Enthusiast
I would like the "about" etc to more to the left than the right.
Any help?
css:
body {
padding-top: 50px; /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
}
.navbar-fixed-top .nav {
padding: 15px 0;
}
.navbar-fixed-top .navbar-brand {
padding: 0 15px;
}
@media(min-width:768px) {
body {
padding-top: 50px; /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
}
.navbar-fixed-top .navbar-brand {
padding: 15px;
}
.main-header{
font-family: sans-serif;
font-size: 35px;
padding-left: 10px;
}
.main_header_part h1{
color: green;
display: inline-block;
}
.left {
float: left;
padding: 5px;
padding-left: 15px;
}
.right {
float: right;
padding-top: 5px;
}
.button{
padding: 5px;
background-color: #1E1F6C;
color: #ffffff;
border-radius: 8px;
padding-top: 5px;
}
h3 {
padding-bottom: 10px;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Unity Code</title>
<link rel="shortcut icon" href="img/favicon.ico" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style/styles.css">
<link rel="stylesheet" href="style/bootstrap.min.css">
<link href="logo-nav.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="style/script.js"></script>
<script src="style/jquery.js"></script>
<script src="style/bootstrap.min.js"></script>
<script src="style/bootstrap.min.js"></script>
<script src="style/jquery.js"></script>
</head>
<body>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<h3><span style="color:#47C8EA;">Unity</span><span style="color: #C2BFBF;">Code</h3>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="testing">
<ul class="nav navbar-nav">
<li>
<a class="navbar-buttons" href="#">About</a>
</li>
<li>
<a class="navbar-buttons" href="#">Services</a>
</li>
<li>
<a class="navbar-buttons" href="#">Contact</a>
</li>
</div>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</body>
}
.navbar-buttons{
padding: 1588px;
}
My site: http://www.unity-code.org/
Any help?
css:
body {
padding-top: 50px; /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
}
.navbar-fixed-top .nav {
padding: 15px 0;
}
.navbar-fixed-top .navbar-brand {
padding: 0 15px;
}
@media(min-width:768px) {
body {
padding-top: 50px; /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
}
.navbar-fixed-top .navbar-brand {
padding: 15px;
}
.main-header{
font-family: sans-serif;
font-size: 35px;
padding-left: 10px;
}
.main_header_part h1{
color: green;
display: inline-block;
}
.left {
float: left;
padding: 5px;
padding-left: 15px;
}
.right {
float: right;
padding-top: 5px;
}
.button{
padding: 5px;
background-color: #1E1F6C;
color: #ffffff;
border-radius: 8px;
padding-top: 5px;
}
h3 {
padding-bottom: 10px;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Unity Code</title>
<link rel="shortcut icon" href="img/favicon.ico" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style/styles.css">
<link rel="stylesheet" href="style/bootstrap.min.css">
<link href="logo-nav.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="style/script.js"></script>
<script src="style/jquery.js"></script>
<script src="style/bootstrap.min.js"></script>
<script src="style/bootstrap.min.js"></script>
<script src="style/jquery.js"></script>
</head>
<body>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<h3><span style="color:#47C8EA;">Unity</span><span style="color: #C2BFBF;">Code</h3>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="testing">
<ul class="nav navbar-nav">
<li>
<a class="navbar-buttons" href="#">About</a>
</li>
<li>
<a class="navbar-buttons" href="#">Services</a>
</li>
<li>
<a class="navbar-buttons" href="#">Contact</a>
</li>
</div>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</body>
}
.navbar-buttons{
padding: 1588px;
}
My site: http://www.unity-code.org/