I'm facing an issue with this example:
When I scroll, the navbar moves along due to the fixed property, which affects the overall look. How can I make it disappear when scrolling, while keeping the logo intact?
Can someone suggest if this layout is suitable for a beginner and point out any other considerations I should keep in mind? I want to have random widgets on the right side and content on the left side.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test Design
</head>
<style>
/* Body style */
body {
margin: 0;
padding: 0;
font-size: 12px;
}
/* Logo */
.header {
position: relative;
margin: 0;
padding: 0;
display: block;
height: 50px;
background: #fff !important;
padding: 8px 16px;
}
.logo-1 {
font-family: Helvetica, "serif";
text-decoration: none;
font-size: 37px;
letter-spacing: 3px;
font-weight: 900;
color: #555555;
display: block;
}
/* Navigation */
.navbar {
position: fixed;
width: 100%;
background: #333333;
list-style-type: none;
text-decoration: none;
margin: 0;
padding: 0;
text-align: center;
}
li {
float: left;
}
li a {
display: block;
padding: 14px 16px;
color: #eee;
text-decoration: none;
text-align: center;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
li a:hover:not(.active) {
background: #111111;
}
.active {
background-color: #008cba;
}
/* Widget */
.widget {
position: relative;
bottom: -42px;
float: right;
overflow: hidden;
width: 190px;
border-left: 1px solid #9fa2a9;
display: block;
padding: 2px 5px;
}
</style>
<body>
<div class="header"><a class="logo-1" href="#">Test Design</a></div>
<!-- Navigation -->
<ul class="navbar">
<li><a class="active" href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li style="float: right"><a class="active" href="#">Register</a></li>
<li style="float: right"><a href="#">Login</a></li>
</ul>
<!-- Widget -->
<div class="widget">
<b><u>Random Lorem Ipsum Text</u></b>
<form action="#" method="post">
<div>
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" tabindex="1" />
</div>
<div>
<h4>Radio Button Choice</h4>
<label for="radio-choice-1">Choice 1</label>
<input type="radio" name="radio-choice-1" id="radio-choice-1" tabindex="2" value="choice-1" />
<label for="radio-choice-2">Choice 2</label>
<input type="radio" name="radio-choice-2" id="radio-choice-2" tabindex="3" value="choice-2" />
</div>
<div>
<label for="select-choice">Select Dropdown Choice:</label>
<select name="select-choice" id="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div>
<label for="textarea">Textarea:</label>
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>
<div>
<label for="checkbox">Checkbox:</label>
<input type="checkbox" name="checkbox" id="checkbox" />
</div>
<div>
<input type="submit" value="Submit" />
</div>
</form>
</div>
</body>
</html>