Two divs on one line in top navigation bar - html

Question

I have been looking at suggestions on how to make two divs on the same line for the past hour, but they either do not work or only work for divs with text. I am making a navigation bar for my website that contains my site logo and icons that jump to sections of my website, but I cannot get them to be on the same line.
I just want the icons (in the blue container) to be shifted up and right next to my logo. If anybody could tell me specifically what I can do to fix this, it would be greatly appreciated.
Also, I am using Bootstrap 4 if that makes any difference in solving this problem.
My navigation bar currently:
What I want the navigation bar to look like:
My Navbar HTML:
<div class="d-block d-xs-block d-md-none" id="topnav">
<div id="topnav-logo">
<img src="images/logo.png" id="logo-topnav">
</div>
<div class="text-center" id="topnav-icons">
<i class="fa fa-home" aria-hidden="true"></i>
<i class="fa fa-user" aria-hidden="true"></i>
<i class="fas fa-file-alt" aria-hidden="true"></i>
<i class="fas fa-book-open" aria-hidden="true"></i>
<i class="fas fa-address-book" aria-hidden="true"></i>
</div>
</div>
My Navbar CSS (you can ignore the comments as they are just from me trying to fix this issue):
#topnav {
/* TODO: change height back to 60px when done fixing*/
height: 120px;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
right: 0;
background: black;
/* TODO: change overflow back to hidden when done fixing*/
overflow: auto;
}
#topnav-icons {
margin-left: 60px;
width: calc(100vw - 60px);
padding-top: 11px;
padding-bottom: 11px;
background: blue;
}
#topnav-icons a {
/* float: left;
display: inline-block; */
color: var(--gray);
/* text-align: center; */
text-decoration: none;
font-size: 25px;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
#sidenav-icons a:hover, #topnav-icons a:hover, #contact a:hover {
color: var(--seafoam);
}
#logo-sidenav, #logo-topnav {
height: 60px;
width: 60px;
padding: 10px;
}

Answer 1

Flexbox - You literally can just change d-block to d-flex on id="topnav" and it will be just about right:
Change <div class="d-block d-xs-block d-md-none" id="topnav"> to <div class="d-flex d-md-none" id="topnav">
I also removed the d-xs-block which is not needed.
I believe you can remove the height: 120px from #topnav since the height would be driven by the items themselves and you'll probably want to remove margin-left: 60px; on #topnav-icons. I've made these changes in the snippet below.
#topnav {
/* TODO: change height back to 60px when done fixing*/
/* height: 120px; */
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
right: 0;
background: black;
/* TODO: change overflow back to hidden when done fixing*/
overflow: auto;
}
#topnav-icons {
/* margin-left: 60px; */
width: calc(100vw - 60px);
padding-top: 11px;
padding-bottom: 11px;
background: blue;
}
#topnav-icons a {
/* float: left;
display: inline-block; */
color: var(--gray);
/* text-align: center; */
text-decoration: none;
font-size: 25px;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
#sidenav-icons a:hover, #topnav-icons a:hover, #contact a:hover {
color: var(--seafoam);
}
#logo-sidenav, #logo-topnav {
height: 60px;
width: 60px;
padding: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<div class="d-flex d-md-none" id="topnav">
<div id="topnav-logo">
<img src="http://pluspng.com/img-png/bootstrap-logo-vector-png-bootstrap-logo-512.jpg" id="logo-topnav">
</div>
<div class="text-center" id="topnav-icons">
<i class="fa fa-home" aria-hidden="true"></i>
<i class="fa fa-user" aria-hidden="true"></i>
<i class="fas fa-file-alt" aria-hidden="true"></i>
<i class="fas fa-book-open" aria-hidden="true"></i>
<i class="fas fa-address-book" aria-hidden="true"></i>
</div>
</div>

Answer 2

I'm not sure if it does what you want but adding float:left on your image might be the trick.
See this jsfiddle
<div class="d-block d-xs-block d-md-none" id="topnav">
<div id="topnav-logo">
<img src="images/logo.png" id="logo-topnav">
</div>
<div class="text-center" id="topnav-icons">
<i class="fa fa-home" aria-hidden="true"></i>
<i class="fa fa-user" aria-hidden="true"></i>
<i class="fas fa-file-alt" aria-hidden="true"></i>
<i class="fas fa-book-open" aria-hidden="true"></i>
<i class="fas fa-address-book" aria-hidden="true"></i>
</div>
</div>
And CSS
#topnav {
/* TODO: change height back to 60px when done fixing*/
height: 120px;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
right: 0;
background: black;
/* TODO: change overflow back to hidden when done fixing*/
}
#topnav-icons {
margin-left: 60px;
width: calc(100vw - 60px);
padding-top: 11px;
padding-bottom: 11px;
background: blue;
}
#topnav-icons a {
/* float: left;
display: inline-block; */
color: var(--gray);
/* text-align: center; */
text-decoration: none;
font-size: 25px;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
#sidenav-icons a:hover, #topnav-icons a:hover, #contact a:hover {
color: var(--seafoam);
}
#logo-sidenav, #logo-topnav {
height: 60px;
width: 60px;
float:left;
}

Answer 3

it should be like this :
#topnav {
/* TODO: change height back to 60px when done fixing*/
height: 120px;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
right: 0;
background: black;
/* TODO: change overflow back to hidden when done fixing*/
overflow: auto;
}
#topnav-icons {
width: calc(100% - 80px);
padding-top: 11px;
padding-bottom: 11px;
background: blue;
float: left;
}
#topnav-logo { float: left; }
#topnav-icons a {
/* float: left;
display: inline-block; */
color: var(--gray);
/* text-align: center; */
text-decoration: none;
font-size: 25px;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
#sidenav-icons a:hover, #topnav-icons a:hover, #contact a:hover {
color: var(--seafoam);
}
#logo-sidenav, #logo-topnav {
height: 60px;
width: 60px;
padding: 10px;
}
<div class="d-block d-xs-block d-md-none" id="topnav">
<div id="topnav-logo">
<img src="images/logo.png" id="logo-topnav">
</div>
<div class="text-center" id="topnav-icons">
<i class="fa fa-home" aria-hidden="true"></i>
<i class="fa fa-user" aria-hidden="true"></i>
<i class="fas fa-file-alt" aria-hidden="true"></i>
<i class="fas fa-book-open" aria-hidden="true"></i>
<i class="fas fa-address-book" aria-hidden="true"></i>
</div>
</div>