CODEWITHSUNDEEP
htmlcss
GotYa
GotYa

Reputation: 121

Centering the links in my nav

I'm making a website for a school project and I'm stuck. I made a nav bar for the website with links to other pages, one of these is a dropdown menu with more links. I want to center these links but I just can't do it, I have tried everythig I could find online and I'm lost. Could someone help me out?

This is the HTML code:

<nav>
  <h1 class="header"><span>A</span>2's Prachtige Website</h1>
   <ul class="ulnav">
    <li class="li-nav"><a class="a-nav" href="../Intro en voorpagina.html"><span>I</span>ntroductie</a></li>
    <div class="dropdown">
        <li><button class="dropbtn" onclick="myFunction()"><span>O</span>mics Teksten</button></li>
        <div class="dropdown-content" id="myDropdown">
            <a href="../Omics/Metabolomics.html"><span>M</span>etabolomics</a>
            <a href="../Omics/Genomics.html"><span>G</span>enomics</a>
            <a href="../Omics/Transcriptonomics.html"><span>T</span>ranscriptonomics</a>
            <a href="../Omics/Epigenomics.html"><span>E</span>pigenomics</a>
            <a href="../Omics/Proteomics.html"><span>P</span>roteomics</a>
            <a href="../Omics/Systeembiologie.html"><span>S</span>ysteembiologie</a>
        </div>
    </div> 
    <li class="li-nav"><a class="a-nav" href="../Key Gene.html"><span>K</span>ey Gene</a></li>
    <li class="li-nav"><a class="a-nav" href="../Vacatures.html"><span>V</span>acatures</a></li>
    <li class="li-nav"><a class="a-nav" href="../Interview.html"><span>I</span>nterview</a></li>
    <li class="li-nav"><a class="a-nav" href="../HS Leiden.html"><span>H</span>S Leiden</a></li>
    <li class="li-nav"><a class="a-nav" href="../Bronnen.html"><span>B</span>ronnen</a></li>
</ul>
</nav>

And this is the CSS code:

a.a-nav{
  color: white;
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 2px;
}

h1.header {
  color: white;
  font-family: 'Lato', sans-serif;
  font-size: 35px;
  line-height: 40px;
  position: relative;
  text-align: center;
}

ul.ulnav {
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    width: 90%;
}

li.li-nav a{
    float: left;
    display: block;
    padding: 8px;
    background-color: #269ccc;
    display: inline;
}

span {
  color: #ecbc00;
}

nav {
    text-align: center;
    width: 100%;
    background-color: #269ccc;
    top: 0;
    margin: 0 auto; left: 0px; right: 0px;
}

nav a:hover {
    background-color: #9ed2c5;
    color: white;
}

To anyone willing to help, thank you :)

Upvotes: 1

Views: 76

Answers (4)

kravisingh
kravisingh

Reputation: 1660

Check this if it's helpful. Currently I have placed dropdown menu in first list item. So please place that ul to others where you want this.

a.a-nav {
  color: white;
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 2px;
}

h1.header {
  color: white;
  font-family: 'Lato', sans-serif;
  font-size: 35px;
  line-height: 40px;
  position: relative;
  text-align: center;
}

ul.ulnav {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  /* overflow: hidden; */
  width: 90%;
}

li.li-nav a {
  float: left;
  display: block;
  padding: 8px;
  background-color: #269ccc;
  display: inline;
}

span {
  color: #ecbc00;
}

nav {
  text-align: center;
  width: 100%;
  background-color: #269ccc;
  top: 0;
  margin: 0 auto;
  left: 0px;
  right: 0px;
}

nav a:hover {
  background-color: #9ed2c5;
  color: white;
}
li{
  position: relative;
  display: inline-block;
}
ul.dropdown{
  padding:0;
  display: none;
  position: absolute;
  width: 100%;
  top: 100%;
  z-index:1;
  left: 0;
  background: #269ccc;
}
li ul.dropdown li a{
  display: block;
  float: none;
  text-decoration: none;
  color: #fff;
}
li:hover ul.dropdown{
  display: block;
}
<nav>
    <h1 class="header"><span>A</span>2's Prachtige Website</h1>
    <ul class="ulnav">
      <li class="li-nav"><a class="a-nav" href="../Intro en voorpagina.html"><span>I</span>ntroductie</a>
        <ul class="dropdown">
                <li><button class="dropbtn" onclick="myFunction()"><span>O</span>mics Teksten</button></li>
                <li>
                    <div class="dropdown-content" id="myDropdown">
                       <a href="../Omics/Metabolomics.html"><span>M</span>etabolomics</a>
                       <a href="../Omics/Genomics.html"><span>G</span>enomics</a>
                       <a href="../Omics/Transcriptonomics.html"><span>T</span>ranscriptonomics</a>
                       <a href="../Omics/Epigenomics.html"><span>E</span>pigenomics</a>
                       <a href="../Omics/Proteomics.html"><span>P</span>roteomics</a>
                       <a href="../Omics/Systeembiologie.html"><span>S</span>ysteembiologie</a>
                    </div>
                </li>
          </ul>  
    </li>      
      <li class="li-nav"><a class="a-nav" href="../Key Gene.html"><span>K</span>ey Gene</a></li>
      <li class="li-nav"><a class="a-nav" href="../Vacatures.html"><span>V</span>acatures</a></li>
      <li class="li-nav"><a class="a-nav" href="../Interview.html"><span>I</span>nterview</a></li>
      <li class="li-nav"><a class="a-nav" href="../HS Leiden.html"><span>H</span>S Leiden</a></li>
      <li class="li-nav"><a class="a-nav" href="../Bronnen.html"><span>B</span>ronnen</a></li>
    </ul>
  </nav>

You can also check this Fiddle

Upvotes: 0

Mukul Kant
Mukul Kant

Reputation: 7122

Your question not too much clear but as my understanding, I think you want to achieve this. I hope it will help you.

.dropbtn, a.a-nav {
    color: white;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;
    background: none;
    border: none;
}

h1.header {
    color: white;
    font-family: 'Lato', sans-serif;
    font-size: 35px;
    line-height: 40px;
    position: relative;
    text-align: center;
}

ul.ulnav {
    /*list-style-type: none;*/
    /*margin: 0 auto;*/
    padding: 0;
    /*overflow: hidden;*/
    /*width: 90%;*/
    text-align: center;
}

li.dropdown, li.li-nav {
    display: inline-block;
    background-color: #269ccc;
}

li.li-nav a {
    display: inline-block;
    padding: 8px;
}

li.dropdown {
    position: relative;
}

.dropdown-content {
    position: absolute;
    background: #269CCC;
    text-align: left;
    top: 27px
}

.dropdown-content a {
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 10px 5px
}

span {
    color: #ecbc00;
}

nav {
    text-align: center;
    width: 100%;
    background-color: #269ccc;
    top: 0;
    margin: 0 auto;
    left: 0px;
    right: 0px;
}

nav a:hover {
    background-color: #9ed2c5;
    color: white;
}
<nav>
  <h1 class="header"><span>A</span>2's Prachtige Website</h1>
  <ul class="ulnav">
    <li class="li-nav"><a class="a-nav" href="../Intro en voorpagina.html"><span>I</span>ntroductie</a></li>
    <li class="dropdown">
      <button class="dropbtn" onclick="myFunction()"><span>O</span>mics Teksten</button>
      <div class="dropdown-content" id="myDropdown">
        <a href="../Omics/Metabolomics.html"><span>M</span>etabolomics</a>
        <a href="../Omics/Genomics.html"><span>G</span>enomics</a>
        <a href="../Omics/Transcriptonomics.html"><span>T</span>ranscriptonomics</a>
        <a href="../Omics/Epigenomics.html"><span>E</span>pigenomics</a>
        <a href="../Omics/Proteomics.html"><span>P</span>roteomics</a>
        <a href="../Omics/Systeembiologie.html"><span>S</span>ysteembiologie</a>
      </div>
    </li>
    <li class="li-nav"><a class="a-nav" href="../Key Gene.html"><span>K</span>ey Gene</a></li>
    <li class="li-nav"><a class="a-nav" href="../Vacatures.html"><span>V</span>acatures</a></li>
    <li class="li-nav"><a class="a-nav" href="../Interview.html"><span>I</span>nterview</a></li>
    <li class="li-nav"><a class="a-nav" href="../HS Leiden.html"><span>H</span>S Leiden</a></li>
    <li class="li-nav"><a class="a-nav" href="../Bronnen.html"><span>B</span>ronnen</a></li>
  </ul>
</nav>

Upvotes: 0

mahval
mahval

Reputation: 2213

Ok for lists then do these changes:

ul.ulnav {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  width: 90%;
  text-align: center;
}

li.li-nav {
  display: inline-block;
}

https://plnkr.co/edit/Vovh6tNdIraEmdfdPPLN?p=preview

Upvotes: 0

john c. j.
john c. j.

Reputation: 1175

It's not completely clear what you want to achieve, but here it is:

https://jsfiddle.net/d2gdr9d7/1/

nav ul { text-align: center; }
nav ul li { display: inline-block; margin: 0 auto; }

Add it to the bottom of your CSS.

Upvotes: 1

Related Questions