Bootstrap collapse not working properly...Bootstrap right side white space - html

First Question
Bootstrap collapse not working when i check responsive...but when i resize my browser it works but still there is a prblem i dont want it to collapsed next to navbar brand...it must be under it
collapseImg
<!DOCTYPE html>
<html>
<head>
<title>Company Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="Bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="Font Awesome/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="Flex Slider/flexslider.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" id="mainNav">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="navbar-header pull-left">
Lorem
</div>
<button type="button" class="navbar-toggle btn navbar-btn" data-toggle="collapse" data-target="#navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-collapse collapse" id="navigation">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
whiteSpaceImg
Second questioin is about white space on right side
<!-- SLIDER -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="flexslider" id="slider">
<ul class="slides">
<li id="slide1"><video id="myVideo" src="./videos/myVideo.mp4" style="width:100%;"></video></li>
<li id="slide2"><img src="Images/Slider Images/image1.jpg"></li>
<li id="slide3"><img src="Images/Slider Images/image2.jpg"></li>
<li id="slide4"><img src="Images/Slider Images/"></li>
<li id="slide4"><img src="Images/Slider Images/"></li>
</ul>
</div>
</div>
</div>
</div>
/----- NAVIGATION ----/
html{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
#mainNav{
background:transparent;
border: none;
overflow:hidden !important;
}
.navbar-default a{
color: white !important;
transition: color 0.5s;
font-weight: bolder;
}
.navbar-default a:hover{
color: black !important;
}
#slider{
border: none;
margin: 0px !important;
}
/* ---- HEADER -----*/
#slider img{
height: 100vh;
width: 100%;'
}
.col-sm-12{
padding-left:0 !important;
padding-right:0 !important;
}

Related

Remove animation jump when collapsing

Menu have little jump before and after collapse. I tried fix it with margins but didnt worked. I used bootstrap. I want to remove this and make animation smooth.
Here the header html code:
<header>
<div>
<nav class="navbar bg-lightt navbar-expand-xxlg">
<div class="navbar navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav mx-auto">
<li class="nav-link">Projects</li>
<li class="nav-link">About</li>
<li class="nav-link">Contact</li>
</ul>
</div>
<div class="mx-auto">
<button class="navbar-toggler collapsed" data-bs-toggle="collapse" data-bs-target="#navbar">
<span class="menu-button">MENU</span>
</button>
</div>
</nav>
</div>
</header>
To see that jump add css or animation .collapsing:
.collapsing
{
transition-property: height, visibility;
transition-duration: 1s;
}
.nav.navbar-nav.nav li a
{
font-size: 12px;
margin-top: auto;
color: black;
}
.navbar-toggler,
.navbar-toggler-icon,
.navbar-toggler:active,
.navbar-toggler:focus
{
outline: none;
box-shadow: none;
border: none;
margin: none;
}

You can check this code
.collapsing
{
transition-property: height, visibility;
transition-duration: 1s;
}
.nav.navbar-nav.nav li a
{
font-size: 12px;
margin-top: auto;
color: black;
}
.navbar-toggler,
.navbar-toggler-icon,
.navbar-toggler:active,
.navbar-toggler:focus
{
outline: none;
box-shadow: none;
border: none;
margin: none;
}
.navbar-collapse{
padding: 0 !important;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Work+Sans:300i,400,400i,600,600i,700,700i,800&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
</head>
<body>
<header>
<div>
<nav class="navbar bg-lightt navbar-expand-xxlg">
<div class="navbar navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav mx-auto">
<li class="nav-link">Projects</li>
<li class="nav-link">About</li>
<li class="nav-link">Contact</li>
</ul>
</div>
<div class="mx-auto">
<button class="navbar-toggler collapsed" data-toggle="collapse" data-target="#navbar">
<span class="menu-button">MENU</span>
</button>
</div>
</nav>
</div>
</header>
</body>

Bootstrap icon-bar span not visible

I am working on a project and while doing the header I cannot find a reason why the span icon-bar in a button for dropdown is not showing have a look:
Here is the html for the code you have to look for the third div in the row which is the div with two buttons inside it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<meta charset="UTF-8">
<title>SoftHouse</title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="container">
<div class="row">
<div class="navbar-header col-lg-4">
<span class="wb"><span class="big">S</span>OFT</span><span class="big">H</span>OUSE
</div>
<div class="nav-container col-lg-4">
<ul class="nav nav-justified">
<li>What</li>
<li>Work</li>
<li>About</li>
</ul>
</div>
<div class="col-lg-4" style="text-align: center;">
<button class="btn btn-sm">CONTACT</button>
<button>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
</div>
</nav>
</div>
</body>
</html>
Here is the css
body
{
margin:0;
padding:0;
}
.navbar-default{
border-radius: 0;
background-color: white;
}
.wb
{
font-weight:bold;
}
.big
{
font-size: 25px;
}
.navbar-header .navbar-brand
{
font-size: 17px;
}
.icon-bar
{
background-color: red;
color:red;
}
.nav-justified
{
line-height: 52px;
}

You can add only bootstrap button class for toggle icon bar same as below:
see Updated demo
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="Your class">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
CSS:
.btn-group-sm>.btn, .btn-sm {
float: none;
}
.navbar-toggle {
display: inline-block;
float: none;
}

You say: i want icon bar be show always,so can use of after , no need bootstarp icons:
Css :
.btn-sm + span:after {
content: '\2261';
margin-left: 10px;
font-size: 15px;
}
Html:
<div class="col-lg-4" style="text-align: center;">
<button class="btn btn-sm">CONTACT</button>
<span><span><--------------Added
<span class="icon-bar"></span><---------------Remove
<span class="icon-bar"></span><---------------Remove
<span class="icon-bar"></span><---------------Remove
</div>
body
{
margin:0;
padding:0;
}
.navbar-default{
border-radius: 0;
background-color: white;
}
.wb
{
font-weight:bold;
}
.big
{
font-size: 25px;
}
.navbar-header .navbar-brand
{
font-size: 17px;
}
.icon-bar
{
background-color: red;
color:red;
}
.nav-justified
{
line-height: 52px;
}
.btn-sm + span {
border:1px solid #ccc;
text-align:center;
padding:5px 10px;
cursor:pointer;
}
.btn-sm + span:hover {
background-color:#ccc;
}
.btn-sm + span:after {
content: '\2261';
font-size: 15px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<nav class="navbar navbar-default">
<div class="container">
<div class="row">
<div class="navbar-header col-lg-4">
<span class="wb"><span class="big">S</span>OFT</span><span class="big">H</span>OUSE
</div>
<div class="nav-container col-lg-4">
<ul class="nav nav-justified">
<li>What</li>
<li>Work</li>
<li>About</li>
</ul>
</div>
<div class="col-lg-4" style="text-align: center;">
<button class="btn btn-sm">CONTACT</button>
<span></span>
</div>
</div>
</div>
</nav>
</div>

do this with font awesome
html code:-
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SoftHouse</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<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">
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="container">
<div class="row">
<div class="navbar-header col-lg-4">
<span class="wb"><span class="big">S</span>OFT</span><span class="big">H</span>OUSE
</div>
<div class="nav-container col-lg-4">
<ul class="nav nav-justified">
<li>What</li>
<li>Work</li>
<li>About</li>
</ul>
</div>
<div class="col-lg-4" style="text-align: center;">
<button class="btn btn-sm">CONTACT</button>
<a class="icon-bar" href="#"><i class="fa fa-caret-down"></i></a>
</div>
</div>
</div>
</nav>
</div>
</body>
</html>
in css:-
.icon-bar
{
color: red;
}

How can I put content to the right of my bootstrap nav

So I just recently started using bootstrap, and I created navigation buttons. But for some reason I can't put any content to the right of the buttons. I would like to have a section for content to the right of the buttons with a black background.
body{
overflow: hidden;
background-color: #1C213D;
}
ul li{
position: relative;
text-align: center;
list-style: none;
display: block;
color: lightsteelblue;
font-size: 20px;
padding-top: 12px;
padding-bottom: 12px;
margin-top: 200px;
}
.nav{
width: 200px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Home</title>
</head>
<body>
<div class="container-fluid">
<ul class="nav nav-pills nav-stacked" role="tablist">
<li class="active">Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>

This is a continuation to the above question. If you want to make any bottstrap design responsive i.e if you want it to look same in all screen size you should use these classes col-md-4 col-lg-4 col-sm-4 col-xs-4 together. Also I have used col-lg-offset-1 offset classes as it will create a automatic margin(margin of 1 column in this case) between your elements and the design will look good.
body{
overflow: hidden;
background-color: #1C213D;
}
ul li{
position: relative;
text-align: center;
list-style: none;
display: block;
color: lightsteelblue;
font-size: 20px;
padding-top: 12px;
padding-bottom: 12px;
margin-top: 50px;
}
.nav{
width: 200px;
}
.main{
margin-top:50px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Home</title>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4">
<ul class="nav nav-pills nav-stacked" role="tablist">
<li class="active">Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
<div class="col-md-7 col-lg-7 col-xs-7 col-sm-7 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 main">
Main content goes here
</div>
</div>
</body>
</html>
Hope this helps!

You can use col-* classes of bootstrap, assign certain columns width to your nav and certain column width to your main content.
Check the result in expanded window.
body{
overflow: hidden;
background-color: #1C213D;
}
ul li{
position: relative;
text-align: center;
list-style: none;
display: block;
color: lightsteelblue;
font-size: 20px;
padding-top: 12px;
padding-bottom: 12px;
margin-top: 50px;
}
.nav{
width: 200px;
}
.main{
margin-top:50px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Home</title>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="col-md-4">
<ul class="nav nav-pills nav-stacked" role="tablist">
<li class="active">Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
<div class="col-md-8 main">
Main content goes here
</div>
</div>
</body>
</html>

How do I make my text use the full width of the navbar in bootstrap?

I would like my text to strech the full width of the nav bar similiar to
this
It is currently like this
I am using the latest bootstrap css and also have a custom stylesheet of my own.
Here is my html code
<!doctype html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<img src="img/logo.png" id="logo" class="img-responsive">
</div>
<div class="col-md-4" id="searchbox">
<div id="search-input">
<div class="input-group col-md-12">
<input type="text" class="form-control input-lg"/>
</div>
</div>
</div>
<div class="col-md-1" id="search-button">
<span class="input-group-btn">
<button class="btn btn-info btn-lg" type="button">
<i class="glyphicon glyphicon-search"></i>
</button>
<span>
</div>
<div class="col-md-3" id="login-name">
<p> Logged in: John Smith </p>
</div>
<div class="col-md-1">
<i class="glyphicon glyphicon-cog" id="settings-cog"></i>
</div>
</div>
<div class="row">
<!-- Static navbar -->
<nav class="navbar navbar-default navbar-static-top">
<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>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Projects</li>
<li>News</li>
<li>Careers</li>
<li class="active">Contact Us</li>
<li>About Us</li>
<li>Case Studies</li>
<li>Blog</li>
<li>Customers</li>
</ul>
</div><!--/.nav-collapse -->
</nav>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</body>
</html>

Here is the example from the bootstrap-website:
/* Customize the navbar links to be fill the entire space of the .navbar */
.navbar .navbar-inner {
padding: 0;
}
.navbar .nav {
margin: 0;
display: table;
width: 100%;
}
.navbar .nav li {
display: table-cell;
width: auto;
float: none;
}
.navbar .nav li a {
font-weight: bold;
text-align: center;
border-left: 1px solid rgba(255, 255, 255, .75);
border-right: 1px solid rgba(0, 0, 0, .1);
}
.navbar .nav li:first-child a {
border-left: 0;
border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0 3px 3px 0;
}
Have you tried that one?
How that works is easy:
Set the Navbar width to 100% and apply display:table; then set the inner elements to
width: auto;
display:table-cell;

Removing space between Navigation bar and banner

I'm using Bootstrap to make my custom website but I have a problem. I have a big space between my banner and my navigation bar. I need to remove it without breaking the anything else.
I was searching for fix on this website and on other websites too, but none of those are working. Here's the code:
HTML: http://pastebin.com/FSFA4GhG CSS: http://pastebin.com/TiQ1nm9h
I figured out that the problem is in the <header> somewhere, but I cannot fix it/find that error.

You have the header set at 100px (the navbar default is min-height: 50px) and change the top property on the banner id as well to 50px
Sidenote: you have 2 separate IDs set on your navbar-collapse div causing the mobile nav to not work correctly.
See example Snippet.
body,
div,
h1,
h2,
p {
margin: 0;
padding: 0;
}
body {
text-align: left;
}
header {
height: 50px;
width: 100%;
background: #f00;
z-index: 50;
position: fixed;
display: inline-block;
padding: 0;
}
#banner {
width: 100%;
height: 500px;
position: fixed;
top: 50px;
background: #AE1;
}
#content {
width: 100%;
position: relative;
top: 400px;
background: #ebe;
height: 1000px;
}
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="container">
<header>
<nav class="navbar navbar-inverse">
<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="#">MENU</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">gg 1<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>11
</li>
<li>12
</li>
</ul>
</li>
<li>gg2
</li>
<li>gg 3
</li>
</ul>
</div>
</div>
</nav>
</header>
<div id="banner">
<h2>BANNER</h2>
</div>
<div id="content">
<p>
CONTENT
</p>
</div>
</div>

It's simple, just remove the height property from your #header and put a correctly top property on your #banner (same that your nav height):
body, div, h1, h2, p{
margin: 0;
padding: 0;
}
body{
text-align: left;
}
header{
width: 100%;
z-index: 50;
position: fixed;
display: inline-block;
}
#banner {
width: 100%;
height: 500px;
position: fixed;
top: 50px;
background: #AE1;
}
#content {
width: 100%;
position: relative;
top: 400px;
background: #ebe;
height: 1000px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fred WEB</title>
<!--Zobrazenie pre mobily-->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!--Pridanie JQuery a Boostrapu-->
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="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.5/js/bootstrap.min.js">
</script>
</head>
<body>
<div id="container">
<header>
<nav class="navbar navbar-inverse">
<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="#">MENU</a>
</div>
<div id ="menu" class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">gg 1<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>11</li>
<li>12</li>
</ul>
</li>
<li>gg2</li>
<li>gg 3</li>
</ul>
</div>
</div>
</nav>
</header>
<div id="banner">
<h2>BANNER</h2>
</div>
<div id="content">
<p>
CONTENT
</p>
</div>
</div>
</body>
</html>

try to add
nav {
margin: 0px !important;
}
And to edit banner rule
#banner {
width: 100%;
height: 500px;
position: fixed;
top: 50px;
background: #AE1;
}