htmlcsstwitter-bootstrapmedia-queriesresponsive
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!
Solution
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;
}
- My custom CSS transition animation is not working on hover after I added AOS JS library
- How to set data attributes in HTML elements
- How to get "Results per Row" (from a 'clicked entry' off a "dropdown menu") to show up correctly?
- How to reduce the size of an ASCII text art picture
- How to trigger SVG render same as manual DOM edit in Chrome using JS?
- Set element width based on a string that is not in the element
- Where are the trailing commas coming from in these radio buttons?
- 100vh height when address bar is shown - Chrome Mobile
- Capture selected option returns not defined instead
- Adjust navbar minimum height depending on screen width
- How to remove extra width from my website?
- Why doesn't backgroundColor=rgb(a,b,c) work?
- How to put json variable directly into DIV Class
- On hover the div inside button reduces height to give animation and little dark bottom. But text also moving up how to fix not move text
- WOW jquery slider
- Reduce the frequency of geolocation watchPosition calls
- Why should HTML elements (input, textarea, and select) have associated labels?
- Why ngModel doesn't works on the last version of Angular 17?
- How to make an element's background-color a little darker using CSS
- How do I clear the content of a div using JavaScript?
- How do I display images from Google Drive on a website?
- Tailwind h-screen doesn’t work properly on mobile devices
- Edit icon in mobile view missing
- Sticky header input scrolls on input
- Image not loading on local site I made
- React error in index.js, "Uncaught ReferenceError: dom is not defined"
- Make the mix-blend-mode on a sticky navbar ignore certain elements while scrolling down
- How to prevent bleach from escaping > (blockquote) tag used in Markdown
- Why is the input bar spilling slightly on the right side of the container?
- Method to show native datepicker in Chrome