Centered vertical border separating header sections

Question

Centered vertical border separating header sections

Could I easily create a vertical border in the center of my header to separate my logo/h1-text from my navbar?

I just started learning html and css last week, so forgive the messy code. I think I could clean it up a bit.

        header {
            height: 60px;
            width: 85%;
            /background-color: white;
            margin: 0 auto;
            /box-shadow: 0px 2px 31px -2px rgba(0, 0, 0, 0.86);
            /border: 2px solid #333;
            left: 0;
            right: 0;
            /border-sizing: border-box;
            /-moz-box-sizing: border-box;
            /-webkit-box-sizing: border-box;
            z-index: 999999;
        }


        header #kage > *, header li {
            display: inline-block;
        }

        header li {
            padding: 0 8px 0 8px;
            float:left;
        }

        #kage {
            width: 99%;
            margin: 0 auto;
            height: 100%;
            line-height: 59px;
            text-align: center;
        }

        .button1:hover {
            background-color: #f2f2f2;
        }
        .button2:hover {
            background-color: #f2f2f2;
        }
        ... (more CSS)

    <header>
      <div id="kage">
      <a href="index.html"><h1>H1 TEXT HEREEEEE</h1></a>
        <nav id="topnav">
            <ul class="menu">
                <a href="index.html"><li class="button1 active">Home</li></a>
                <a href="profil.html"><li class="button2">About</li></a>
                <a href="mdu.html"><li class="button3">MDU</li></a>
            </ul>
        </nav>
      </div>
    </header>

It looks like running the snippet in full screen is necessary to ensure the header doesn't break into two lines.

html css header nav

Answer 1

Answer №1

If you're looking to achieve this effect, there are several approaches you can take. One simple method is to apply a border-left style to your #topnav element.

#topnav {
            height: 100%;
            font-weight: 700;
            font-size: 1.3em;
            width: 310.95px;
            border-left: 2px solid rgb(0,0,0);
            margin: 0 0 0 40px;
        }

By adding a 2-pixel black border on the left side of your top nav and adjusting it with a left margin of 40 pixels, you can achieve the desired look.

        header {
            height: 60px;
            width: 85%;
            /background-color: white;
            margin: 0 auto;
            /box-shadow: 0px 2px 31px -2px rgba(0, 0, 0, 0.86);
            /border: 2px solid #333;
            left: 0;
            right: 0;
            /border-sizing: border-box;
            /-moz-box-sizing: border-box;
            /-webkit-box-sizing: border-box;
            z-index: 999999;
        }


        header #kage > *, header li {
            display: inline-block;
        }

        header li {
            padding: 0 8px 0 8px;
            float:left;
        }

        #kage {
            width: 99%;
            margin: 0 auto;
            height: 100%;
            line-height: 59px;
            text-align: center;
        }

        .button1:hover {
            background-color: #f2f2f2;
        }
        .button2:hover {
            background-color: #f2f2f2;
        }
        .button3:hover {
            background-color: #f2f2f2;
        }

        .active {
            text-decoration: underline;
        }

        header a {
            text-decoration: none;
            color: #333;
            position: relative;
        }

        header h1 {
            margin: 0;
            float: left;
            height: 100%;
            text-shadow: 1px 2px lightgrey;
        }

        header h1:hover {
            color: #f2f2f2;
        }

        #topnav {
            height: 100%;
            font-weight: 700;
            font-size: 1.3em;
            width: 310.95px;
            border-left: 2px solid rgb(0,0,0);
            margin: 0 0 0 40px;
        }

        header ul {
            list-style-type: none;
            margin: 0;
        }

    <header>
      <div id="kage">
      <a href="index.html"><h1>H1 TEXT HEREEEEE</h1></a>
        <nav id="topnav">
            <ul class="menu">
                <a href="index.html"><li class="button1 active">Home</li></a>
                <a href="profil.html"><li class="button2">About</li></a>
                <a href="mdu.html"><li class="button3">MDU</li></a>
            </ul>
        </nav>
      </div>
    </header>

Answer 2

If you're looking to achieve this effect, there are several approaches you can take. One simple method is to apply a border-left style to your #topnav element.

#topnav {
            height: 100%;
            font-weight: 700;
            font-size: 1.3em;
            width: 310.95px;
            border-left: 2px solid rgb(0,0,0);
            margin: 0 0 0 40px;
        }

By adding a 2-pixel black border on the left side of your top nav and adjusting it with a left margin of 40 pixels, you can achieve the desired look.

        header {
            height: 60px;
            width: 85%;
            /background-color: white;
            margin: 0 auto;
            /box-shadow: 0px 2px 31px -2px rgba(0, 0, 0, 0.86);
            /border: 2px solid #333;
            left: 0;
            right: 0;
            /border-sizing: border-box;
            /-moz-box-sizing: border-box;
            /-webkit-box-sizing: border-box;
            z-index: 999999;
        }


        header #kage > *, header li {
            display: inline-block;
        }

        header li {
            padding: 0 8px 0 8px;
            float:left;
        }

        #kage {
            width: 99%;
            margin: 0 auto;
            height: 100%;
            line-height: 59px;
            text-align: center;
        }

        .button1:hover {
            background-color: #f2f2f2;
        }
        .button2:hover {
            background-color: #f2f2f2;
        }
        .button3:hover {
            background-color: #f2f2f2;
        }

        .active {
            text-decoration: underline;
        }

        header a {
            text-decoration: none;
            color: #333;
            position: relative;
        }

        header h1 {
            margin: 0;
            float: left;
            height: 100%;
            text-shadow: 1px 2px lightgrey;
        }

        header h1:hover {
            color: #f2f2f2;
        }

        #topnav {
            height: 100%;
            font-weight: 700;
            font-size: 1.3em;
            width: 310.95px;
            border-left: 2px solid rgb(0,0,0);
            margin: 0 0 0 40px;
        }

        header ul {
            list-style-type: none;
            margin: 0;
        }

    <header>
      <div id="kage">
      <a href="index.html"><h1>H1 TEXT HEREEEEE</h1></a>
        <nav id="topnav">
            <ul class="menu">
                <a href="index.html"><li class="button1 active">Home</li></a>
                <a href="profil.html"><li class="button2">About</li></a>
                <a href="mdu.html"><li class="button3">MDU</li></a>
            </ul>
        </nav>
      </div>
    </header>

Answer 3

Answer №2

If you're aiming for a specific layout, there's a way to simplify your HTML and CSS without sacrificing the design you want.

Start by using the header element as the parent container for your logo and navigation links.

Inside the header, create two child elements - h1 and nav, both set as inline-block elements.

To center the child elements within the header, adjust the positioning with text-align: center.

In case the header wraps on smaller screens, consider using white-space: nowrap to prevent this (based on your design preference).

You can fine-tune the spacing between links by adjusting margin, padding, and border values.

For the nav element, applying vertical-align: top is recommended to eliminate excess whitespace above or below the baseline.

Remember, if you specify a height for the header, ensure to also set a matching line-height for vertically centered inline child elements (if desired).

header {
  height: 60px;
  line-height: 60px;
  width: 85%;
  margin: 0 auto;
  border: 1px dotted blue; /* for demo only */
  text-align: center; /* optional? */
  white-space: nowrap; /* to prevent line from wrapping, optional */
}

header h1 {
  display: inline-block;
  border-right: 1px solid black;
  margin: 0;
  padding-left: 10px; /* adjust to taste */
  padding-right: 10px; /* add whitespace before vertical border */
  height: 100%;
}
header h1 a {
  text-shadow: 1px 2px lightgrey;
}
header h1:hover a {
  color: #f2f2f2;
}

header a {
  text-decoration: none;
  color: #333;
}
.button:hover {
  background-color: #f2f2f2;
}
.active {
  text-decoration: underline;
}
nav {
  display: inline-block;
  vertical-align: top;
  padding-left: 10px; /* whitespace after vertical border */
  font-weight: bold;
  font-size: 1.3em;
  border: 1px dotted gray; // for demo only 
}
nav a {
  margin: 0 20px;
}

<header>
  <h1><a href="index.html">H1 TEXT HEREEEEE</a></h1>
  <nav>
    <a href="index.html" class="button active">Home</a>
    <a href="profil.html" class="button">About</a>
    <a href="mdu.html" class="button">MDU</a>
  </nav>
</header>

Answer 4