Make my nav bar center

Question

I want to be able to center my nav bar on the screen . for the nav bar i created a list. i tried using a table element, however than i would lose my links. My goal for this is just to have the nav bar to be centered under the logo.

  font-size: 48px; } .img { text-align: center; } .table { /*display: table; Allow the centering to work */ margin: 0 auto; } ul#horizontal-list { min-width: 100%; list-style: none; padding-top: 20px; } ul#horizontal-list li { display: inline; } .logo { /* top: 200px;*/ position: relative; text-align: center; } ul { float: center; position: relative; text-align: center; /*margin-left: auto; margin-right: auto;*/ list-style-type: none; margin: 0; padding: 0; /* overflow: hidden;*/ background-color: white; z-index: -2; } li { float: left; border-top:3px solid #C5908E; border-bottom:3px solid #C5908E; padding: 5px; } li:first-child { border-left: 3px solid #C5908E; } li:last-child { border-right: 3px solid #C5908E; } /*to change font */ li a { text-align: center; display: inline; color: #484846; font-size: 30px; font-family: 'Poiret One', cursive; padding: 5px ; text-decoration: none; } .links a:link {color:#484846; background-color:transparent; text-decoration:none} .links a:visited {color:#484846; background-color:transparent; text-decoration:none} .links a:hover {color:#C5908E; background-color:transparent; text-decoration:none} .links a:active {color:#484846; background-color:transparent; text-decoration:none} .wrapper {  /*padding: 20px;*/  text-align: center; } </style>

 <!DOCTYPE html> <html> <head> <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet"> <style> @font-face { font-family: 'Poiret One', cursive; <div class= "title"> </div> <title> Kristin Fincken </title> </div> </head> <body> </div> <div class="wrapper"> <br> <div class="logo"> <img src="images/logo.png" usemap="#rec"> </div> </div> <br> <br> <br> <div class ="links" > <div class="table"> <ul id="horizontal-list"> <li><a href="html/design.html" >Design </a></li> <li><a href="html/photo.html"> Photo </a></li> <li><a href="html/web.html">Web</a></li> <li><a href="html/word.html">Words</a></li> </font> </ul> </div> </div> </body> </html>

Answer 1

Don't use a table for that. Look at this http://codepen.io/mlegg10/pen/EZdxbd You should also validate your code for all your errors https://validator.w3.org/nu/

 $(function() { $('a.page-scroll').bind('click', function(event) { var $anchor = $(this); $('html, body').stop().animate({ scrollTop: $($anchor.attr('href')).offset().top }, 1500, 'easeInOutExpo'); event.preventDefault(); }); }); // Highlight the top nav as scrolling occurs $('body').scrollspy({ target: '.navbar-fixed-top' }) // Closes the Responsive Menu on Menu Item Click $('.navbar-collapse ul li a').click(function() { $('.navbar-toggle:visible').click(); });

 .navbar-default .navbar-brand { font-family: 'Poiret One', cursive; color: #1ee2e7; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:active, .navbar-default .navbar-brand.active { color: #fec503; } .navbar-default .navbar-collapse { border-color: rgba(255,255,255,.02); } .navbar-default .navbar-toggle { border-color: #1ee2e7; background-color: #1ee2e7; } .navbar-default .navbar-toggle .icon-bar { background-color: #fff; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #1ee2e7; } .navbar-default .nav li a { text-transform: uppercase; font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: 400; letter-spacing: 1px; color: #fff; } .navbar-default .nav li a:hover, .navbar-default .nav li a:focus { outline: 0; color: #1ee2e7; } .navbar-default .navbar-nav>.active>a { border-radius: 0; color: #fff; background-color: #1ee2e7; } .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus { color: #fff; background-color: #17d0d5; } @media(min-width:768px) { .navbar-default { padding: 25px 0; border: 0; background-color: transparent; -webkit-transition: padding .3s; -moz-transition: padding .3s; transition: padding .3s; } .navbar-default .navbar-brand { font-size: 2em; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .navbar-default .navbar-nav>.active>a { border-radius: 3px; } .navbar-default.navbar-shrink { padding: 10px 0; background-color: #222; } .navbar-default.navbar-shrink .navbar-brand { font-size: 1.5em; } }

 <!-- Navigation --> <nav class="navbar navbar-default navbar-fixed-top navbar-shrink"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header page-scroll"> <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 class="navbar-brand page-scroll" href="#page-top">Kristin Fincken</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="hidden active"> <a href="#page-top"></a> </li> <li class=""> <a class="page-scroll" href="design.html">Design</a> </li> <li class=""> <a class="page-scroll" href="photos.html">Photos</a> </li> <li class=""> <a class="page-scroll" href="web.html">Web</a> </li> <li class=""> <a class="page-scroll" href="words.html">Words</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav>

Make my nav bar center

Question

1 answers

solution1
0 ACCPTED 2017-02-08 21:19:10

Make my nav bar center

Question

1 answers

solution1 0 ACCPTED 2017-02-08 21:19:10

solution1
0 ACCPTED 2017-02-08 21:19:10