Css - Problems with positioning vertical navbar

AdamStyrna
April 13, 2024
158 views
1 vote
2 Answers

I am learning CSS and I am fed up with positioning, can somebody tell me, why vertical navbar overlaps horizontal? I want vertical to be sticky and link elements inside to be absolute to navbar, as you see i tried with div, but still first vertical link overlaps horizontal.

This is the code:
`

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>replit</title>
        <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link href="style.css" rel="stylesheet" type="text/css" /> -->
        <style>
            *{
                box-sizing: border-box;
                
            }
            #hor{
                position: static;
                text-align: center;
                background-color: aqua;
                display: block;
            }
            #hor a{
                float: left;
                width: 20%;
                position: static;
                padding: 2%;
            }
            /* #w{
                position: relative;
                left:  70px;
                bottom: 20px;
            } */
            header {
                text-align: center;
                padding: 5vw;
                background-color: antiquewhite;
                font-weight: bold;
                font-family: 'Courier New', Courier, monospace;
            }

            #ver {
                width: 10vw;
                background-color: gray;
                display: block;
                position: relative;
                
            }

            #ver a{
                
                display: inherit;
                font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
                color: blue;
                
            }

            #ver a:hover{
                color: red;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div>
        <header> THIS IS HEADER</header>
        <nav id="hor" style="width: 100%;">
            <a href="" style="background-color: aqua;">LINK 1</a>
            <a href="" style="background-color: orange;">LINK 1</a>
            <a href="" style="background-color: beige;">LINK 1</a>
            <a href="" style="background-color: gray;">LINK 1</a>
            <a href="" style="background-color: red;">LINK 1</a>
        </nav>
        </div>
        <div style="position: relative; width:10vw; height:10vw;">
        <nav id="ver">
            <a href="https://www.youtube.com" >LINK 1</a>
            <a href="https://www.youtube.com" >LINK 1</a>
            <a href="https://www.youtube.com" >LINK 1</a>
            <a href="https://www.youtube.com" >LINK 1</a>
            <a href="https://www.youtube.com" >LINK 1</a>
        </nav>
        </div>
    </body>
</html>

How to position everything to make it vertical navbar sticky?

Answers

To make the vertical navbar sticky and prevent overlap with the horizontal navbar, you can adjust the CSS as follows:

* {
  box-sizing: border-box;
}

header {
  text-align: center;
  padding: 5vw;
  background-color: antiquewhite;
  font-weight: bold;
  font-family: 'Courier New', Courier, monospace;
}

#hor {
  position: static;
  text-align: center;
  background-color: aqua;
  display: block;
}

#hor a {
  float: left;
  width: 20%;
  position: static;
  padding: 2%;
}

#ver {
  width: 10vw;
  background-color: gray;
  display: block;
  position: sticky;
  top: 0;
  /* Stick to the top of the viewport */
}

#ver a {
  display: block;
  padding: 10px;
  /* Add padding for better spacing */
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  color: blue;
  text-decoration: none;
  /* Remove underline from links */
}

#ver a:hover {
  color: red;
  background-color: green;
}

<header>THIS IS HEADER</header>

<nav id="hor" style="width: 100%;">
  <a href="" style="background-color: aqua;">LINK 1</a>
  <a href="" style="background-color: orange;">LINK 2</a>
  <a href="" style="background-color: beige;">LINK 3</a>
  <a href="" style="background-color: gray;">LINK 4</a>
  <a href="" style="background-color: red;">LINK 5</a>
</nav>
<nav id="ver">
  <a href="https://www.youtube.com">LINK 1</a>
  <a href="https://www.youtube.com">LINK 2</a>
  <a href="https://www.youtube.com">LINK 3</a>
  <a href="https://www.youtube.com">LINK 4</a>
  <a href="https://www.youtube.com">LINK 5</a>
</nav>

Changes made:

Removed the extra <div> around the vertical navbar.
Added position: sticky; to #ver to make it sticky.
Added top: 0; to #ver to ensure it sticks to the top of the viewport.
Changed #ver a to display: block; to make each link appear on a new line.
Added padding to #ver a for better spacing.
Removed inline styles from the horizontal navbar links for consistency.

This issue are coming due to combination of absolute position and lack of proper spacing between the vertical and horizontal navigation bars.

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<style>
  * {
    box-sizing: border-box;
  }

  header {
    text-align: center;
    padding: 5vw;
    background-color: antiquewhite;
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
  }

  #hor {
    text-align: center;
    background-color: aqua;
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
  }

  #hor a {
    background-color: aqua;
    padding: 10px;
  }

  #ver {
    position: sticky;
    top: 0;
    width: 10vw;
    background-color: gray;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    z-index: 1; /* Ensure the vertical navbar is above other content */
  }

  #ver a {
    display: block;
    color: blue;
    padding: 10px;
    text-align: center;
    text-decoration: none;
  }

  #ver a:hover {
    color: red;
    background-color: green;
  }

  .content {
    margin-left: 12vw; /* Adjust the left margin to accommodate the vertical navbar */
    padding: 20px;
  }
</style>
</head>
<body>
<header>THIS IS HEADER</header>
<nav id="hor">
  <a href="" style="background-color: orange;">LINK 1</a>
  <a href="" style="background-color: beige;">LINK 2</a>
  <a href="" style="background-color: gray;">LINK 3</a>
  <a href="" style="background-color: red;">LINK 4</a>
</nav>
<div class="container">
  <nav id="ver">
    <a href="https://www.youtube.com">LINK 1</a>
    <a href="https://www.youtube.com">LINK 2</a>
    <a href="https://www.youtube.com">LINK 3</a>
    <a href="https://www.youtube.com">LINK 4</a>
    <a href="https://www.youtube.com">LINK 5</a>
  </nav>
  <div class="content">
    <p>Content goes here</p>
  </div>
</div>
</body>
</html>

Wrap the vertical navbar and content in a container.
use position stickly for the vertical navbar.
adjust z-index

Please signup or login to give your own answer.

Click here to cancel reply.

Css – Problems with positioning vertical navbar

Answers