0

I recently started to play round with Bootstrap and I created my logo to go on the top left of the page, and then the nav bar to go on the same line but on the right hand side, and then I wanted to say in the middle of the screen: "Welcome blablah"

However, the welcome bit appears on the top part of the screen, rather then the middle, so it's overlapping the logo for some reason.

Not sure why this is doing this, guessing some bad coding etc.

body {
  font-family: 'Open Sans', sans-serif, Arial;
  font-size: 16px;
  color: #6D6D6D;
  background-color: #F5F5F5;
  font-weight: 300;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Montserrat', sans-serif, Arial;
  padding-bottom: 5px;
  color: #373432;
  line-height: 1em;
  font-weight: normal;
}

a {
  text-decoration: none;
  outline: none;
}

.parallax {
  background-image: url("../Images/back1.jpg");
  min-height: 1000px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}

.logo {
  float: left;
  padding-top: 50px;
  padding-left: 40px;
}

.logo h1 {
  text-transform: uppercase;
  font-weight: 900;
  font-size: 60px;
  letter-spacing: -5px;
  line-height: 50px;
  color: white;
}

.navbar-nav>li>a {
  line-height: 6px;
}

.navbar {
  float: right;
  padding-top: 53px;
  padding-right: 60px;
  font-size: 13px;
  text-transform: uppercase;
}

.navbar-default {
  background-color: transparent;
  border-top: 0px solid rgba(0, 0, 0, 0.5);
  border-bottom: 0px solid rgba(0, 0, 0, 0.5);
  border-left: 0px solid rgba(0, 0, 0, 0.5);
  border-right: 0px solid rgba(0, 0, 0, 0.5);
}

.navbar-default .navbar-nav>li>a {
  color: #ffffff;
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
  background-color: #F8BD23;
  text-decoration: none;
  color: #ffffff;
  -webkit-transition: background-color 200ms linear;
  -moz-transition: background-color 200ms linear;
  -o-transition: background-color 200ms linear;
  -ms-transition: background-color 200ms linear;
  transition: background-color 200ms linear;
}

.navbar-nav>li {
  padding-left: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="parallax">
  <div class="logo"><img src="http://placehold.it/50x50"></div>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button aria-controls="navbar" aria-expanded="false" class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
      </div>
      <div class="navbar-collapse collapse" id="navbar">
        <ul class="nav navbar-nav">
          <li>
            <a href="#">Home</a>
          </li>
          <li>
            <a href="#">a</a>
          </li>
          <li>
            <a href="#">b</a>
          </li>
          <li>
            <a href="#">c Us</a>
          </li>
          <li>
            <a href="#">d</a>
          </li>
          <li>
            <a href="#">e</a>
          </li>
          <li>
            <a href="#">f</a>
          </li>
          <li class="dropdown">
            <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">Classes</a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">a</a>
              </li>
              <li>
                <a href="#">b</a>
              </li>
              <li>
                <a href="#">c</a>
              </li>
              <li>
                <a href="#">d</a>
              </li>
              <li>
                <a href="#">We</a>
              </li>
              <li>
                <a href="#">r</a>
              </li>
              <li>
                <a href="#">a</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
    <!--/.container-fluid -->
  </nav>
  <div class="container">
    <div class="HomeMes">
      <h1>WELCOME</h1>
    </div>
  </div>
</div>

The way I could "fix" it is do margin-top: 200px; on the HomeMes class but I know this is bad coding, so I'm trying to find the right way of doing it. If anyone could let me know what I have done wrong that would be excellent. Thanks.

So it should look like this : 

Logo                                            Navbar


                    Welcome message
RonTheOld
  • 777
  • 2
  • 14
  • 30
  • Have you tried the solutions listed here: https://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3 ? – Sawant Jul 06 '17 at 12:29
  • i have just looked at it but not exactly sure how to implement it in this code , its a really weird error that i am struggling to figure out – RonTheOld Jul 06 '17 at 12:31
  • Do you want it like this ? https://codepen.io/anon/pen/awjGXL – Yousaf Jul 06 '17 at 12:31
  • @Yousaf ah no i mean the message to actually appear in the middle of the screen, so its in the middle right now, but i need it to be like 200px down – RonTheOld Jul 06 '17 at 12:32
  • Basically it should start under the logo and then be in the middle if that makes sense – RonTheOld Jul 06 '17 at 12:32
  • @RonTheOld check this link https://codepen.io/anon/pen/awjGXL – Yousaf Jul 06 '17 at 12:39
  • @Yousaf thats actually great but is it bad coding to use something like padding-top: 160px; to use that much pixles? or not – RonTheOld Jul 06 '17 at 12:53

1 Answers1

1

There you go sir, change your container class to this :

.container {
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  flex-direction: column;
  align-items: center;
}

Tested it in chrome and it works, but for some reason it doesn't work in code snippet preview. Hope this helps you. Display:flex helps a lot when trying to horizontally+vertically align elements!

TinkeringMatt
  • 181
  • 1
  • 9