CODEWITHSUNDEEP
htmlcss
alex correia
alex correia

Reputation: 13

Nav bar background only filling the current width of the the view port

My navigation bar is completely backgrounded by the color white when i have the project at max browser width but when scaling it down the nav bar background starts to disappear as it should. My issue is that the background for the nav doesnt autofill as i horizontally scroll at the lower widths.I am fairly new to css and any input is appreciate, see photo for issue.enter image description here

* {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

header {
  width: auto;
}

body {
  background: linear-gradient(lightblue, lightpink);
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin: 0;
}

.navbar-container {
  width: auto;
}

nav {
  background-color: whitesmoke;
}

.navbar-container nav ul {
  list-style-type: none;
  padding: 0;
  box-shadow: 0 0 5px 0 black;
}

.navbar-container nav ul li {
  display: inline-block;
  margin-left: 6.25em;
  position: relative;
  left: 29em;
}

.navbar-container nav ul li h2 {
  color: black;
}

.navbar-container nav ul li a {
  text-decoration: none;
  color: black;
}
<header>
  <div class="navbar-container">
    <nav>
      <ul>
        <li><a href="#">About Me</a></li>
        <li><a href="#">Home</a></li>
        <li>
          <h2>Correia</h2>
        </li>
        <li><a href="#">Contact Me</a></li>
        <li><a href="#">My Projects</a></li>
      </ul>
    </nav>

  </div>
</header>

<body>



</body>
<footer>



</footer>

Upvotes: 1

Views: 58

Answers (3)

Maik Lowrey
Maik Lowrey

Reputation: 17566

There are several things that play a role here. I have changed your code a bit. The main reason is that the child element ul is not sufficiently influenced by the parent elements.

In my example I used the flex box model. It is clear and you need less code. Here is the example:

* {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
  background: linear-gradient(lightblue, lightpink);
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin: 0;
}

.navbar-container {  
}
.navbar-container nav ul {
  display: flex;
  gap: 40px;  
  align-items: center;
  justify-content: center;
  list-style-type: none;
  padding: 0;
  box-shadow: 0 0 5px 0 black;  
}

nav {
  background-color: whitesmoke;
}

.navbar-container nav ul li h2 {
  color: black;
}

.navbar-container nav ul li a {
  text-decoration: none;
  color: black;
}
<body>
  <header>
  <div class="navbar-container">    
    <nav>
      <ul>
        <li><a href="#">About Me</a></li>
        <li><a href="#">Home</a></li>
        <li>
          <h2>Correia</h2>
        </li>
        <li><a href="#">Contact Me</a></li>
        <li><a href="#">My Projects</a></li>
      </ul>
    </nav>

  </div>
</header>



</body>

Upvotes: 1

Ammar Sherif Mohammed
Ammar Sherif Mohammed

Reputation: 1

you can do this:

{ margin: 0; padding: 0; }

or set margin: 0 to your nav

Upvotes: -1

Yahfi Ilham
Yahfi Ilham

Reputation: 119

I think the problem is in the code below

.navbar-container nav ul li {
display: inline-block;
margin-left: 6.25em;
position: relative;
left: 29em;
}

there you set the position to relative, it makes the li element different dimensions from the nav element, so the nav element can't catch the width change of the li element. the solution is to lower the value left for example to 20em or value as needed

Upvotes: 1

Related Questions