Menu
I have a ul element as part of a navigation bar at the top of my webpage, and I'd like to move it downwards slightly. Here is an image of the navigation bar currently:
image
I'd like to move it downward slightly so the text can match up with the white bar running across the top of the page.
Here is a snippet of the HTML:
<!-- Nav -->
<nav id="nav">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="#who">WHO WE ARE</a></li>
<li><a href="#what">WHAT WE DO</a></li>
<li><a href="#contact">GET IN TOUCH</a></li>
</ul>
</nav>
How can I do this using CSS?
EDIT:
Here is all the HTML code:
<!DOCTYPE HTML>
<html>
<head>
<title>Serenity</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/css/main.css" />
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="assets/bootstrap-datepicker-1.5.1-dist/css/bootstrap-datepicker.css"/>
<link href="master.css" rel="stylesheet"/>
<script src="master.js"></script>
<script type="text/javascript" src="assets/bootstrap-datepicker-1.5.1-dist/js/bootstrap-datepicker.js">
$('#sandbox-container input').datepicker({
format: "dd/mm/yyyy"
});
</script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
</script>
<style type="text/css">
html, body{
margin: 0;
padding:0;
border: 0;
}
</style>
</head>
<body class="homepage">
<div id="page-wrapper">
<!-- Header -->
<div id="header">
<!-- Inner -->
<div class="inner" id="app">
</div>
<!-- Nav -->
<nav id="nav">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="#who">WHO WE ARE</a></li>
<li><a href="#what">WHAT WE DO</a></li>
<li><a href="#contact">GET IN TOUCH</a></li>
</ul>
</nav>
</div>
<!-- Who -->
<div class="wrapper style1">
<article id="who" class="container special">
<header>
<h2></h2>
<p>
</p>
</header>
<footer>
<img style='margin-bottom: 10px' src="./assets/images/mascot.png" height="200" width="170">
<div style='margin-top: 10px'>
<a href="./theteam.html" class="button">Meet the team</a>
</div>
</footer>
</article>
</div>
<!-- Main -->
<div class="wrapper style1">
<article id="what" class="container special">
<header>
<h2><a href="#">So what is Serenity?</a></h2>
<p>
</p>
</header>
<footer>
<div>
<a href="#" class="button" data-toggle="modal" data-target="#myModal">Privacy</a>
</div>
</footer>
</article>
</div>
<!-- Footer -->
<div id="footer">
<!-- Contact -->
<section id="contact" class="contact">
<header>
<h3>Drop by and say hi!</h3>
</header>
<ul class="icons">
<li><a href="#" class="icon fa-envelope"><span class="label">Email</span></a></li>
<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
</ul>
</section>
<!-- Copyright -->
<div class="copyright">
<ul class="menu">
</ul>
</div>
</div>
</div>
</body>
606
margin-top is most likely what you're looking for.
Here is your code with margin-top added to an internal <style>. Keep in mind that the original CSS file is missing, so I can't show you the difference based on the image. The <ul> has been highlighted to show that the margin has been applied above it.
Note that if you want to only have the margin-top applied to the main nav <ul>, you should uniquely specify it (e.g. with a class) so that it does not affect all <ul>s in the document.
<!DOCTYPE HTML>
<html>
<head>
<title>Serenity</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/css/main.css" />
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="assets/bootstrap-datepicker-1.5.1-dist/css/bootstrap-datepicker.css"/>
<link href="master.css" rel="stylesheet"/>
<script src="master.js"></script>
<script type="text/javascript" src="assets/bootstrap-datepicker-1.5.1-dist/js/bootstrap-datepicker.js">
$('#sandbox-container input').datepicker({
format: "dd/mm/yyyy"
});
</script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
</script>
<style type="text/css">
html, body{
margin: 0;
padding:0;
border: 0;
}
ul {
margin-top: 50px;
background: cyan;
}
</style>
</head>
<body class="homepage">
<div id="page-wrapper">
<!-- Header -->
<div id="header">
<!-- Inner -->
<div class="inner" id="app">
</div>
<!-- Nav -->
<nav id="nav">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="#who">WHO WE ARE</a></li>
<li><a href="#what">WHAT WE DO</a></li>
<li><a href="#contact">GET IN TOUCH</a></li>
</ul>
</nav>
</div>
<!-- Who -->
<div class="wrapper style1">
<article id="who" class="container special">
<header>
<h2></h2>
<p>
</p>
</header>
<footer>
<img style='margin-bottom: 10px' src="./assets/images/mascot.png" height="200" width="170">
<div style='margin-top: 10px'>
<a href="./theteam.html" class="button">Meet the team</a>
</div>
</footer>
</article>
</div>
<!-- Main -->
<div class="wrapper style1">
<article id="what" class="container special">
<header>
<h2><a href="#">So what is Serenity?</a></h2>
<p>
</p>
</header>
<footer>
<div>
<a href="#" class="button" data-toggle="modal" data-target="#myModal">Privacy</a>
</div>
</footer>
</article>
</div>
<!-- Footer -->
<div id="footer">
<!-- Contact -->
<section id="contact" class="contact">
<header>
<h3>Drop by and say hi!</h3>
</header>
<ul class="icons">
<li><a href="#" class="icon fa-envelope"><span class="label">Email</span></a></li>
<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
</ul>
</section>
<!-- Copyright -->
<div class="copyright">
<ul class="menu">
</ul>
</div>
</div>
</div>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
