Moving main content when hovering navbar - html

Question

I have made 2 navbars: top which is static and side one which has on hover effect. I would like it to resize when on hover (I already accomplished that) but when it's width is going up the main content remains the same. How may I connect it so main content will move a bit as well?
Link: JS FIDDLE
<!-- Top navigation -->
<div class="topnav">
<!-- Centered link -->
<div class="topnav-centered">
Home
</div>
<!-- Right-aligned links -->
<div class="topnav-right">
Register <span><i class="fa fa-user-plus" aria-hidden="true"></i></span>
Log In <span><i class="fa fa-user" aria-hidden="true"></i></span>
</div>
</div>
<nav class="navbar">
<ul class="navbar-nav">
<li class="menu"><i class="fa fa-bars" aria-hidden="true"></i> Menu</li>
<li class="logo"><span class="link-text">Library</span></li>
<li class="nav-item"><span class="link-text">Home</span></li>
<li class="nav-item"><span class="link-text">About</span></li>
<li class="nav-item"><span class="link-text">Contact</span></li>
<li class="nav-item"><span class="link-text">More</span></li>
</ul>
</nav>
<main>
Thanks

Answer 1

I've only added one rule in css to accomplish it.
.navbar:hover+main {
margin-left: 10rem;
}
So when .navbar is hovered get the next child with tag main and give it margin-left as the same amount as the width of the sidebar. you could add a transition to make it look smooth
:root {
font-size: 16px;
}
body {
color: black;
margin: 0px;
padding: 0px;
}
main {
margin-left: 5rem;
margin-right: 5rem;
padding: 3rem;
}
.navbar {
width: 6rem;
height: 100%;
position: fixed;
background-color: transparent;
transition: width 200ms ease;
}
.navbar-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
}
.nav-item {
width: 100%;
}
.nav-link {
display: flex;
align-items: center;
height: 2rem;
filter: grayscale(100%) opacity(0.7);
text-decoration: none;
font-size: 1.2rem;
text-align: center;
}
.nav-link:hover {
filter: grayscale(0%) opacity(1);
background-color: lightblue;
}
.link-text {
display: none;
margin-left: 1rem;
}
.navbar:hover {
width: 10rem;
background-color: #333;
transition: all 0.3s ease-in-out;
}
.navbar:hover+main {
margin-left: 10rem;
}
.navbar:hover .link-text {
display: block;
align-items: center;
}
.logo {
font-weight: bold;
text-transform: uppercase;
margin-bottom: 2rem;
margin-top: 2rem;
text-align: center;
font-size: 1.5rem;
letter-spacing: 0.3ch;
width: 100%;
}
#menu {
margin-left: 10px;
text-align: center;
color: black;
font-size: 2rem;
}
#menu:hover {
margin-left: 10px;
text-align: center;
color: gold;
font-size: 2rem;
}
/* Add a black background color to the top navigation */
.topnav {
position: absolute;
/*position: relative;*/
background-color: #333;
overflow: hidden;
padding-left: 3rem;
width: 100%
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 1rem;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #4CAF50;
color: white;
}
/* Centered section inside the top navigation */
.topnav-centered a {
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Right-aligned section inside the top navigation */
.topnav-right {
float: right;
}
/* Responsive navigation menu - display links on top of each other instead of next to each other (for mobile devices) */
#media screen and (max-width: 600px) {
.topnav a,
.topnav-right {
float: none;
display: block;
}
.topnav-centered a {
position: relative;
top: 0;
left: 0;
transform: none;
}
}
i {
font-size: 1rem;
padding-right: 5px;
}
a span {
position: relative;
}
<!-- Top navigation -->
<div class="topnav">
<!-- Centered link -->
<div class="topnav-centered">
Home
</div>
<!-- Right-aligned links -->
<div class="topnav-right">
Register <span><i class="fa fa-user-plus" aria-hidden="true"></i></span>
Log In <span><i class="fa fa-user" aria-hidden="true"></i></span>
</div>
</div>
<nav class="navbar">
<ul class="navbar-nav">
<li class="menu"><i class="fa fa-bars" aria-hidden="true"></i> Menu</li>
<li class="logo"><span class="link-text">Library</span></li>
<li class="nav-item"><span class="link-text">Home</span></li>
<li class="nav-item"><span class="link-text">About</span></li>
<li class="nav-item"><span class="link-text">Contact</span></li>
<li class="nav-item"><span class="link-text">More</span></li>
</ul>
</nav>
<main>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
If you don't want your main content to become smaller but just move to the right entirely you can add margin-right: -10rem; but it will be hard to get that to be responsive.