Positioning page title next to menu button in a top bar - html

Question

I am creating a top bar where I just want a menu icon in the left, the page title next to it and I will add a search bar in the right side but I will do that later.
I followed w3schools guide to create a collapsed sidebar and it works but I would like to achieve two more things:
The menu icon is smaller than the bar itself where it is positioned. I would like it to increase its size so it fills the bar.
I want the page title to be displayed next to it but I am not able to achieve this no matter where I place the that contains it.
I am going to remove the sidepanel code as it is working and it does not have to do with my issue positioning the menu icon and the page title:
#wrapper-header {
color: white;
font-size: 28px;
float: left;
width: 100%;
height: 65px;
background-color: #2E2D30;
}
#main-header {
position: relative;
width: 1200px;
left: 50%;
margin-left: -400px;
height: auto;
}
.page-title {
position: relative;
margin-top: -35px;
left: 150px;
}
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="wrapper-header">
<div id="main-header">
<button class="openbtn" onclick="openNav()">☰</button>
<div class="page-title">Recientes</div>
</div>
</div>

Answer 1

So, basically I had to change a little bit your css
#wrapper-header {
color: white;
font-size: 28px;
float: left;
width: 100%;
height: 65px;
background-color: #2E2D30;
}
#main-header {
position: relative;
}
.page-title {
position: absolute;
height: 20px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.openbtn {
height: 30px;
width: 30px;
margin-top: 18px;
margin-left: 20px;
transform: scale(2);
}
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="wrapper-header">
<div id="main-header">
<button class="openbtn" onclick="openNav()">☰</button>
<div class="page-title">Recientes</div>
</div>
</div>
Here is a fiddle or just run snippet code from the answer to see the result
NB: I used transform: scale(2); to fit the button to the navbar cause if you just change width and height the icon will remain too small
Let me know if it answer your question and if you need some further information

Answer 2

Have a look please, I think you are looking for something like this
/* ------------ top menu -------------- */
.navbar{font-family:Arial; background-color:#4F0D1B; border:0; border-radius:0px}
.navbar-collapse{padding-left:0; padding-right:0;}
.navbar-toggle{margin:7px; color:#fff}
.navbar{margin:0; z-index:999;}
ul.navbar-nav > li > a{color:#fff; padding:20px 30px; line-height: 30px; transition:all ease 0.5s; z-index: 99; min-width: 96px; text-align: center; text-transform: uppercase; }
ul.navbar-nav > li a:hover, ul.navbar-nav > li.active,
ul.nav .open > a:focus, ul.nav li > a:focus {background-color:#830F27; transition:all ease 0.5s;}
/* when clicked */
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
background-color: #830F27;
}
/* submenu style */
.navbar .dropdown-menu{z-index:999; min-width:100%; border:0; background-color:#4F0D1B}
.navbar .dropdown-menu li a{text-align:left; padding:15px; color:#fff; }
/* mega menu */
.mega-dropdown { position: static !important; }
.mega-dropdown-menu { z-index:999999;
padding: 20px 0px;
width: 100%;
-webkit-box-shadow: none;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
background-color:#7A0E23!important;
}
.mega-dropdown-menu ul{margin:0; padding:0}
.mega-dropdown-menu li {color:#fff; list-style: outside none}
.mega-dropdown-menu li a{padding:5px!important; display:block!important; }
.mega-dropdown-menu li a:hover{background-color:#4F0D1B!important}
a.title-submenu{font-weight:bold; color:rgba(0,0,0,.5); }
/* search form */
.searchform{padding:10px 15px; float:right}
.searchform .btn{ color:rgba(200,200,200,.5);border: 1px solid transparent; background-color:#830F27; }
.searchform .form-control{
border:0; color:#fff;
background-color:rgba(200,200,200,.1);
width:120px!important;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
transition: all .5s ease;
}
.searchform .form-control:hover, .searchform .form-control:focus {
width: 170px!important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<p>Mega menu using bootstrap, width search bar </p>
<nav class="navbar" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="toggle-menu ">MENU</span>
</button>
<!-- <a class="navbar-brand" href="#">Home</a> -->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li><i class="glyphicon glyphicon-search"></i></li>
<li>Home page</li>
</ul>
<form action="#" method="get" class="searchform navbar-form" role="search">
<input type="hidden" value="search" name="view">
<div class="input-group">
<input type="text" name="searchword" required class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button class="btn" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div><!-- /.navbar-collapse -->
</nav>
</div>