Navigation bar idea

Question

I wanted to create a navigation bar like this, " Artist News HH Blog Contact " With HH being the title of the page. I want the navigation alongside the heading. I attempted it but it isn't right and its very untidy.

<div id="heading">
    <header>
        <section class="main-nav index-nav">
            <nav>
                <ul>
                    <li><a href="artists.html">Artists</a></li>
                    <li><a href="#">News</a></li>
                    <h1>HH</h1>
                    <li><a href="about.html">About</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </nav>
        </section>
        <!--section-->
    </header>
</div>

heres my code

Answer 1

There's a few things wrong with your code, mainly the invalid html around the <h1>HH</h1> bit.

I updated your CSS as well to position the HH properly in between the other links. I change your h1 css as well as .main-nav h1.

Also if you remove the width: 10%; from the h1 css it will fix the border on the heading.

h1 {
  text-align: center;
  font-size: 50px;
  padding-bottom: 1px;
  margin-top: 0px;
  border-bottom: 6px solid black;
}
#heading {
  position: fixed;
  z-index: 1;
  width: 100%;
  height: 134px;
  text-align: left;
  padding: 1em 0;
  border-bottom: 2px solid black;
  top: 0;
  background-color: #f6f6f6;
}
/*================================================================================================================================*/

/* navigation styles*/

.main-nav-scrolled {
  width: 100%;
  position: fixed;
  top: 0;
}
.main-nav a {
  text-decoration: none;
  color: Black;
  text-transform: uppercase;
  font-weight: 600;
  display: block;
  padding: 10px 10px;
  opacity: 1;
}
.main-nav h1 {
  font-weight: normal;
}
nav {
  width: 100%;
  margin: 0 auto;
  position: relative;
}
nav ul {
  display: inline-block;
  list-style: none;
  position: absolute;
  text-align: center;
  vertical-align: middle;
  width: 100%;
  margin-top: -1.7%;
  margin-left: -5%;
}
nav ul li {
  display: inline-block;
  margin-left: 6%;
  padding: 3px
}
.main-nav h1 a {
  position: relative;
  color: #000;
  text-decoration: none;
}
/* navigation hover styles*/

/* nav ul */

nav ul a {
  position: relative;
  color: black;
  text-decoration: none;
}
nav ul a:hover {
  color: #000;
}
nav ul a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  top: -3px;
  left: 0;
  background-color: black;
  visibility: hidden;
  -webkit-transform: scaleX (0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
nav ul a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
/*================================================================================================================================*/

<div id="heading">



  <header>
    <section class="main-nav index-nav">
      <nav>
        <ul>
          <li><a href="artists.html">Artists</a>
          </li>
          <li><a href="#">News</a>
          </li>
          <li>
            <h1>HH</h1>
          </li>
          <li><a href="about.html">About</a>
          </li>
          <li><a href="contact.html">Contact</a>
          </li>
        </ul>
      </nav>
    </section>
    <!--section-->
  </header>

</div>

Answer 2

Move the <h1> element into a <li> and remove some of the css. Here is what my final looks like, and it works.

h1{
    text-align: center;
    font-size: 50px;
    padding-bottom:1px;
    margin-top:0%;
    border-bottom: 6px solid black;
}

<ul>
    <li><a href="artists.html">Artists</a></li>
    <li><a href="#">News</a></li>
      <li><h1>HH</h1></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>