I just made a simple navbar and i looked on my mobile and it looks just normal like this: http://prntscr.com/dbjxgd, (the mobile version) But on my iPad mini 2 it looks like the desktop version which looks like this: http://prntscr.com/dbjxpe
What is causing this? I just want my iPad to show the mobile version. Can you guys help me? Here is some code i used if u need it:
Code: index.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Servicepunt Detailhandel Groningen | Home</title>
<link rel="shortcut icon" href="images/favicon/favicon.ico" type="image/x-icon">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<body>
<!-- NAVIGATIE BALK -->
<nav class="navbar navbar-default" role="navigation">
<!-- logo -->
<div class="navbar-header">
<!-- -->
<a class="navbar-brand" href="index.php">
Logo
</a>
<!-- Inklappbaar ding als je op mobiel zit-->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainnavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- menu eitems linker kant-->
<div class="collapse navbar-collapse" id="mainnavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Over</li>
<li>Nieuws</li>
<li>Contact</li>
<!-- Dropdown -->
<!--
<li class="dropdown">
Profiel <span class="caret"></span>
<ul class="dropdown-menu">
<li>Profiel</li>
<li>Instellingen</li>
</ul>
</li>
-->
<!-- <li><button type="button" class="btn btn-primary btn-lg raised">Niet beschikbaar</button></li> -->
</ul>
<!-- Aan de rechterkant -->
</nav>
<!-- EINDE NAVIAGTIE BALK-->
HOME
</body>
</html>
Code: style.css
textarea {
font-family: "Verdana";
resize: none;
width: 400px;
height: 50px;
}
label {
font-weight: normal;
}
input {
font-weight: normal;
}
.navbar-default {
background-color: white;
box-shadow: 20px;
padding: 15px;
border-radius: 0;
border: none;
font-size: 25px;
-webkit-box-shadow: 0 5px 3px -2px #999;
-moz-box-shadow: 0 5px 3px -2px #999;
box-shadow: 0 5px 3px -2px #999;
}
.navbar-header{
right: auto;
}
.navbar-nav > li{
}
.navbar-default .navbar-brand,
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: black;
font-size: 30px;
}
.navbar-default .navbar-nav > li > a {
color: black;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: black;
opacity: 0.5;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: black;
background-color: transparent;
}
.navbar-default .navbar-text {
color: #FFF;
}
.navbar-default .navbar-toggle {
border-color: none;
}
.icon-bar {
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: lightgrey;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: blue;
width: 40px;
height: 5px;
border-radius: 20px;
}
.navbar-collapse {
border: 0px;
}
.navbar-default .navbar-collapse {
color: #e7e7e7;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
border-color: transparent;
box-shadow: none;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: blue;
}
I hope you guys can help me out with this.
try this
#media (max-width: 1200px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
and to target for ipad use below media query refer more detaild here
/* ----------- iPad mini ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
}
You dont' need to add any css code yourself. You have to download the bootstrap version with your updated breakpoint.
go to : http://getbootstrap.com/customize/#grid-system and change the #grid-float-breakpoint to the width you want your navbar to collapse. You can enter any value in pixels. use #screen-lg-min or anything else.
And then click the Compile and Download Button at the bottom.
Related
This is my first attempt on creating a bootstrap menu, and I am stuck on the following issues. I tried different solutions suggested on similar questions, but with no success ☹
When collapsed I want the text: This is a Button to next to the button “button1”.
I’ve tried playing around with inline styling but I cannot get the 2 elements to stay on one line.
If I manage to display them on the same line, how do I make the text element to have the same left margin as the dropdown element below when collapsed?
I am not sure why the text & button element do not have the same left-margin as the dropdown below them.
Here is a copy of my code: https://jsfiddle.net/b512zesq/
thanks!
.navbar {
min-height: 80px;
background: #ee4035;
border-width: 0px;
border-radius: 0px;
color: blue;
}
.navbar a {
color: white!important;
}
.navbar-brand {
padding: 0 15px;
height: 80px;
line-height: 80px;
color: white;
}
.navbar-toggle {
/* (80px - button height 34px) / 2 = 23px */
margin-top: 23px;
padding: 9px 10px !important;
}
.navbar-btn {
/* (80px - button height 34px) / 2 = 23px */
margin-top: 18px;
margin-right: 30px;
padding: 9px 9;
background: #f37736;
border-width: 0px;
height: 35px;
width: 150px;
}
.navbar-text {
margin-top: 28px;
color: white;
}
.nav.navbar-nav.navbar-right li a {
color: white;
}
.dropdown-menu {
background: #ee4035;
}
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
background-color: #d6392f;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
color: #ffffff;
}
.navbar-default .navbar-nav>li>.dropdown-menu {
background-color: #ee4035;
}
.navbar-default .navbar-nav>li>.dropdown-menu>li>a {
color: #ffffff;
}
.bar-nav>li>.dropdown-menu>li>a:hover,
.navbar-default .navbar-nav>li>.dropdown-menu>li>a:focus {
color: #ffffff;
background-color: #d6392f;
}
.navbar-default .navbar-nav>li>.dropdown-menu>li>.divider {
background-color: blue;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
color: #ffffff;
background-color: #d6392f;
}
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
color: #ffffff;
background-color: #d6392f;
}
.navbar-default .navbar-toggle {
border-color: #d6392f;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #d6392f;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ffffff;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #ffffff;
}
.navbar-default .navbar-link {
color: #ffffff;
}
.navbar-default .navbar-link:hover {
color: #ffffff;
}
/*RESPONSIVE*************************************************/
#media (min-width: 768px) {
.navbar-nav>li>a {
/* (80px - line-height of 27px) / 2 = 26.5px */
padding-top: 26.5px;
padding-bottom: 26.5px;
line-height: 27px;
}
}
/**END OF RESPONSIVE********************************************/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<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-brand" href="#">logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="inline"><span class="navbar-text" style="color:white"><strong>this is a button</strong></span></li>
<li><a class="btn btn-danger navbar-btn" href="{$rlBase}/add-listing.html" role="button">button 1</a></li>
<form class="navbar-form navbar-left" style="padding:0px; border-top-width:0px;"></form>
<li class="dropdown">
<a class="dropdown-toggle" id="user-navbar" data-toggle="dropdown" href="{$rlBase}/login.html"><span class="glyphicon glyphicon-user"></span> USERNAME<span class="caret"></a>
</div>
</div>
</nav>
You could style your parent <ul> with display: inline-flex and put the list-item with your dropdown outside of it. That could cause compatibility issues, however.
Just give your list item a padding-left of 15px. The dropdown link has a default padding-left of 15px (you can find that in the navs.less file on line 23).
I have difficulties changing the positioning of my current navbar. Does anyone know what to do so it will be positioned centered below the logo? I have included a picture of how I would like the navbar to look.
.navbar.navbar-default {
background-color: #ffffff;
border-color: #ffffff;
padding-top:15px;
padding-bottom:30px;
}
.navbar.navbar-default .navbar-brand {
color: #696969;
}
.navbar.navbar-default .navbar-brand:hover,
.navbar.navbar-default .navbar-brand:focus {
color: #ff9c74;
}
.navbar.navbar-default .navbar-text {
color: #292929;
}
.navbar.navbar-default .navbar-nav > li > a {
color: #292929;
}
.navbar.navbar-default .navbar-nav > li > a:hover,
.navbar.navbar-default .navbar-nav > li > a:focus {
color: #747474;
}
.navbar.navbar-default .navbar-nav > .active > a,
.navbar.navbar-default .navbar-nav > .active > a:hover,
.navbar.navbar-default .navbar-nav > .active > a:focus {
color: #ff9c74;
background-color: #ffffff;
}
.navbar.navbar-default .navbar-nav > .open > a,
.navbar.navbar-default .navbar-nav > .open > a:hover,
.navbar.navbar-default .navbar-nav > .open > a:focus {
color: #ff9c74;
background-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle {
border-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle:hover,
.navbar.navbar-default .navbar-toggle:focus {
background-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle .icon-bar {
background-color: #292929;
}
.navbar.navbar-default .navbar-collapse,
.navbar.navbar-default .navbar-form {
border:none;
}
.navbar.navbar-default .navbar-link {
color: #292929;
}
.navbar.navbar-default .navbar-link:hover {
color: #696969;
}
.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
.nav.navbar-nav > li.navbar-left {
font-family: 'Nunito Sans', sans-serif;
font-size: 11.5px;
}
.navbar-brand {
padding: 10px;
}
.navbar-brand>img {
height: 50px;
width: auto
}
#media (min-width: 768px) {
.navbar-brand { display: block; }
.navbar-bar-default .navbar-toggle {text-align: left;}
}
.fa.fa-instagram {
font-size: 18px;
}
.fa.fa-pinterest {
font-size: 18px;
}
.fa.fa-dribbble {
font-size: 18px;
}
.fa.fa-twitter{
font-size: 18px;
}
.banner {
width: 100%;
}
.banner-inner {
max-width:1100px;
margin: 0 auto;
}
#media (min-width:468px) and (max-width:991px){
.container.navbar-container {
width:100%;
padding:0px;
}
}
#media (min-width:468px) and (max-width:991px){
.container.navbar-container {
width:100%;
padding:0px;
}
}
body { padding-top: 90px; }
#media screen (min-width: 468px) and (max-width: 768px) {
body { padding-top: 0px; }
}
.banner-inner>img {
opacity:0;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s;
transition: opacity 2s;
}
.col-1-1> img{
opacity:0;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s;
transition: opacity 2s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device=width, initial-scale=1.0">
<title></title>
<meta name="author" content="">
<link rel="icon" type="image/png" href="img/icon.png"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href="css/sticky-footer.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito|Nunito+Sans|Playfair+Display" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://"><img onload="this.style.opacity='1';" class= "logo" src="img/logo.png"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left">TRAVEL</li>
<li class="navbar-left"> PORTFOLIO </li>
<li class="navbar-left"> INSPO </li>
<li class="navbar-left"> ABOUT </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="right"> <i class="fa fa-instagram"></i></li>
<li class="right"> <i class="fa fa-dribbble"></i></li>
<li class="right"> <i class="fa fa-pinterest"></i></li>
<li class="right"> <i class="fa fa-twitter"></i></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</div>
</div>
</header>
<!---End Header-->
<section class="banner">
<div class="banner-inner">
<img onload="this.style.opacity='1';" class="banner" src="img/background.jpg">
</div>
</section>
<!---End Banner-->
<!-- Begin page content -->
<footer class="footer">
<div class="container">
<span class>Copyright © 2017. JH. All rights reserved.</span>
</div>
</footer>
<!---End Footer-->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
Your current HTML won't work, so I modified a few tiny things on it. Mainly just put your image in it's own div, giving it a "margin-top: 50px;" so that it will push down the Nav as your mock shows. (And put in a fun logo just for fun =P. You can replace it w/ your real one.) The reason you are having a hard time w/ this is that you also needed to override the CSS boostrap default code w/ your own for the logo.
In Desktop it now looks like your Mock. In Mobile, still looks good w/ the Logo and hamburger menu in same line. (You didn't clarify what behavior you wanted for Mobile, so I hope that's ok.)
Adding code below which I've also put in a CodePen: http://codepen.io/alejandra_quetzalli/pen/YZWMLY?editors=1100
img.navbar-brand {
height: 45px;
margin: 0;
padding: 0;
}
.navbar.navbar-default {
background-color: #ffffff;
border-color: #ffffff;
padding-top:15px;
padding-bottom:30px;
}
.navbar.navbar-default .navbar-brand {
color: #696969;
}
.navbar.navbar-default .navbar-brand:hover,
.navbar.navbar-default .navbar-brand:focus {
color: #ff9c74;
}
.navbar.navbar-default .navbar-text {
color: #292929;
}
.navbar.navbar-default .navbar-nav > li > a {
color: #292929;
}
.navbar.navbar-default .navbar-nav > li > a:hover,
.navbar.navbar-default .navbar-nav > li > a:focus {
color: #747474;
}
.navbar.navbar-default .navbar-nav > .active > a,
.navbar.navbar-default .navbar-nav > .active > a:hover,
.navbar.navbar-default .navbar-nav > .active > a:focus {
color: #ff9c74;
background-color: #ffffff;
}
.navbar.navbar-default .navbar-nav > .open > a,
.navbar.navbar-default .navbar-nav > .open > a:hover,
.navbar.navbar-default .navbar-nav > .open > a:focus {
color: #ff9c74;
background-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle {
border-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle:hover,
.navbar.navbar-default .navbar-toggle:focus {
background-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle .icon-bar {
background-color: #292929;
}
.navbar.navbar-default .navbar-collapse,
.navbar.navbar-default .navbar-form {
border:none;
margin-top: 50px;
}
.navbar.navbar-default .navbar-link {
color: #292929;
}
.navbar.navbar-default .navbar-link:hover {
color: #696969;
}
.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
.nav.navbar-nav > li.navbar-left {
font-family: 'Nunito Sans', sans-serif;
font-size: 11.5px;
}
.navbar-brand {
padding: 10px;
}
.navbar-brand>img {
height: 50px;
width: auto
}
#media (min-width: 768px) {
.navbar-brand { display: block; }
.navbar-bar-default .navbar-toggle {text-align: left;}
}
.fa.fa-instagram {
font-size: 18px;
}
.fa.fa-pinterest {
font-size: 18px;
}
.fa.fa-dribbble {
font-size: 18px;
}
.fa.fa-twitter{
font-size: 18px;
}
.banner {
width: 100%;
}
.banner-inner {
max-width:1100px;
margin: 0 auto;
}
#media (min-width:468px) and (max-width:991px){
.container.navbar-container {
width:100%;
padding:0px;
}
}
#media (min-width:468px) and (max-width:991px){
.container.navbar-container {
width:100%;
padding:0px;
}
}
body { padding-top: 90px; }
#media screen (min-width: 468px) and (max-width: 768px) {
body { padding-top: 0px; }
}
.banner-inner>img {
opacity:0;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s;
transition: opacity 2s;
}
.col-1-1> img{
opacity:0;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s;
transition: opacity 2s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device=width, initial-scale=1.0">
<title></title>
<meta name="author" content="">
<link rel="icon" type="image/png" href="img/icon.png"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href="css/sticky-footer.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito|Nunito+Sans|Playfair+Display" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div><img class="navbar-brand" href="http://" onload="this.style.opacity='1';" class= "logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32877/logo-thing.png"></div>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<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><img class="navbar-brand" href="http://" onload="this.style.opacity='1';" class= "logo" src="img/logo.png"></div> -->
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left">TRAVEL</li>
<li class="navbar-left"> PORTFOLIO </li>
<li class="navbar-left"> INSPO </li>
<li class="navbar-left"> ABOUT </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="right"> <i class="fa fa-instagram"></i></li>
<li class="right"> <i class="fa fa-dribbble"></i></li>
<li class="right"> <i class="fa fa-pinterest"></i></li>
<li class="right"> <i class="fa fa-twitter"></i></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</div>
</div>
</header>
<!---End Header-->
<section class="banner">
<div class="banner-inner">
<img onload="this.style.opacity='1';" class="banner" src="img/background.jpg">
</div>
</section>
<!---End Banner-->
<!-- Begin page content -->
<footer class="footer">
<div class="container">
<span class>Copyright © 2017. JH. All rights reserved.</span>
</div>
</footer>
<!---End Footer-->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
EDIT
Updated above code to also center the nav bar links/icons as requested.
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device=width, initial-scale=1.0">
<title></title>
<meta name="author" content="">
<link rel="icon" type="image/png" href="img/icon.png"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href="css/sticky-footer.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito|Nunito+Sans|Playfair+Display" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div><img class="navbar-brand" href="http://" onload="this.style.opacity='1';" class= "logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32877/logo-thing.png"></div>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<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><img class="navbar-brand" href="http://" onload="this.style.opacity='1';" class= "logo" src="img/logo.png"></div> -->
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left">TRAVEL</li>
<li class="navbar-left"> PORTFOLIO </li>
<li class="navbar-left"> INSPO </li>
<li class="navbar-left"> ABOUT </li>
</ul>
<ul class="nav navbar-nav">
<li class="right"> <i class="fa fa-instagram"></i></li>
<li class="right"> <i class="fa fa-dribbble"></i></li>
<li class="right"> <i class="fa fa-pinterest"></i></li>
<li class="right"> <i class="fa fa-twitter"></i></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</div>
</div>
</header>
<!---End Header-->
<section class="banner">
<div class="banner-inner">
<img onload="this.style.opacity='1';" class="banner" src="img/background.jpg">
</div>
</section>
<!---End Banner-->
<!-- Begin page content -->
<footer class="footer">
<div class="container">
<span class>Copyright © 2017. JH. All rights reserved.</span>
</div>
</footer>
<!---End Footer-->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
<style>
img.navbar-brand {
height: 45px;
margin: 0;
padding: 0;
}
.navbar.navbar-default {
background-color: #ffffff;
border-color: #ffffff;
padding-top:15px;
padding-bottom:30px;
}
.navbar.navbar-default .navbar-brand {
color: #696969;
}
.navbar.navbar-default .navbar-brand:hover,
.navbar.navbar-default .navbar-brand:focus {
color: #ff9c74;
}
.navbar.navbar-default .navbar-text {
color: #292929;
}
.navbar.navbar-default .navbar-nav > li > a {
color: #292929;
}
.navbar.navbar-default .navbar-nav > li > a:hover,
.navbar.navbar-default .navbar-nav > li > a:focus {
color: #747474;
}
.navbar.navbar-default .navbar-nav > .active > a,
.navbar.navbar-default .navbar-nav > .active > a:hover,
.navbar.navbar-default .navbar-nav > .active > a:focus {
color: #ff9c74;
background-color: #ffffff;
}
.navbar.navbar-default .navbar-nav > .open > a,
.navbar.navbar-default .navbar-nav > .open > a:hover,
.navbar.navbar-default .navbar-nav > .open > a:focus {
color: #ff9c74;
background-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle {
border-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle:hover,
.navbar.navbar-default .navbar-toggle:focus {
background-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle .icon-bar {
background-color: #292929;
}
.navbar.navbar-default .navbar-collapse,
.navbar.navbar-default .navbar-form {
border:none;
margin-top: 50px;
}
#navbar {
text-align: center;
}
ul.navbar-nav {
display: inline-block;
}
.navbar.navbar-default .navbar-link {
color: #292929;
}
.navbar.navbar-default .navbar-link:hover {
color: #696969;
}
.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
.nav.navbar-nav > li.navbar-left {
font-family: 'Nunito Sans', sans-serif;
font-size: 11.5px;
}
.navbar-brand {
padding: 10px;
}
.navbar-brand>img {
height: 50px;
width: auto
}
#media (min-width: 768px) {
.navbar-brand { display: block; }
.navbar-bar-default .navbar-toggle {text-align: left;}
ul.navbar-nav {
float: none;
}
}
ul.navbar-nav {
float: none;
}
.fa.fa-instagram {
font-size: 18px;
}
.fa.fa-pinterest {
font-size: 18px;
}
.fa.fa-dribbble {
font-size: 18px;
}
.fa.fa-twitter{
font-size: 18px;
}
.banner {
width: 100%;
}
.banner-inner {
max-width:1100px;
margin: 0 auto;
}
#media (min-width:468px) and (max-width:991px){
.container.navbar-container {
width:100%;
padding:0px;
}
}
#media (min-width:468px) and (max-width:991px){
.container.navbar-container {
width:100%;
padding:0px;
}
}
body { padding-top: 90px; }
#media screen (min-width: 468px) and (max-width: 768px) {
body { padding-top: 0px; }
}
.banner-inner>img {
opacity:0;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s;
transition: opacity 2s;
}
.col-1-1> img{
opacity:0;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s;
transition: opacity 2s;
}
</style>
I am having trouble adding padding to the left and right side of the nav bar so the social media buttons and the rest of the menu items are pushed closer towards the center. I tried adding padding to the left and right. However, that moves the position of the button that appears when the menu is collapsed. I have a logo in the center of the nav bar and then social media icons to the right and other menu items the left.
.navbar.navbar-default {
background-color: #ccc;
border-color: #ffffff;
padding-top:15px;
padding-bottom:15px;
}
.navbar.navbar-default .navbar-brand {
color: #292929;
}
.navbar.navbar-default .navbar-brand:hover,
.navbar.navbar-default .navbar-brand:focus {
color: #FC9F9F;
}
.navbar.navbar-default .navbar-text {
color: #292929;
}
.navbar.navbar-default .navbar-nav > li > a {
color: #292929;
}
.navbar.navbar-default .navbar-nav > li > a:hover,
.navbar.navbar-default .navbar-nav > li > a:focus {
color: #FC9F9F;
}
.navbar.navbar-default .navbar-nav > .active > a,
.navbar.navbar-default .navbar-nav > .active > a:hover,
.navbar.navbar-default .navbar-nav > .active > a:focus {
color: #FC9F9F;
background-color: #ffffff;
}
.navbar.navbar-default .navbar-nav > .open > a,
.navbar.navbar-default .navbar-nav > .open > a:hover,
.navbar.navbar-default .navbar-nav > .open > a:focus {
color: #FC9F9F;
background-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle {
border-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle:hover,
.navbar.navbar-default .navbar-toggle:focus {
background-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle .icon-bar {
background-color: #292929;
}
.navbar.navbar-default .navbar-collapse,
.navbar.navbar-default .navbar-form {
border:none;
}
.navbar.navbar-default .navbar-link {
color: #292929;
}
.navbar.navbar-default .navbar-link:hover {
color: #ffd4d4;
}
.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
.nav.navbar-nav > li.navbar-left {
font-family: 'Nunito Sans', sans-serif;
font-size: 11.5px;
}
.navbar-brand {
padding: 10px;
}
.navbar-brand>img {
height: 30px;
width: auto;
}
#media (min-width: 768px) {
.navbar-brand { display: block; }
.navbar-bar-default .navbar-toggle {text-align: left;}
}
#media (min-width: 468px) {
.navbar-brand { display: block; }
.navbar-bar-default .navbar-toggle {text-align: left;}
}
.fa.fa-instagram {
font-size: 18px;
}
.fa.fa-pinterest {
font-size: 18px;
}
.fa.fa-facebook {
font-size: 18px;
}
.fa.fa-twitter{
font-size: 18px;
}
.banner {
width: 100%;
}
.banner-inner {
max-width:1100px;
margin: 0 auto;
}
#media (min-width:468px) and (max-width:991px){
.container.navbar-container {
width:100%;
padding:0px;
}
}
#media (min-width:768px) and (max-width:1024px){
.container.navbar-container {
width:100%;
padding:0px;
}
}
body { padding-top: 90px; }
#media screen (min-width: 468px) and (max-width: 768px) {
body { padding-top: 0px; }
}
.banner-inner>img {
opacity:0;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s;
transition: opacity 2s;
}
.col-1-1> img{
opacity:0;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s;
transition: opacity 2s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device=width, initial-scale=1.0">
<title>J</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href="css/sticky-footer.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito|Nunito+Sans|Playfair+Display" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body style="padding-top: 70px;">
<header>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://"><img class= "logo" src="img/logo.png"></a>
</div>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left">TRAVEL</li>
<li class="navbar-left"> PORTFOLIO </li>
<li class="navbar-left"> ABOUT </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="right"> <i class="fa fa-instagram"></i>
<li class="right"> <i class="fa fa-pinterest"></i>
<li class="right"> <i class="fa fa-facebook"></i>
<li class="right"> <i class="fa fa-twitter"></i>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
</div>
</header>
<!---End Header-->
<section class="banner">
<div class="banner-inner">
<img onload="this.style.opacity='1';" class="banner" src="img/background.png">
</div>
</section>
<!---End Banner-->
<!-- Begin page content -->
<footer class="footer">
<div class="container">
<span class>Copyright © 2017. All rights reserved.</span>
</div>
</footer>
<!---End Footer-->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
Use media queries. like this:
#media screen and (min-width:768px){
.navbar.navbar-default {
padding-left:40px;
padding-right:40px;
}
}
This will add padding to your navbar only if the screen size is more than 768px.
.navbar.navbar-default {
background-color: #ccc;
border-color: #ffffff;
padding-top:15px;
padding-bottom:15px;
}
#media screen and (min-width:768px){
.navbar.navbar-default {
padding-left:40px;
padding-right:40px;
}
}
.navbar.navbar-default .navbar-brand {
color: #292929;
}
.navbar.navbar-default .navbar-brand:hover,
.navbar.navbar-default .navbar-brand:focus {
color: #FC9F9F;
}
.navbar.navbar-default .navbar-text {
color: #292929;
}
.navbar.navbar-default .navbar-nav > li > a {
color: #292929;
}
.navbar.navbar-default .navbar-nav > li > a:hover,
.navbar.navbar-default .navbar-nav > li > a:focus {
color: #FC9F9F;
}
.navbar.navbar-default .navbar-nav > .active > a,
.navbar.navbar-default .navbar-nav > .active > a:hover,
.navbar.navbar-default .navbar-nav > .active > a:focus {
color: #FC9F9F;
background-color: #ffffff;
}
.navbar.navbar-default .navbar-nav > .open > a,
.navbar.navbar-default .navbar-nav > .open > a:hover,
.navbar.navbar-default .navbar-nav > .open > a:focus {
color: #FC9F9F;
background-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle {
border-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle:hover,
.navbar.navbar-default .navbar-toggle:focus {
background-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle .icon-bar {
background-color: #292929;
}
.navbar.navbar-default .navbar-collapse,
.navbar.navbar-default .navbar-form {
border:none;
}
.navbar.navbar-default .navbar-link {
color: #292929;
}
.navbar.navbar-default .navbar-link:hover {
color: #ffd4d4;
}
.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
.nav.navbar-nav > li.navbar-left {
font-family: 'Nunito Sans', sans-serif;
font-size: 11.5px;
}
.navbar-brand {
padding: 10px;
}
.navbar-brand>img {
height: 30px;
width: auto;
}
#media (min-width: 768px) {
.navbar-brand { display: block; }
.navbar-bar-default .navbar-toggle {text-align: left;}
}
#media (min-width: 468px) {
.navbar-brand { display: block; }
.navbar-bar-default .navbar-toggle {text-align: left;}
}
.fa.fa-instagram {
font-size: 18px;
}
.fa.fa-pinterest {
font-size: 18px;
}
.fa.fa-facebook {
font-size: 18px;
}
.fa.fa-twitter{
font-size: 18px;
}
.banner {
width: 100%;
}
.banner-inner {
max-width:1100px;
margin: 0 auto;
}
#media (min-width:468px) and (max-width:991px){
.container.navbar-container {
width:100%;
padding:0px;
}
}
#media (min-width:768px) and (max-width:1024px){
.container.navbar-container {
width:100%;
padding:0px;
}
}
body { padding-top: 90px; }
#media screen (min-width: 468px) and (max-width: 768px) {
body { padding-top: 0px; }
}
.banner-inner>img {
opacity:0;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s;
transition: opacity 2s;
}
.col-1-1> img{
opacity:0;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s;
transition: opacity 2s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device=width, initial-scale=1.0">
<title>J</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href="css/sticky-footer.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito|Nunito+Sans|Playfair+Display" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body style="padding-top: 70px;">
<header>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://"><img class= "logo" src="img/logo.png"></a>
</div>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left">TRAVEL</li>
<li class="navbar-left"> PORTFOLIO </li>
<li class="navbar-left"> ABOUT </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="right"> <i class="fa fa-instagram"></i>
<li class="right"> <i class="fa fa-pinterest"></i>
<li class="right"> <i class="fa fa-facebook"></i>
<li class="right"> <i class="fa fa-twitter"></i>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
</div>
</header>
<!---End Header-->
<section class="banner">
<div class="banner-inner">
<img onload="this.style.opacity='1';" class="banner" src="img/background.png">
</div>
</section>
<!---End Banner-->
<!-- Begin page content -->
<footer class="footer">
<div class="container">
<span class>Copyright © 2017. All rights reserved.</span>
</div>
</footer>
<!---End Footer-->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body {
background-color: #a6a6a6;
padding-bottom: 40px;
color: #5a5a5a;
}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 20;
}
/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
padding-right: 0;
padding-left: 0;
}
.navbar-wrapper .navbar {
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar .container {
width: auto;
}
/* PORTFOLIO PAGE CSS
---------------------------------------------------*/
.css-img div {
display: inline-block;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
#media (min-width: 768px) {
/* Navbar positioning foo */
.navbar-wrapper {
margin-top: 20px;
}
.navbar-wrapper .container {
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar {
padding-right: 0;
padding-left: 0;
}
/* The navbar becomes detached from the top, so we round the corners */
.navbar-wrapper .navbar {
border-radius: 4px;
}
.nav {
margin-bottom: 0;
padding-left: 0;
list-style: none;
}
.nav > li {
position: relative;
display: block;
}
.nav > li > a {
position: relative;
display: block;
padding: 10px 15px;
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: #eeeeee;
}
.nav > li.disabled > a {
color: #777777;
}
.nav > li.disabled > a:hover,
.nav > li.disabled > a:focus {
color: #777777;
text-decoration: none;
background-color: transparent;
cursor: not-allowed;
}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
background-color: #eeeeee;
border-color: #337ab7;
}
.nav .nav-divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
.nav > li > a > img {
max-width: none;
}
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
#media (min-width: 768px) {
.navbar {
border-radius: 4px;
}
}
#media (min-width: 768px) {
.navbar-header {
float: left;
}
}
.navbar-collapse {
overflow-x: visible;
padding-right: 15px;
padding-left: 15px;
border-top: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
-webkit-overflow-scrolling: touch;
}
.navbar-collapse.in {
overflow-y: auto;
}
#media (min-width: 768px) {
.navbar-collapse {
width: auto;
border-top: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
.navbar-collapse.in {
overflow-y: visible;
}
.navbar-fixed-top .navbar-collapse,
.navbar-static-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
padding-left: 0;
padding-right: 0;
}
}
.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
max-height: 340px;
}
#media (max-device-width: 480px) and (orientation: landscape) {
.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
max-height: 200px;
}
}
.container > .navbar-header,
.container-fluid > .navbar-header,
.container > .navbar-collapse,
.container-fluid > .navbar-collapse {
margin-right: -15px;
margin-left: -15px;
}
#media (min-width: 768px) {
.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
margin-right: 0;
margin-left: 0;
}
}
.navbar-brand {
float: left;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
height: 50px;
}
.navbar-brand:hover,
.navbar-brand:focus {
text-decoration: none;
}
.navbar-brand > img {
display: block;
}
#media (min-width: 768px) {
.navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {
margin-left: -15px;
}
}
.navbar-toggle {
position: relative;
float: right;
margin-right: 15px;
padding: 9px 10px;
margin-top: 8px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.navbar-toggle:focus {
outline: 0;
}
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
}
.navbar-toggle .icon-bar + .icon-bar {
margin-top: 4px;
}
#media (min-width: 768px) {
.navbar-toggle {
display: none;
}
}
.navbar-nav {
margin: 7.5px -15px;
}
.navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
}
#media (max-width: 767px) {
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-nav .open .dropdown-menu > li > a,
.navbar-nav .open .dropdown-menu .dropdown-header {
padding: 5px 15px 5px 25px;
}
.navbar-nav .open .dropdown-menu > li > a {
line-height: 20px;
}
.navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-nav .open .dropdown-menu > li > a:focus {
background-image: none;
}
}
#media (min-width: 768px) {
.navbar-nav {
float: left;
margin: 0;
}
.navbar-nav > li {
float: left;
}
.navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<title>Carousel Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<!-- link href="css/bootstrap.min.css" rel="stylesheet" -->
<!-- Custom styles for this template -->
<link href="portfolio.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<!-- NAVBAR
================================================== -->
<body>
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home
</li>
<li>About
</li>
<li class="active">Portfolio
</li>
<li>Contact
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="css-img">
<div class="row">
<div class="col-md-4">
<img src="http://placehold.it/242x200" alt="placeholder image">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="http://placehold.it/242x200" alt="placeholder image">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="http://placehold.it/242x200" alt="placeholder image">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.</p>
</div>
</div>
</div>
</div>
<hr class="featurette-divider">
<!-- FOOTER -->
<footer>
<p class="pull-right">Back to top
</p>
<p>© 2015 Company, Inc.</p>
</footer>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')
</script>
<script src="js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="../../assets/js/vendor/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
I am building a template so I can create a Wordpress theme and want to display the images on my portfolio page as horizontal and not vertical like they are now. I set the div to display inline-block and it was working until I added text below the header. How can I fix this? I may have to repost this since it wont let me add the core Bootstrap code to the fiddle without giving me a warning. So my header is missing code for it to work properly here but it works fine with all the Bootstrap files I have with the code on my end.
You are placing each col-md-* in a separate row. Naturally, Bootstrap rows are stacked vertically.
You should place all your col-md-*s in a single row.
Making the caption div float:left and removing the inline-block from .ccs-img div rule will solve your problem.
/* GLOBAL STYLES
-------------------------------------------------- */
/*NEW*/
img {
float: left;
padding-right: 5px;
}
/* Padding below the footer and lighter body text */
body {
background-color: #a6a6a6;
padding-bottom: 40px;
color: #5a5a5a;
}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 20;
}
/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
padding-right: 0;
padding-left: 0;
}
.navbar-wrapper .navbar {
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar .container {
width: auto;
}
/* PORTFOLIO PAGE CSS
---------------------------------------------------*/
.css-img div {
}
/* RESPONSIVE CSS
-------------------------------------------------- */
#media (min-width: 768px) {
/* Navbar positioning foo */
.navbar-wrapper {
margin-top: 20px;
}
.navbar-wrapper .container {
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar {
padding-right: 0;
padding-left: 0;
}
/* The navbar becomes detached from the top, so we round the corners */
.navbar-wrapper .navbar {
border-radius: 4px;
}
.nav {
margin-bottom: 0;
padding-left: 0;
list-style: none;
}
.nav > li {
position: relative;
display: block;
}
.nav > li > a {
position: relative;
display: block;
padding: 10px 15px;
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: #eeeeee;
}
.nav > li.disabled > a {
color: #777777;
}
.nav > li.disabled > a:hover,
.nav > li.disabled > a:focus {
color: #777777;
text-decoration: none;
background-color: transparent;
cursor: not-allowed;
}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
background-color: #eeeeee;
border-color: #337ab7;
}
.nav .nav-divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
.nav > li > a > img {
max-width: none;
}
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
#media (min-width: 768px) {
.navbar {
border-radius: 4px;
}
}
#media (min-width: 768px) {
.navbar-header {
float: left;
}
}
.navbar-collapse {
overflow-x: visible;
padding-right: 15px;
padding-left: 15px;
border-top: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
-webkit-overflow-scrolling: touch;
}
.navbar-collapse.in {
overflow-y: auto;
}
#media (min-width: 768px) {
.navbar-collapse {
width: auto;
border-top: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
.navbar-collapse.in {
overflow-y: visible;
}
.navbar-fixed-top .navbar-collapse,
.navbar-static-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
padding-left: 0;
padding-right: 0;
}
}
.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
max-height: 340px;
}
#media (max-device-width: 480px) and (orientation: landscape) {
.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
max-height: 200px;
}
}
.container > .navbar-header,
.container-fluid > .navbar-header,
.container > .navbar-collapse,
.container-fluid > .navbar-collapse {
margin-right: -15px;
margin-left: -15px;
}
#media (min-width: 768px) {
.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
margin-right: 0;
margin-left: 0;
}
}
.navbar-brand {
float: left;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
height: 50px;
}
.navbar-brand:hover,
.navbar-brand:focus {
text-decoration: none;
}
.navbar-brand > img {
display: block;
}
#media (min-width: 768px) {
.navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {
margin-left: -15px;
}
}
.navbar-toggle {
position: relative;
float: right;
margin-right: 15px;
padding: 9px 10px;
margin-top: 8px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.navbar-toggle:focus {
outline: 0;
}
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
}
.navbar-toggle .icon-bar + .icon-bar {
margin-top: 4px;
}
#media (min-width: 768px) {
.navbar-toggle {
display: none;
}
}
.navbar-nav {
margin: 7.5px -15px;
}
.navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
}
#media (max-width: 767px) {
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-nav .open .dropdown-menu > li > a,
.navbar-nav .open .dropdown-menu .dropdown-header {
padding: 5px 15px 5px 25px;
}
.navbar-nav .open .dropdown-menu > li > a {
line-height: 20px;
}
.navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-nav .open .dropdown-menu > li > a:focus {
background-image: none;
}
}
#media (min-width: 768px) {
.navbar-nav {
float: left;
margin: 0;
}
.navbar-nav > li {
float: left;
}
.navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Carousel Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="portfolio.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<!-- NAVBAR
================================================== -->
<body>
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home
</li>
<li>About
</li>
<li class="active">Portfolio
</li>
<li>Contact
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="css-img">
<div class="row">
<div class="col-md-4">
<img src="http://placehold.it/242x200" alt="placeholder image">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="http://placehold.it/242x200" alt="placeholder image">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="http://placehold.it/242x200" alt="placeholder image">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.</p>
</div>
</div>
</div>
</div>
<hr class="featurette-divider">
<!-- FOOTER -->
<footer>
<p class="pull-right">Back to top
</p>
<p>© 2015 Company, Inc.</p>
</footer>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')
</script>
<script src="js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="../../assets/js/vendor/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
I am building this website
torgoborudovanie.com
I have a collapsing navbar build with bootstrap.But when I try to resize the window I get something like this :
As you can see (and you can actually try it ) nav bar now has 2 lines and it looks wired (the actual problem is that it looks like this on Iphone and Ipad) Then you can resize it a little bit more and it gets collapsed as I want.
You can see the code by simply viewing html code in developer tools.
So I will not post it here to make qustion clean and small.But if you want I can post the code here too=)
I ended up with this (quite shitty to be fair workaround)
On page load if I have window.width less than 1200px I just hide long text.
function hideSlogan() {
if($(window).width() <1200) {$('.slogan').hide()}
};
hideSlogan();
Go to the CSS rules starting at the MOBILE NAV comment; these are the rules you can adjust to make the navbar collapse at different breakpoints.
On a sidenote, there is one extra, broken list tag in the nav and with the positioning of Надежный партнер - качественные решения! inside your navbar-collapse div you'll the following behavior:
If you expand the menu when it's in the mobile and then expand the viewport your navbar will revert to the line-height: 60px unless the browser is refreshed. Might not matter but since you're trying to change the collapse breakpoint it's worth mentioning.
**I also moved the inline styles with the rest of the CSS Rules.
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 700, 800);
#import url(http://fonts.googleapis.com/css?family=Libre+Baskerville:400italic);
* {
margin: 0;
padding: 0px;
font-family: 'Open Sans', sans-serif;
}
body {
background: #fff;
margin: 0;
color: #42413e;
padding-top: 50px;
}
/* BOOTSTRAP MODIFICATION */
.navbar-right a .btn-orange {
margin-top: -5px;
}
.btn-orange {
background: #f27242;
border-radius: 2px;
color: white;
font-size: 12px;
font-weight: 700;
}
.btn-orange:hover {
background: #e16a3e;
color: white;
}
.navbar-default .navbar-brand {
height: 50px;
padding: 10px 15px;
font-size: 20px;
line-height: 22px;
font-weight: 700;
}
.navbar.navbar-default {
background-color: #ffffff;
border-color: #e7e7e7;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #f27242;
background-color: transparent;
}
.navbar-default .navbar-nav > li > a {
color: #ccc;
}
.navbar-default .navbar-right {
padding-top: 5px
}
.navbar-default li.dropdown a {
color: black;
}
.navbar-default span.head-title {
line-height: 60px;
}
.navbar-default .navbar-right .dropdown-menu {
right: auto;
left: 0;
}
.navbar-right li.contact-info a {
color: #42413e;
}
/****MOBILE NAVBAR******/
#media (max-width: 1200px) {
.custom-navbar .navbar-header {
float: none;
}
.custom-navbar .navbar-left,
.custom-navbar .navbar-right {
float: none !important;
}
.custom-navbar .navbar-toggle {
display: block;
}
.custom-navbar .navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
overflow-x: hidden;
}
.custom-navbar.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.custom-navbar .navbar-collapse.collapse {
display: none!important;
}
.custom-navbar .navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.custom-navbar .navbar-nav > li {
float: none;
}
.custom-navbar .navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
}
.custom-navbar .collapse.in {
display: block !important;
}
.custom-navbar .navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.custom-navbar .navbar-brand {
height: 55px;
padding: 10px 15px;
font-size: 20px;
line-height: 22px;
font-weight: 700;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<nav class="navbar navbar-default custom-navbar navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Переключить навигацию</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="http://www.torgoborudovanie.com/assets/img/logo1.png" width="140">
</a>
</div>
<div class="collapse navbar-collapse"><span class="head-title">Надежный партнер - качественные решения!</span>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"> Каталог <span class="caret"></span>
<ul class="dropdown-menu">
<li>Стеллажи
</li>
<li>Торговая мебель
</li>
<li>Тележки и корзины
</li>
<li> Кассовые боксы
</li>
<li>Холодильное оборудование
</li>
<li role="separator" class="divider"></li>
<li>Условия доставки
</li>
</ul>
</li>
<li class="contact-info">
<i class="fa fa-phone "></i> 8 (343) 3448090
</li>
<li class="contact-info">
<i class="fa fa-envelope"></i> info#optimagp.ru
</li>
<li>
<a href="#f">
<button class="btn btn-sm btn-orange" type="button">Заказать звонок</button>
</a>
</li>
</ul>
</div>
</div>
</nav>
you need to change your breakpoint, when the navbar gets collapsed...
so for example, this should work:
#media only screen and (min-width: 1200px) {
.collapse {
display: block;
}
.navbar-toggle {
display: none;
}
}
#media only screen and (max-width: 1200px) {
.collapse {
display: none;
}
.navbar-toggle {
display: block;
}
}
because it floats (because its so long) after 1200px width...
** sorry, i made a mistake... try it now :) **