Issue
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>Solution
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>Answered By - Maik Lowrey
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.