Code:
<body>
<div class="header">
<div class="header-logo"><a href="#">Wanye Kest Designs</a></div>
<nav class="header-nav">
<a href="#">Work</a>
<a href="#">Conatact</a>
</nav>
</div>
<div class="pagess">Pages will go here</div>
</body>
/////////////////////////////////////// CSS:
body {
background-color: #f3efed;
font-family: "arial", sans-serif;
color: #8e4e13;
margin: 0;
}
.header-logo a {
color: #8e4e13;
text-decoration: none;
}
.header-logo {
font-size: 24px;
font-weight: bold;
line-height: 28px;
}
.header {
padding: 15px;
overflow: auto;
}
.header-nav {
float: right;
}
.header-logo {
float: left;
}
.header-nav a {
color: #C3A286;
text-decoration: none;
margin-left: 5px;
margin-right: 5px;
line-height: 28px;
}
With this code, Nav links and header logo are one the same verticle alignment, opposite sides of page, and a text "Pages will be here" is positioned below the header logo perfectly.
My issue is that as soon as I enter position: fixed; below the .header selector, the Navigation links re-position themselves to overlap the header logo on the left side of the page, and the "Pages will be here" text re-positions itself above the header.
Please understand I'm extremely new to web design (HTML, CSS, JS, etc...) and the training program I refer to doesn't have a trouble-shooting section, videos or a forum (HACKSAW Academy).
Can someone Identify the problem? I'm typing the code exactly as it tells me and can't find a workaround.
Position: fixed; takes the element out of the normal flow of the document, so that is where the overlap is coming from. By default, this moves all the elements to the top left. Also, float is superseded by position: fixed, as float is in the flow of the document while again position: fixed is not. The only remaining element not position: fixed is your pagess class, which rightly takes up the top-left spot in the flow of the document.
Here's something you can work with:
*, :before, :after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #f3efed;
font-family: "arial", sans-serif;
color: #8e4e13;
margin: 0;
}
.header-logo a {
color: #8e4e13;
text-decoration: none;
}
.header-logo {
font-size: 24px;
font-weight: bold;
line-height: 28px;
}
.header {
padding: 15px;
overflow: auto;
position: fixed;
top: 0;
left: 0;
width: 100vw;
}
.header-nav {
background: green;
display: inline-block;
vertical-align: bottom;
margin-left: calc(55% - 100px);
}
.header-logo {
background: red;
display: inline-block;
vertical-align: bottom;
}
.header-nav a {
color: #C3A286;
text-decoration: none;
margin-left: 5px;
margin-right: 5px;
line-height: 28px;
}
.pagess {
margin-top: 48px;
margin-left: 24px;
}<body>
<div class="header">
<div class="header-logo"><a href="#">Wanye Kest Designs</a></div>
<nav class="header-nav">
<a href="#">Work</a>
<a href="#">Conatact</a>
</nav>
</div>
<div class="pagess">Pages will go here</div>
</body>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments