I have created navigation bar that contains links for different tabs and drop down for the menu. I'm having problem to vertically align all elements inside of the navigation bar. Seems that select tag caused some of the problems. Here is example of my outline:
header.headerBox {
width: 100%;
height: 80px;
border-top: 2px solid #000099;
border-right: 2px solid #000099;
border-left: 2px solid #000099;
border-bottom: 2px solid #000099;
background-color: #87CEFF;
}
h1.mainTitle {
color: #000099;
text-align: center;
margin: 0px;
padding-top: 5px;
padding-bottom: 5px;
}
nav.xNavigation {
height: 100%;
color: #000099;
border-top: 2px solid #000099;
margin: 0px;
padding-top: 2px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 2px;
}
nav.xNavigation a {
color: #000099;
text-decoration: none;
cursor: pointer;
font-weight: bold;
}
nav.xNavigation select {
float: right;
}
nav.xNavigation a:hover {
color: white;
}
<header class="headerBox">
<h1 class="mainTitle">Single Page Application</h1>
<nav class="xNavigation">
<a href="#" id="tab1">Tab 1</a> |
<a href="#" id="tab2">Tab 2</a> |
<a href="#" id="tab3">Tab 3</a> |
<a href="#" id="tab4">Tab 4</a> |
<select name="menu" id="menu">
<option value="mainBox" selected="selected">Home</option>
<option value="settingsBox">Settings</option>
</select>
</nav>
</header>
As you can see in the snippet above elements are not vertically aligned. I'm not sure if there is a good way to organize the elements. If anyone can help please let me know. Thank you.