I'm trying to set up a website grid in bootstrap. To clearify the end results I want I added an image. end results
I have standard bootstrap navbar in place. (is ok for now)
I want the columns to fill the complete height.
I want the "read more" button to overlap the columns underneath eachother.
The subtitle needs to be aligned to the left of the title. Now it's centered due to the whole div content is being centered.
Column height issue
So I have 2 columns side by side and 1 column underneath. I want it to fill up the height to 100%.
So let's say that the 2 columns side by side take up 80% of the height. (40% padding bottom and 40% top)
And the full width column to fill up the rest of the height. Say 10%/10% top/bottom padding.
However when I do this the height is more than the screen height and it's already out of the viewable area.
Overlapping button
As an extra headeache, I need 2 buttons that overlap 50% with the column underneath. I can't seem to get this to work.
The code I have in place now:
body {
font-family: Sofia-pro;
}
#header-block-left, #header-block-right {
text-align: center;
padding-top: 40%;
padding-bottom: 40%;
}
#page-scroll-anchor-grey {
text-align: center;
padding-top: 10%;
padding-bottom: 10%;
}
#header-block-right {
background-color: #dcdbd7;
}
#page-scroll-anchor-grey {
background-color: #dcdbd7
}
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Code Atelier</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.typekit.net/png0dbx.css">
<link rel="stylesheet" type= "text/css" href="bootstrap.css">
<link rel="stylesheet" type= "text/css" href="style.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/Elements/Logo/logo-dark.svg" width="30" height="30" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Merk Atelier <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Oplossingen</a>
<a class="nav-item nav-link" href="#">Contact</a>
</div>
</div>
</nav>
<div class="container-fluid p-0">
<div class="row">
<div class="col-lg-6">
<div id="header-block-left">
<h1>Product A</h1>
<h6>Subtitel</h6>
</div>
</div>
<div class="col-lg-6">
<div id="header-block-right">
<h1>Product A</h1>
<h6>Subtitel</h6>
</div>
</div>
<div class="col-lg-12">
<div id="page-scroll-anchor-grey">
<h6>Scroll snel verder</h6>
</div>
</div>
<div class="row">
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="" async defer></script>
</body>
</html>
Any suggestions would be great!
Use the vh unit to set the heights relative to the height of the screen.
You could set some min-heights on the nav/header and footer in order to ensure they hit a certain size and then switch the #main height to max-height to have it take up the rest of the vertical space on the screen.
nav {
height: 10vh;
background: grey;
}
#main {
height: 80vh;
}
#header-block-left {
background: white;
}
#header-block-right {
background: gray;
}
.btn {
position: relative;
top: -15px;
}
footer {
height: 10vh;
background: grey;
}
<link href="https://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/Elements/Logo/logo-dark.svg" width="30" height="30" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Merk Atelier <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Oplossingen</a>
<a class="nav-item nav-link" href="#">Contact</a>
</div>
</div>
</nav>
<section id="main" class="container-fluid">
<div class="row h-100">
<div class="col-6">
<div id="header-block-left" class="header-block h-100 d-flex flex-column justify-content-center align-items-center">
<h1>Product A</h1>
<h6>Subtitel</h6>
</div>
<button class="btn btn-primary mx-auto d-block">Text</button>
</div>
<div class="col-6">
<div id="header-block-right" class="header-block h-100 d-flex flex-column justify-content-center align-items-center">
<h1>Product A</h1>
<h6>Subtitel</h6>
</div>
<button class="btn btn-primary mx-auto d-block">Text</button>
</div>
</div>
</section>
<footer class="container-fluid d-flex justify-content-center align-items-center">
<p class="m-0">Text in the footer</p>
</footer>
Related
I already have a side menĂ¹, I want him to change into a hamburger menĂ¹ whenever the website is open by a mobile device. I also use bootstrap libraries, I dunno if it can help, it would be better using them. Here's an example of what I have:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<style>
div {
border: solid black 1px;
margin: 0 !important;
padding: 0 !important;
max-width: none !important;
width: 100%;
}
.menu {
text-align: center;
}
button {
margin: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-3">
<div class="menu">
<button>Content 1</button><br>
<button>Content 2</button><br>
<button>Content 3</button><br>
<button>Content 4</button><br>
<button>Content 5</button><br>
<button>Content 6</button><br>
<button>Content 7</button><br>
<button>Content 8</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
Since you're using Bootstrap, it's easier to do it with Bootstrap like this:
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="yourlogo.com" class="d-inline-block align-top" width="32" height="32" alt="Your logo" />web.com</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation-bar-content" aria-controls="navigation-bar-content" aria-expanded="false" aria-label="Expand navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navigation-bar-content">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">About <span class="sr-only">(current)</span></a>
<li class="nav-item">
<a class="nav-link disabled" href="#">Products</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search..." aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Submit</button>
</form>
</div>
</nav>
When used on a phone, the navigation menu folds into a hamburger. You can verify this, for example, using the developer tools (CTRL + SHIFT + I in Chrome).
Of course, you need to have some sort of search function for that search field or it won't work for you. You can also add a dropdown there, but you must also have JavaScript linked.
This question already has an answer here:
Why is the Bootstrap Navbar always collapsed? [duplicate]
(1 answer)
Closed 1 year ago.
The navbar links show as block instead of inline even though I'm using <div style="display: inline-block;"> as seen in another post here
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Navbar</title>
</head>
<body>
<h1>Navbar</h1>
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="#">Navbar</a>
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse" data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div style="display: inline-block;">
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="#">Register</a>
<a class="nav-link" href="#">Sign In</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>
Currently, the parent div of your navbar links is inline, so I assume you're referring to the links themselves appearing on top of each other instead of side-by-side. To fix this, simply apply the same styling you used on the parent to the links themselves.
Here are two ways of solving this depending on if you would prefer a solution in the HTML file or in an external CSS file. It is not necessary to include both solutions.
<a style="display: inline-block" class="nav-link" href="#">Register</a>
<a style="display: inline-block" class="nav-link" href="#">Sign In</a>
li > .nav-link {
display: inline-block;
}
input[type="text"] {
position: relative;
top: 0;
left: 0;
-webkit-transition: all .7s;
-moz-transition: all .7s;
transition: all .7s;
}
input[type="text"]:focus {
padding: 1px 1px 1px 2px;
}
.searchInput {
background-color: transparent;
border-bottom: 1px solid;
border-bottom-color: #808080;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<!----------------------------- nav bar ------------------------------>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="?p=#"><img src="https://png.pngtree.com/element_pic/17/01/01/93b5a86a0836ef7f1a078d48ab3bc32f.jpg" alt="BizarroNEWS" width="50%"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav nav mr-auto mt-2 mt-lg-0 ml-3 textoNavbar dropMenuHoverColor">
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
</ul>
<div class="col-sm-12 col-md-12 col-lg-3 my-1">
<form action="?p=pesquisa" method="post" value="" enctype="multipart/form-data">
<div class="input-group">
<input class="form-control searchInput" id="cxnome" name="cxnome" type="text" placeholder="Pesquisar" aria-label="Search" required="required">
<button type="submit" name="pesquisar" class="input-group-append button">
<img src="img/searchIcon.png">
</button>
</div>
</form>
</div>
</div>
</nav>
<!----------------------------- end nav bar ------------------------------>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Between 992px and 1180px of the screen size. The logo and the links called principal are affected by the transition when I click on the input.
This should not happen, I don't know where is the problem, maybe the problem is on the line transition: all? I'm not sure because I don't work much with css.
Why is it happening, and how can I solve it?
It happens because you're targeting the padding of the input and not the actual placeholder, which from what I understand is what you actually want to animate.
So - you'd plug in the ::-webkit-input-placeholder pseudo selector, and apply the transition effect to that.
That would look something like this:
.navbar {width: 100%; height: 100%;}
input[type="text"] {
position: relative; top: 0; left: 0;
}
/*Hit the placeholder of input. not actual input. */
input[type="text"]::-webkit-input-placeholder {
padding-left: 6px;
-webkit-transition: all .7s;
-moz-transition: all .7s;
transition: all .7s;
}
/* set padding down since you can't do negative padding */
input[type="text"]:focus::-webkit-input-placeholder {
padding-left: 0;
}
.searchInput{
background-color: transparent;
border-bottom: 1px solid;
border-bottom-color: #808080;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="MeuCss/cssSearchBar.css">
<title>Hello, world!</title>
</head>
<body>
<!----------------------------- nav bar ------------------------------>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="?p=#"><img src="https://png.pngtree.com/element_pic/17/01/01/93b5a86a0836ef7f1a078d48ab3bc32f.jpg" alt="BizarroNEWS" width="50%"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav nav mr-auto mt-2 mt-lg-0 ml-3 textoNavbar dropMenuHoverColor">
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
</ul>
<div class="col-sm-12 col-md-12 col-lg-3 my-1">
<form action="?p=pesquisa" method="post" value="" enctype="multipart/form-data">
<div class="input-group">
<input class="form-control searchInput" id="cxnome" name="cxnome" type="text" placeholder="Pesquisar" aria-label="Search" required="required">
<button type="submit" name="pesquisar" class="input-group-append button">
<img src="img/searchIcon.png">
</button>
</div>
</form>
</div>
</div>
</nav>
<!----------------------------- end nav bar ------------------------------>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
I'm having trouble with multiple bootstrap in Twitter Bootstrap 3.
First Navbar is working ok with resizing and responsive.
Second navbar doesn't work properly in normal resolution, but when i try to do size to responsive and after resize it's working okay.
Here's some code:
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <!--<![endif]-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/bootstrap.css">
<style>
</style>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.js"></script>
<script src="js/main.js"></script>
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src='//www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.</p>
<![endif]-->
<div id="wrap">
<div class="navbar navbar-inverse navbar-static-top hr" style="background:black;">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand logo"></div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" style="font-size:17px;">
<li>Item1</li>
<li class="divider-vertical"></li>
<li>Item2</li>
<li class="divider-vertical"></li>
<li>Item3</li>
<li class="divider-vertical"></li>
<li>Item4</li>
<li class="divider-vertical"></li>
<li>Item</li>
<li class="divider-vertical"></li>
<li>Item6</li>
<li class="divider-vertical"></li>
<li>Item7</li>
</ul>
</div>
</div>
</div>
<div class="navbar navbar-inverse navbar-static-top hr" style="background:#ececec; border-top:none; ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse2">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse2 collapse">
<ul class="nav navbar-nav" style="font-size:17px;">
<li>it1d</li>
<li class="divider-vertical"></li>
<li>it2d</li>
<li class="divider-vertical"></li>
<li>it3d</li>
<li class="divider-vertical"></li>
<li>it4d</li>
<li class="divider-vertical"></li>
<li>it5d</li>
<li class="divider-vertical"></li>
<li>it6d</li>
<li class="divider-vertical"></li>
<li>it7d</li>
</ul>
</div>
</div>
</div>
<!-- FOOTER -->
And Bootply:
http://bootply.com/101032
Best Regards and thanks for help.
Edit:
Ok I have resolution.
If you have same problem you have to change data target for second navbar and in starting div add ( i changed for .main-nav)
and after add your data-target class on the end of navbar item.
<div class="collapse navbar-collapse main-nav">
Here's link to bootply how to do it proper
http://bootply.com/101069
try changing
<div class="navbar-collapse2 collapse">
to that
<div class="navbar-collapse collapse">
If you add the following bit of CSS (either in a style tag or a custom css file), it should fix your problem.
#media only screen and (min-width: 768px) {
.navbar-collapse2.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0px;
overflow: visible !important;
}
}
I pulled this code from the code in bootstrap.css for .navbar-collapse
Can you please take a look at following LINK and let me know why the map is not acting responsive? I also have some issue with correct positioning and I appreciate if you can help me to fit the map correctly in page?
Here is my CSS and Html as well,
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- The styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<!-- JS Libs -->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false&dummy=.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/routeboxer/src/RouteBoxer.js" type="text/javascript"></script>
</head>
<body>
<div class="row">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Brand</a>
<div class="nav-collapse collapse" id="spanClasses">
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li class="divider"></li>
<li>Link</li>
<li class="divider"></li>
<li>Link</li>
<li class="divider"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="map">
<div id="map_canvas"></div>
</div>
and css:
body { padding-top:42px; height: 100% }
#map_canvas { width: 99%; height: 100%;}
#map{ padding-left:10px; padding-right:0px;}
The map is not an image, it will not downsize while you downsize your browser