Reposition logo on phones with media query

I am having some trouble with Bootstrap's media queries. Currently, I have a fixed-top navbar with the logo centered above the links, like this:

When the menu collapses, the logo is pushed below, like this:

I want the logo to be centered vertically on smaller screens too, so I created a media query to adjust margin-top, but it's not working.

Here's the code:

body {
  padding-top: 40px;
  font-family: Consolas, monaco, monospace;
  color: #303030;
  padding-right: 80px;
  padding-left: 80px;
}


/* Add a dark background color with a little bit see-through */

.navbar {
  position: relative;
  margin-bottom: 0;
  background-color: #303030;
  border: 0;
  font-size: 12px !important;
  letter-spacing: 4px;
  opacity: .9;
}

.navbar-nav {
  float: none;
  margin: 0 auto;
  display: block;
  text-align: center;
}

.navbar-nav>li {
  display: inline-block;
  float: none;
  padding-top: 70px;
}

.navbar-fixed-top {
  position: fixed !important;
}

@media screen and (max-width: 480px) {
  .navbar-brand {
    margin-top: -50px;
  }
}

.navbar-brand {
  position: absolute;
  left: 50%;
  margin-left: -100px !important;
  margin-top: -15px !important;
  display: block;
  padding-top: 30px
}

.navbar-toggle {
  z-index: 3;
}

.navbar-center {}


/* Add a gray color to all navbar links */

.navbar li a,
.navbar .navbar-brand {
  color: #beb5ac !important;
}


/* On hover, the links will turn white */

.navbar-nav li a:hover {
  color: #ded8d2 !important;
  transition: color 1s ease;
}


/* The active link */

.navbar-nav li.active a {
  color: #fff !important;
  background-color: #29292c !important;
}


/* Remove border color from the collapsible button */

.navbar-default .navbar-toggle {
  border-color: transparent;
}

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <title></title>
  <meta charset="utf-8">
  <link rel="icon" type="image/png" href="favicon.png">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen">
  <link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-buttons.css?v=1.0.5">
  <link rel="stylesheet" type="text/css" href="/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7">
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="teste3.css">
  <link rel="stylesheet" href="flexbox-footer.css">
</head>

<body class="Site">

  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header navbar-header-center">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
        <a class="navbar-center navbar-brand" href="./teste3.html">
          <img src="https://s22.postimg.org/stryqb4xd/logo.png" style="max-width:180px;"></a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li class="index"><a href="teste3.html">INÍCIO</a></li>
          <li class="sobre"><a href="teste3_about.html">SOBRE</a></li>
          <li class="ilustracao"><a href="teste3.html#ilustracao">ILUSTRAÇÃO</a></li>
          <li class="design"><a href="teste3.html#design">DESIGN GRÁFICO</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type='text/javascript' src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="lib/jquery.mousewheel.pack.js?v=3.1.3"></script>
  <script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.5"></script>
  <script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
  <script type="text/javascript" src="source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
  <script type="text/javascript" src="fancybox.js"></script>
  <script type="text/javascript" src="scroll.js"></script>
</body>

</html>

Tried several things but couldn't get this to work. Probably something silly. Thank you!

Fiddle: https://jsfiddle.net/resch/5knzdsL0/

Upvotes: 0

Answers (3)

William Robinson

Reputation: 307

You need to move your media query to the bottom of your style sheet so it takes priority and change it from margin to padding like so

@media screen and (max-width: 780px) {
  .navbar-brand {
     padding-top: 15px !important;
  }
}

Upvotes: 1

mbeso

Reputation: 259

You have to add !important to your padding-top, since class already exits and it has higher priority than yours.

.navbar-brand {
  position: absolute;
  left: 50%;
  margin-left: -100px !important;
  margin-top: -15px !important;
  display: block;
  padding-top: 30px !important;
}

EDIT:

body {
  padding-top: 40px;
  font-family: Consolas, monaco, monospace;
  color: #303030;
  padding-right: 80px;
  padding-left: 80px;
}


/* Add a dark background color with a little bit see-through */

.navbar {
  position: relative;
  margin-bottom: 0;
  background-color: #303030;
  border: 0;
  font-size: 12px !important;
  letter-spacing: 4px;
  opacity: .9;
}

.navbar-nav {
  float: none;
  margin: 0 auto;
  display: block;
  text-align: center;
}

.navbar-nav>li {
  display: inline-block;
  float: none;
  padding-top: 70px;
}

.navbar-fixed-top {
  position: fixed !important;
}

@media screen and (max-width: 480px) {
  .navbar-brand {
    margin-top: -50px;
  }
}

.navbar-brand {
  position: absolute;
  left: 50%;
  margin-left: -100px !important;
  margin-top: -15px !important;
  display: block;
  padding-top: 30px !important;
}

.navbar-toggle {
  z-index: 3;
}

.navbar-center {}


/* Add a gray color to all navbar links */

.navbar li a,
.navbar .navbar-brand {
  color: #beb5ac !important;
}


/* On hover, the links will turn white */

.navbar-nav li a:hover {
  color: #ded8d2 !important;
  transition: color 1s ease;
}


/* The active link */

.navbar-nav li.active a {
  color: #fff !important;
  background-color: #29292c !important;
}


/* Remove border color from the collapsible button */

.navbar-default .navbar-toggle {
  border-color: transparent;
}

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <title></title>
  <meta charset="utf-8">
  <link rel="icon" type="image/png" href="favicon.png">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen">
  <link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-buttons.css?v=1.0.5">
  <link rel="stylesheet" type="text/css" href="/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7">
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="teste3.css">
  <link rel="stylesheet" href="flexbox-footer.css">
</head>

<body class="Site">

  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header navbar-header-center">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
        <a class="navbar-center navbar-brand" href="./teste3.html">
          <img src="logo.png" style="max-width:180px;"></a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li class="index"><a href="teste3.html">INÍCIO</a></li>
          <li class="sobre"><a href="teste3_about.html">SOBRE</a></li>
          <li class="ilustracao"><a href="teste3.html#ilustracao">ILUSTRAÇÃO</a></li>
          <li class="design"><a href="teste3.html#design">DESIGN GRÁFICO</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type='text/javascript' src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="lib/jquery.mousewheel.pack.js?v=3.1.3"></script>
  <script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.5"></script>
  <script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
  <script type="text/javascript" src="source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
  <script type="text/javascript" src="fancybox.js"></script>
  <script type="text/javascript" src="scroll.js"></script>
</body>

</html>

EDIT 2:

Set padding-top to 18px, working example can be found on the link provided in the comments section.

.navbar-brand {
  position: absolute;
  left: 50%;
  margin-left: -100px !important;
  margin-top: -15px !important;
  display: block;
  padding-top: 18px !important;
}

EIDT 3:

Notice two changes, max-width is set to 780px to include all mobile devices, and paddign-top is added.

@media screen and (max-width: 780px) {
  .navbar-brand {
    margin-top: -50px;
    padding-top: 18px !important;
  }
}

padding-top in class below is back to 30px;

.navbar-brand {
      position: absolute;
      left: 50%;
      margin-left: -100px !important;
      margin-top: -15px !important;
      display: block;
      padding-top: 30px !important;
    }

Upvotes: 2

Aziliz Blanchet

Reputation: 31

Your element is in position absolute, try to give it a top value

@media screen and (max-width: 480px) {
  .navbar-brand {
    top:0px
  }
}

Upvotes: 0

Reposition logo on phones with media query

Answers (3)

Related Questions