0

I have a problem with my Nav Bar. I need it to be centered on the screen, so it is in the middle of everything. But my Nav Bar will only be on the left side of my screen.

I tried to use Margin to fix the issue, but then it will not be responsive to the rest, so that does not work.

Here is my code for the Nav Bar:

HTML:

 <nav>
    <ul>
        <li>
            <a href="BlogTest.html">
                Home
            </a>
        </li>
        <li>
            <a href="BlogTest.html">
                About Me
            </a>
        </li>
        <li>
            <a href="BlogTest.html">
                Contact Me
            </a>
        </li>
        <li>
            <a href="BlogTest.html">
                Blog
            </a>
        </li>
    </ul>
</nav>

Ignore the "href", they will be sorted afterwards

the CSS:

    *{
    margin: 0%;
    padding: 0%;
    background-color: rgb(53, 53, 53);
    text-decoration: none;
}

nav{
    width: 100%;
    height: 100px;
    text-align: center;
    display: inline-block;
}

ul{
    text-align: center;
}

ul li{
    list-style: none;
    display: inline-block;
    float: left;
    line-height: 100px;
}

ul li a{
    font-family: 'PT Sans', sans-serif;
    color: white;
    font-size: 200%;
    padding: 0px 20px;
    display: block;
    display: inline-block;}

ul li a:hover {
    color: red;
}

I did read some of the others answered questions but without any luck from them, hope you can help me once again!

SoloFeed
  • 19
  • 6

4 Answers4

0

Try putting the nav in center tags.

Like this:

<center> 
    <nav>
        <ul>
            <li>
                <a href="BlogTest.html">
                    Home
                </a>
            </li>
            <li>
                <a href="BlogTest.html">
                    About Me
                </a>
            </li>
            <li>
                <a href="BlogTest.html">
                    Contact Me
                </a>
            </li>
            <li>
                <a href="BlogTest.html">
                    Blog
                </a>
            </li>
        </ul>
    </nav>
</center>

Sorry if this doesn't help. I couldn't fully understand your problem.

Battledoosh
  • 45
  • 7
0

Try this. Don't use <center> tag, it's obsolete.

html:

<header>
<nav>
<ul>
<li>Menu</li>
</ul>
</nav>
</header>

css:

header { width: 100%; }
nav { width: 980px; margin: 0 auto; display: block; }

margin: 0 auto; will center the element. just make sure that it has a width, otherwise this will not work.

Lex
  • 1
0

Just add display: inline-block; to the CSS rule for ul to make it only as wide as its contents and therefore also to allow the text-align: center for nav to have an effect:

* {
  margin: 0%;
  padding: 0%;
  background-color: rgb(53, 53, 53);
  text-decoration: none;
}

nav {
  width: 100%;
  height: 100px;
  text-align: center;
  display: inline-block;
}

ul {
  display: inline-block;
  text-align: center;
}

ul li {
  list-style: none;
  display: inline-block;
  float: left;
  line-height: 100px;
}

ul li a {
  font-family: 'PT Sans', sans-serif;
  color: white;
  font-size: 200%;
  padding: 0px 20px;
  display: block;
  display: inline-block;
}

ul li a:hover {
  color: red;
}
<nav>
  <ul>
    <li>
      <a href="BlogTest.html">
                Home
            </a>
    </li>
    <li>
      <a href="BlogTest.html">
                About Me
            </a>
    </li>
    <li>
      <a href="BlogTest.html">
                Contact Me
            </a>
    </li>
    <li>
      <a href="BlogTest.html">
                Blog
            </a>
    </li>
  </ul>
</nav>
Johannes
  • 64,305
  • 18
  • 73
  • 130
  • 1
    Hmm, I did not know that using the display would fix the issue. Thank you very much for your time and answer to my problem. – SoloFeed Jan 27 '21 at 00:26
  • @CalmDown_CD, your nav tag already has a `display: inline-block` rule, and you can simply inherit the display rule from nav using `display: inherit` for ul tag. – s.kuznetsov Jan 27 '21 at 00:33
  • @s.kuznetsov I tried to call the display: inherit in the ul, but then I had the same problem as before. – SoloFeed Jan 27 '21 at 00:37
  • @CalmDown_CD, I tested your code using display: inherit. And the ul tag is perfectly centered. – s.kuznetsov Jan 27 '21 at 00:40
  • `display: inherit` takes the `display` setting from the parent, in this case `inline-block` (with the same result as above). But if the `inline-block` setting of the parent (`nav`) changes or is removed (which would make sense, since *all* settings of `nav` except `height` are superfluous and could be erased), `inherit` wouldn't work (because then `ul` would have `display: block` and therefore 100% width). Another way would be to erase the `display: inline-block` setting from both `nav` and `ul`, add `text-align: center` to `ul` and remove `float: left` from `ul li` (which is an inline-block). – Johannes Jan 27 '21 at 00:51
0

try this =)

* {
  margin: 0;
  padding: 0;
  background-color: rgb(53, 53, 53);
  text-decoration: none;
}

nav {
  position: absolute;
  width: 100%;
  height: 100px;
  text-align: center;
  display: block;
  margin: auto;
  border: 2px solid white;
}

ul {
  display: inline-block;
  text-align: center;
  width: max-content;
  
}

ul li {
  list-style: none;
  display: inline-block;
  float: left;
  line-height: 100px;
  margin: auto;
}

ul li a {
  font-family: 'PT Sans', sans-serif;
  color: white;
  font-size: 100%;
  padding: 0px 10px;
  display: inline-block;
}

ul li a:hover {
  color: red;
}
<nav>
    <ul>
      <li>
        <a href="BlogTest.html">
                    Home
                </a>
      </li>
      <li>
        <a href="BlogTest.html">
                    About Me
                </a>
      </li>
      <li>
        <a href="BlogTest.html">
                    Contact Me
                </a>
      </li>
      <li>
        <a href="BlogTest.html">
                    Blog
                </a>
      </li>
    </ul>
  </nav>
Burham B. Soliman
  • 1,380
  • 1
  • 9
  • 13