Looking to create a responsive navbar for my website, but struggling with button alignment on smaller screens. Any tips on keeping all navbar elements in line across different screen sizes?
<!--Navigation with Button -->
<?php
if(session_status()!==PHP_SESSION_ACTIVE)
session_start();
include "header.php";
if(isset($_POST['search']))
$search = $_POST['search'];
else
$search = "";
?>
<nav id="topbar" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="/"><img src="img/logo_front.png" alt=""></a>
<form id="searchme" class="navbar-form pull-left" role="search" action="search.php" method="post">
<div class="input-group" display="inline" id="topinput">
<input id="topbarsearch" name="search" type="search" value="<?php echo $search;?>" class="form-control" placeholder="Name">
<span class="input-group-btn" id='search_btn'>
<button id="searchicon" name="submit" class="btn btn-lg" type="submit">
<span class="glyphicon glyphicon-search" name="submit"></span>
</button>
</div>
</form>
<!--Button to Upload Information -->
<div class="top_container">
<div class="call-to-action">
<div id="uploadbutton" class="nav navbar-right">
<?php
if(isset($_SESSION['userid']) && $_SESSION['userid']!=''){
?>
<a href="signout.php" id="logout" class="btn btn-m"><?php echo $_SESSION['username'] . " Sign Out";?></a>
<?php
}
?>
<a class="btn btn-secondary" href="about.php" id="about_button_topbar">About Us</a>
<a class="btn btn-info" href="create.php" id="signin_button_topbar">Sign In</a>
<a href="upload_choice.php" role="button" id="mybutton" class="btn btn-success">Upload</a>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- End Navigation with Button -->
///CSS
#topbar{
background-color: rgba(0,0,0,.8);
height:60px;
display:inline-block;
white-space:nowrap;
padding-left:20px;
padding-right:20px;
}
.navbar-default {
border-color: rgba(34,34,34,.05);
font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
background-color: transparent;
border:none;
display:block;
height:100px;
-webkit-transition: all .35s;
-moz-transition: all .35s;
transition: all .35s;
}
#mybutton{
padding-top:10px;
margin-right:-60px;
float:right;
height:45px;
}
#signin_button_topbar{
padding-top:10px;
height:45px;
margin-right:15px;
}
#about_button_topbar{
padding-top:10px;
height:45px;
margin-right:15px;
color:white;
}