So I’m making a website with HTML & CSS, and I want to have 2 navigation bars (1 for the Register and Log In for e.g.) and the other one for "Home", "Projects", "Partners", etc., so I’ve done:
@charset "utf-8";
/* CSS Document */
* {
font-family: 'Shippori Antique B1', sans-serif;
}
html, body {
max-width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
a {
text-decoration: none;
transition: .3s;
color: #fff;
}
a:hover {
transition: .3s;
text-decoration: underline;
}
.navigation {
color: #fff;
background: #006CFF;
padding: 10px;
}
.top-navigation {
text-align: right;
width: 100%;
padding: 15px;
background: #0084FF;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Website</title>
<script src="https://kit.fontawesome.com/a3f36ff0b4.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Shippori+Antique+B1&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="shortcut icon" type="image/png" href="images/logo.png"/>
</head>
<body>
<div class="top-navigation">
<a href="register.html">Register</a>
<a href="register.html">Log In</a>
</div>
<div class="navigation">
</div>
</body>
</html>And for some reason my div class "top-navigation" ‘Log In’ link goes off the screen, now I know I can fix that just by adding "float: right;" to the CSS part of "top-navigation", but then for some reason, the main "navigation" div class will disappear.
Anyone can assist me with this issue?
>Solution :
Just remove width: 100%; from .top-navigation and your items will show up as you intended.
.top-navigation {
text-align: right;
padding: 15px;
background: #0084FF;
}