I'm trying to set a navigation menu at the top of the screen with two rows:
The former one will contain the Brand, and when the resolution is small enough it will also contain the special bootstrap button menu that displays the collapsed menu items stacked.
The second will contain the categories and will be visible only if the resolution is large enough.
This is what I want to achieve:
When the resolution is big enough
When the resolution is small, the second menu row is collapsed
I have used this code without success (The second row never appears):
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="container">
<div class="nav-collapse collapse">
<ul class="nav navbar-nav">
<li>Cat1</li>
<li>Cat2</li>
<li>Cat3</li>
</ul>
</div>
</div>
</div>
<div class="container">
<p>some text</p>
</div>
</body>
</html>
Any idea?
I have updated your html code..and after changing a little bit of bootstrap styles you may get what you want..
<div class="navbar navbar-inverse navbar-static-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">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 class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Cat1</li>
<li>Cat2</li>
<li>Cat3</li>
</ul>
</div>
</div>
</div>
Now set
.navbar-header {
float: none;
}
Now you will get all links below brand name
In bootstrap we can use media queries to set when to display toggle button in navigation menu.Here we can see toggle button when browser size is 500 px or lesser than 500 px(by default toggle button appears when browser size is lesser than 767 px)..
#media (min-width: 500px) {
.navbar-collapse {
width: auto;
border-top: 0;
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-right: 0;
padding-left: 0;
}
navbar-collapse.collapse {
display: block!important;
}
.navbar-toggle {
display: none;
}
.navbar-nav > li {
float: left;
}
}
#media (max-width: 500px) {
.navbar-toggle {
display: block;
}
.navbar-header {
float: none;
}
.navbar-toggle {
display: block!important;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav > li {
float: none;
}
.navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
}
}
Hope this helps you!!!!!
Related
I'm using this updated Bootstrap sidebar collapse in my page, but here the sidebar & content have a fixed width for both divs, the main content is not taking full width after it has collapsed.
HTML:
<div class="col-md-3 col-xs-1 p-l-0 p-r-0 collapse in" id="sidebar">...</div>
<main class="col-md-9 col-xs-11 p-l-2 p-t-2">...</main>
But what I want is after the sidebar collapsed, main content should take full width.
I checked this and few other questions from stack overflow but didn't find what I want
Here's what needed to be done:
First I replaced the outdated col-xs with col. Then I replaced the remaining col-md-9 col-11 with col. Done!
The reason why it's working is because the first column for the sidebar is defined already. col then just fills out all of the available remaining space.
Here's the working code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
#sidebar .list-group-item {
border-radius: 0;
background-color: #333;
color: #ccc;
border-left: 0;
border-right: 0;
border-color: #2c2c2c;
white-space: nowrap;
}
/* highlight active menu */
#sidebar .list-group-item:not(.collapsed) {
background-color: #222;
}
/* closed state */
#sidebar .list-group .list-group-item[aria-expanded="false"]::after {
content: " \f0d7";
font-family: FontAwesome;
display: inline;
text-align: right;
padding-left: 5px;
}
/* open state */
#sidebar .list-group .list-group-item[aria-expanded="true"] {
background-color: #222;
}
#sidebar .list-group .list-group-item[aria-expanded="true"]::after {
content: " \f0da";
font-family: FontAwesome;
display: inline;
text-align: right;
padding-left: 5px;
}
/* level 1*/
#sidebar .list-group .collapse .list-group-item {
padding-left: 20px;
}
/* level 2*/
#sidebar .list-group .collapse > .collapse .list-group-item {
padding-left: 30px;
}
/* level 3*/
#sidebar .list-group .collapse > .collapse > .collapse .list-group-item {
padding-left: 40px;
}
#media (max-width:48em) {
/* overlay sub levels on small screens */
#sidebar .list-group .collapse.in, #sidebar .list-group .collapsing {
position: absolute;
z-index: 1;
width: 190px;
}
#sidebar .list-group > .list-group-item {
text-align: center;
padding: .75rem .5rem;
}
/* hide caret icons of top level when collapsed */
#sidebar .list-group > .list-group-item[aria-expanded="true"]::after,
#sidebar .list-group > .list-group-item[aria-expanded="false"]::after {
display:none;
}
}
/* change transition animation to width when entire sidebar is toggled */
#sidebar.collapse {
-webkit-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
-webkit-transition-duration: .2s;
-o-transition-duration: .2s;
transition-duration: .2s;
}
#sidebar.collapsing {
opacity: 0.8;
width: 0;
-webkit-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
transition-timing-function: ease-in;
-webkit-transition-property: width;
-o-transition-property: width;
transition-property: width;
}
main{
background-color:green;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-1 pl-0 pr-0 collapse in" id="sidebar">
<div class="list-group panel">
<i class="fa fa-dashboard"></i> <span class="hidden-sm-down">Item 1</span>
<div class="collapse" id="menu1">
Subitem 1
<div class="collapse" id="menu1sub1">
Subitem 1 a
Subitem 2 b
Subitem 3 c
<div class="collapse" id="menu1sub1sub1">
Subitem 3 c.1
Subitem 3 c.2
</div>
Subitem 4 d
Subitem 5 e
<div class="collapse" id="menu1sub1sub2">
Subitem 5 e.1
Subitem 5 e.2
</div>
</div>
Subitem 2
Subitem 3
</div>
<i class="fa fa-film"></i> <span class="hidden-sm-down">Item 2</span>
<i class="fa fa-book"></i> <span class="hidden-sm-down">Item 3 </span>
<div class="collapse" id="menu3">
3.1
3.2
<div class="collapse" id="menu3sub2">
3.2 a
3.2 b
3.2 c
</div>
3.3
</div>
<i class="fa fa-heart"></i> <span class="hidden-sm-down">Item 4</span>
<i class="fa fa-list"></i> <span class="hidden-sm-down">Item 5</span>
<i class="fa fa-clock-o"></i> <span class="hidden-sm-down">Link</span>
<i class="fa fa-th"></i> <span class="hidden-sm-down">Link</span>
<i class="fa fa-gear"></i> <span class="hidden-sm-down">Link</span>
<i class="fa fa-calendar"></i> <span class="hidden-sm-down">Link</span>
<i class="fa fa-envelope"></i> <span class="hidden-sm-down">Link</span>
<i class="fa fa-bar-chart-o"></i> <span class="hidden-sm-down">Link</span>
<i class="fa fa-star"></i> <span class="hidden-sm-down">Link</span>
</div>
</div>
<main class="col pl-2 pt-2">
<i class="fa fa-navicon fa-lg"></i>
<hr>
<div class="page-header">
<h1>Bootstrap 4 Sidebar Menu</h1>
</div>
<p class="lead">A responsive, multi-level vertical accordion.</p>
</main>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
I want to add search box to my navbar but not as the traditional way as appears in the picture , I want to add a search icon button in the navbar only and when user click on it the search box appears under the search icon .
How can i do this any one can help me please ?
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Brand</a>
</div>
<div class="collapse navbar-collapse" >
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Contact US</li>
<li class="dropdown">
Who we are <b class="caret"></b>
<ul class="dropdown-menu">
<li>About</li>
<li> Mession</li>
<li> Vision</li>
<li class="divider"></li>
<li>Goals</li>
</ul>
</li>
<li>Publications</li>
<li>Media</li>
<li>Partners</li>
</ul>
There are lot of things on the net e.g https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_anim_search
Run below code:
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('https://www.w3schools.com/howto/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
</style>
</head>
<body>
<p>Animated search form:</p>
<form>
<input type="text" name="search" placeholder="Search..">
</form>
</body>
</html>
You can try these snippets.
Solutuion with CSS Only:
.hide
{
opacity: 0;
max-height: 0;
}
#trigger {
position: absolute;
left: -999em;
}
#container input[type="checkbox"]:checked + div
{
max-height: 99em;
opacity: 1;
height: auto;
overflow: hidden;
}
<div id="container">
<label for="trigger">click me for Search</label>
<input type="checkbox" id="trigger">
<div class="hide">
<form>
<input type="text" name="search" placeholder="Search..">
</form>
</div>
<div>
Solution with JS:
function myFunction() {
if (document.getElementById("form").style.display === "none") {
document.getElementById("form").style.display = "block";
} else {
document.getElementById("form").style.display = "none";
}
}
button {
width: 50px;
height: 50px;
}
<p>show and hide search</p>
<button onclick="myFunction()"></button>
<form id="form">
<input type="text" name="search" placeholder="Search..">
</form>
My current accordion functionality is when we click on '+' sign it opens the accordion and leaves it open even though we click on the '+' sign of other accordion.
What i need is on click of one accordion other open accordions should close.
Below is my Codepen link.
<aside class="col-md-4">
<section class="sidebar-tools">
<h4 class="my-4">My</h4>
<nav>
<a class="tile-link" data-toggle="collapse" href="#myDoctor">
My
</a>
<div class="collapse sidebar-collapse" id="myDoctor">
Viewr
Change
</div>
<a class="tile-link" data-toggle="collapse" href="#IDcards"> Cards</a>
<div class="collapse sidebar-collapse" id="IDcards">
View
Change
</div>
<a class="tile-link" href="#">nformation</a>
<a class="tile-link" href="#"> Estimator</a>
</nav>
<h4 class="my-4">My Tools</h4>
<nav>
<a class="tile-link" href="#">Cards</a>
<a class="tile-link" href="#">Enformation</a>
<a class="tile-link" href="#"> Estimator</a>
</nav>
</section>
</aside>
Thanks
CodePen
You can achieve this by using data-parent to your link, here is the snippet with your code
var $myGroup = $('#myGroup');
$myGroup.on('show.bs.collapse','.collapse', function() {
$myGroup.find('.collapse.in').collapse('hide');
});
.sidebar-tools a {
color: white;
}
a.tile-link {
text-decoration: none;
}
.tile-link {
-js-display: flex;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #2980b9;
padding: 10px;
margin: 2px 0;
}
.tile-link:hover {
background-color: #2980b9;
}
.tile-link[data-toggle]:after {
content: '\f067';
font-family: 'fontawesome';
transition: all .25s ease-in-out;
float: right;
}
.tile-link[aria-expanded="true"]:after {
transform: rotate(45deg);
}
.sidebar-collapse {
background-color: #95a5a6;
margin-top: -2px;
}
.sidebar-collapse .sidebar-collapse-link {
color: white;
display: block;
padding: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/2.0.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.0.4/js/bootstrap.min.js"></script>
<aside class="col-md-4" id="myGroup">
<section class="sidebar-tools">
<h4 class="my-4">My</h4>
<nav>
<a class="tile-link" data-toggle="collapse" href="#myDoctor" data-parent="#myGroup">
My
</a>
<div class="collapse sidebar-collapse" id="myDoctor">
Viewr
Change
</div>
<a class="tile-link" data-toggle="collapse" data-parent="#myGroup" href="#IDcards"> Cards</a>
<div class="collapse sidebar-collapse" id="IDcards">
View
Change
</div>
<a class="tile-link" href="#">nformation</a>
<a class="tile-link" href="#"> Estimator</a>
</nav>
<h4 class="my-4">My Tools</h4>
<nav>
<a class="tile-link" href="#">Cards</a>
<a class="tile-link" href="#">Enformation</a>
<a class="tile-link" href="#"> Estimator</a>
</nav>
I want set my carousel in the middle of the page with a white border attached to it. But I'm unable to do it. I used padding but the border is not adjusting with the carousel. If I reduce a little more the padding then the carousel arrows is not shifting with carousel.
Here is my html file code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Carousel Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/prefixfree.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse">
<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="#featured"><h1>Carousel <span class="subhead">Practice</span></h1></a>
</div><!-- navbar-header -->
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Mission</li>
<li>Services</li>
<li>Staff</li>
<li>Testimonials</li>
</ul>
</div><!-- collapse navbar-collapse -->
</div><!-- container -->
</nav>
<div class="container wrapping">
<div class="carousel slide" data-ride="carousel" id="featured">
<div class="carousel-inner">
<div class="item active"><img src="images/carousel-lifestyle.jpg" alt="Lifestyle Photo"></div>
<div class="item"><img src="images/carousel-mission.jpg" alt="Mission"></div>
<div class="item"><img src="images/carousel-vaccinations.jpg" alt="Vaccinations"></div>
<div class="item"><img src="images/carousel-fish.jpg" alt="Fish"></div>
<div class="item"><img src="images/carousel-exoticanimals.jpg" alt="Exotic Animals"></div>
</div><!-- carousel-inner -->
<a class="left carousel-control" href="#featured" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#featured" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div><!-- featured carousel -->
</header>
<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.1/js/bootstrap.min.js"></script>
<script src="js/myscript.js"></script>
</body>
</html>
This is my css:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800|Roboto+Slab:400,100,300,700);
/** Basic Page CSS **/
body{
font-family: "Roboto Slab", sans-serif;
font-weight: 300;
font-size: 2em;
position: relative;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Open Sans", sans-serif;
font-weight: 100;
margin: 0;
}
header{
background-color: #00173f;
}
.carousel-inner{
padding: 150px 30px 100px 30px;
border: 15px solid #fff; border-radius: 5px;
}
/** Header Navigation **/
header .navbar {
padding: 30px 0;
transition: all .5s ease-out;
}
header .navbar-default {
background-color: transparent;
border: none;
}
header .navbar-default .navbar-nav a {
color: white;
padding: 5px 8px;
}
header .navbar-default .navbar-nav a:hover {
color: #EEC856;
}
header .navbar-default .navbar-nav .active a {
font-weight: 700;
color: #EEC856;
background: transparent;
border-bottom: 4px solid #EEC856;
text-shadow: none;
}
header .navbar-default .navbar-nav .active a:hover {
color: #E15D5F;
background: transparent;
text-shadow: none;
}
/** Navbar Brand **/
header .navbar-brand {
background: url(../images/wisdompetlogo.svg);
background-repeat: no-repeat;
background-position: 15px 0;
height: auto;
}
header .navbar-brand h1 {
color: white;
margin: 0;
font-size: 1.8em;
font-weight: 400;
padding-left: 105px;
}
header .navbar-brand span.subhead {
display: block;
font-family: "Roboto Slab", serif;
font-size: .6em;
font-weight: 100;
}
/** Navbar Toggle **/
header .navbar-toggle {
background-color: #279182;
}
header .navbar-default .navbar-toggle .icon-bar {
background-color: white;
}
#media only screen
and (max-width: 768px) {
header .navbar-collapse.in {
background-color: rgba(0,0,0, .5);
}
}
This is one of my images link: https://www.google.co.in/search?q=wisdom+pet+medicine&espv=2&biw=1280&bih=614&source=lnms&tbm=isch&sa=X&sqi=2&ved=0ahUKEwiejtTiqs7PAhWBPo8KHXsbDlwQ_AUIBigB&dpr=1.5#imgrc=uU4osiOZHZGu9M%3A
I'm not entirely sure if your problem is the border, the positioning, or both.
You have your carousel wrapped in your header. This might prevent it from being positioned in the middle of your page. If you want it to be in its own section I would put it in a container-fluid div class and add styling as desired.
enter image description hereI'm trying to have an information panel with three different columns using bootstrap 3. I've nested the columns properly, I think, but the panels are hidden beneath the main row and I can't find a way to reveal it.
it's showing that the container is there, but you can't see it
<div class="row creative_line">
<div class="col-md-12">
<h2 class="text-center">Smart & Creative<br><p>This is why you will use it</p></h2>
</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-4 multi">
<div class="img-circle">
</div>
</div>
<div class="col-md-4 ui">
<div class="img-circle">
</div>
</div>
<div class="col-md-4 design">
<div class="img-circle">
</div>
</div>
</div>
</div>
</div>
This is my current css
.creative_line {
background: yellow;
min-height: 300px;
color: $primary-color;
font-family: $font-stack;
}
.creative_line p {
color: $primary-color;
font-family: $font-stack2;
font-size: 35%;
margin-top: 10px;
}
h2 {
font-size: 40px;
}
.img-circle {
-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
background: red;
}
.multi,
.ui,
.design {
min-height: 300px;
color: blue;
z-index: 1;
}