Missy Bur
Reputation: 221
Navbar - Trying to get nav bar to appear on top of page
Currently my navbar is appearing on the left side of the page instead of on top of the page. I have included a codepen of what my site looks like and also a picture of how I would like the nav bar displayed. I would like for the nav bar to appear at the top of the page, the survey on the left, and the results on the right side. If anyone could help it would be much appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Survey</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<!-- <link rel="stylesheet" href="flexbox.css"> -->
</head>
<body>
<main class="content" role="main">
<header class="main-header">
<h1 class="name"><a href="#">KeyPath Survey</a></h1>
<ul class="main-nav">
<li><a href="#">My Profile</a></li>
<li><a href="#">Scores</a></li>
<li><a href="#">Favorites</a></li>
</ul>
</header><!--/.main-header-->
<div class="grid-100">
<form action="">
<div class="contained">
<div class="grid-100">
<!-- <h3>KeyPath Survey</h3> -->
</br>
<fieldset>
<div>
<label for="">1. Mixtape put a bird on it sartorial?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
<div>
<label for="">2. Williamsburg unicorn tumeric?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
<div>
<label for="">3. Keytar raclette green juice?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
<div>
<label for="">4. Edison bulb iceland af pug?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
<div>
<label for="">5. Sriracha mumblecore typewriter?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
<div>
<label for="">6. Tote bag shabby chic cred?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
<div>
<label for="">7. Thundercats organic bushwick plaid?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
<div>
<label for="">8. Vexillologist drinking vinegar food truck?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
<div>
<label for="">9. Distillery tbh gastropub DIY austin?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
<div>
<label for="">10. Godard thundercats raw denim four dollar?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
</fieldset>
</div>
</div>
<div class="form-footer">
<button class="button primary submit">Submit Survey</button>
</div>
</form>
</div>
<div class="graph">
<canvas id="myChart"></canvas>
</div>
</main>
<!-- <div>
Score: Verbal <span id="verbal">0</span>
Non-Verbal <span id="non-verbal">0</span>
Written <span id="written">0</span>
</div> -->
</body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdn.rawgit.com/emn178/Chart.PieceLabel.js/master/build/Chart.PieceLabel.min.js"></script>
<script src="main.js"></script>
</html>
.wrapper {
width:90%;
margin-right: auto;
margin-left: auto;
}
.content {
display: flex;
}
.grid-100, .graph {
flex: 1 0 0;
margin-left: 20px;
}
.grid-75 {
padding-top: 15px;
padding-bottom: 15px;
}
.button {
background-color: #5fcf80;
border: solid 2px #5fcf80;
font-size: 14px;
height: 40px;
line-height: 36px;
padding: 0 15px;
margin-top: 20px;
color: #fff;
margin-left: 40px;
}
fieldset {
margin-bottom: 20px;
}
.form-footer .button {
margin: 0 10px 10px 0;
}
div.chosen-container a.chosen-single {
background: #e8ebed;
border: 2px solid #e8ebed;
outline: none;
font-size: 14px;
padding-right: 40px;
height: 44px;
color: #4b5658;
box-shadow: none;
border-radius: 5px;
transition: background 0.25s ease;
}
.graph {
margin-top: 30px;
}
/*Reset CSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* =================================
Base Layout Styles
==================================== */
/* ---- Navigation ---- */
.name {
font-size: 1.35em;
margin: 0;
}
.main-nav {
margin-top: 5px;
}
.name a,
.main-nav a {
text-align: center;
display: block;
padding: 10px 15px;
}
.main-nav a {
font-size: .95em;
color: #3acec2;
text-transform: uppercase;
}
.main-nav a:hover {
color: #093a58;
}
/* ---- Layout Containers ---- */
.main-header {
padding-top: .5em;
padding-bottom: .5em;
}
.banner,
.main-footer {
text-align: center;
}
.banner {
color: #fff;
background: #3acec2;
padding: 3.2em 0;
margin-bottom: 48px;
}
.col {
padding-right: 1em;
padding-left: 1em;
}
.main-footer {
background: #d9e4ea;
padding: 2em 0;
margin-top: 30px;
}
/* ---- Page Elements ---- */
.logo {
width: 190px;
}
.headline {
margin-bottom: 0;
}
.feat-img {
border-radius: 5px;
}
/* =================================
Media Queries
==================================== */
@media (min-width: 769px) {
.main-header,
.row {
width: 90%;
margin: 0 auto;
}
.tagline {
font-size: 1.4em;
}
}
@media (min-width: 1025px) {
.main-header,
.row {
width: 80%;
max-width: 1150px;
}
}
var $selects = $("select"),
data,
ctx = $("#myChart"),
config = {
selected: 0,
type: "pie",
options: {
responsive: true,
pieceLabel: {
render: function(args) {
var selected = function() {
var out = 0;
for (var i = 0; i < data.length; i++) {
out = out + data[i];
}
return out;
};
var percentage = Math.round(args.value / selected() * 100) + "%";
$('#'+args.label).text(percentage);
return percentage;
},
fontSize: 14,
fontStyle: "bold",
fontColor: "#fff",
fontFamily: '"Lucida Console", Monaco, monospace'
}
},
data: {
labels: ["verbal", "non-verbal", "written"],
datasets: [
{
data: [0, 0, 0],
backgroundColor: ["#09c", "#c00011", "green"]
}
]
}
};
myChart = new Chart(ctx, config);
$(".submit").on("click", function(e) {
var results = { v: 0, n: 0, w: 0 },
hasSelected = 0;
e.preventDefault();
$selects.each(function() {
var val = $(this).val();
if (val) {
results[val]++;
hasSelected = 1;
}
});
if (hasSelected) {
data = [];
$.each(results, function(k, v) {
data.push(v);
});
} else {
data = JSON.parse(localStorage.getItem("data"));
}
config.data.datasets[0].data = data;
myChart.update();
localStorage.data = JSON.stringify(data);
});
Upvotes: 0
Views: 301
Answers (1)
Related Questions
- Trying to stick my header to the top of the page
- Navigation bar not positioning at the top of page
- how can i put my navigation bar above header
- Navbar not sticking to the bottom of the header element
- Adding header above navbar
- Nav bar comes on top of header
- How to get the header and navbar on top?
- Fixing Nav Bar to top of page
- How can I get the nav-bar into the header?
- Navbar fixed on the top of HTML page (CSS / HTML)