I've been attempting to insert a basic text header right after a navbar on the same line (at the very top of the webpage) but I can't seem to find a way to keep them side by side.
Check out the code below: CSS:
.navbar div {
display: block;
height: 5px;
background: #fff;
float: left;
margin: 7px 0px 7px 0px;
transition: all 0.5s;
-webkit-transition: all 0.5s;}
.one {width: 40px;}
.two { width: 30px;}
.three { width: 25px;}
.navbar:hover div { width: 40px;}
.header {
display: flex;
justify-content: center;
width: 100%;
float: right;
align-items: center;
color: gold;}
HTML:
<div>
<nav class="dropdown">
<ul>
<li>
<a href="index.html" target="_blank" class="navbar">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</a>
<ul>
<li><a href="#">Experience</a></li>
<li><a href="#">Skills</a></li>
<li><a href="#">Socials</a></li>
</ul>
</li>
</ul>
</nav>
<h1 class = "header">Sam Jenkins</h1>
</div>
I attempted to wrap the header and navbar inside a div tag while setting the navbar to float left and the header to float right.