0

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.

espresso_coffee
  • 5,076
  • 9
  • 53
  • 124
  • 3
    Possible duplicate of [How do I vertically center text with CSS?](https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css) – Temani Afif Dec 19 '17 at 21:06

2 Answers2

3

If you are open to using flexbox you can make a few adjustments and create the layout you want.

example

header.headerBox {
  width: 100%;
  height: 80px;
  border: 2px solid #000099;
  background-color: #87CEFF;
  display: flex;
  flex-direction: column;
}
h1.mainTitle {
  color: #000099;
  text-align: center;
  margin: 0px;
  padding: 5px 0;
}
nav.xNavigation {
  color: #000099;
  border-top: 2px solid #000099;
  margin: 0px;
  padding: 2px 5px 2px 5px;
  flex: 1;
  display: flex;
  align-items: center;
}
nav.xNavigation a {
  color: #000099;
  text-decoration: none;
  cursor: pointer;
  font-weight: bold;
}
nav.xNavigation select {
  margin-left: auto;
}
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>
Dharmesh Patel
  • 1,102
  • 2
  • 11
  • 25
sol
  • 19,364
  • 5
  • 33
  • 48
  • I'm not sure if I use flex box just in the header how that would affect the rest of the page? – espresso_coffee Dec 19 '17 at 21:21
  • If you make the header (or class you are targetting) a flex container it should only affect the contents of the header. – sol Dec 19 '17 at 21:23
  • What should be updated in order to set a tags to the center instead of being on the left side? – espresso_coffee Dec 19 '17 at 21:44
  • You can use the `justify-content` property. Which element are you trying to center? This guide is a good introduction --> https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – sol Dec 19 '17 at 21:44
  • a elements. They should be in the center. Thanks for the link! – espresso_coffee Dec 19 '17 at 21:46
  • Have a look at this great answer - https://stackoverflow.com/a/38948646/5561605 -- You have a few options – sol Dec 19 '17 at 21:51
1

It's because you set a fixe height ;)

header.headerBox {
     width: 100%;
     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 {
      display:flex;
      flex-flow: row wrap;
      align-items: center;
     color: #000099;
     border-top: 2px solid #000099;
     margin: 0px;
     padding-left: 5px;
     padding-right: 5px;
      padding-top: 10px;
      padding-bottom: 10px;
    }
    nav.xNavigation a {
     color: #000099;
     text-decoration: none;
     cursor: pointer;
     font-weight: bold;
    }
    nav.xNavigation select {
     display:flex;
        flex-flow: row wrap;
        justify-content: flex-end;
    }
    nav.xNavigation a:hover {
     color: white;
    }
    .select-container {
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-end;
        padding-top: -20px;
        margin-top: -20px;
     }
    <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> |
        <div class='select-container'>
          <select name="menu" id="menu">
          <option value="mainBox" selected="selected">Home</option>
            <option value="settingsBox">Settings</option>
        </select>
        </div>
      </nav>
    </header>
KolaCaine
  • 1,607
  • 3
  • 11
  • 24