html - Navbar - Trying to get nav bar to appear on top of page -
currently navbar appearing on left side of page instead of on top of page. have included codepen of site looks , picture of how nav bar displayed. nav bar appear @ top of page, survey on left, , results on right side. if 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 bird on 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 4 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 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 { text-align: center; display: block; padding: 10px 15px; } .main-nav { 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; (var = 0; < 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); });
you need set .content flex-direction: column; force results beneath header.
then can set main-header display: flex; justify-content: space-between separate title , navigation.
wiki
Comments
Post a Comment