Remove animation jump when collapsing - html

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>

Related

Bootstrap 4, make second column content change depending where have we scrolled on 1st column

I have 2 columns in one row, one is for main content and second one next to it is for code preview for that main content, what I want to do is that second column would switch content that I set to once I scroll down to specific part of column one. The column one in this code is the white one where the content is suppsed to be, and the dark column is where the code should be displayed dependt on where are you on white column
Edit Code:
HTML:
<!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">
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<title>Hello, world!</title>
</head>
<body>
<!-- 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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container-flex">
<!-- navbar top-->
<nav class="navbar navbar-expand-lg navbar-light bg-dark">
<a class="navbar-brand" href="index.html">IP Intelligence</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0 linknav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="input/input.html">Input</a>
</li>
<li class="nav-item">
<a class="nav-link" href="output/output.html">Output</a>
</li>
<li class="nav-item">
<a class="nav-link" href="flags/flags.html">Flags</a>
</li>
<li class="nav-item">
<a class="nav-link" href="flags/flags.html#error">Error Codes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact/contact.html">Contact</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
<div id="wrapper">
<div class="container-fluid">
<div class="row justify-content-between">
<!-- Sidebar -->
<nav class="" id="sidebar">
<ul class="list-unstyled components">
<li class="active">
Home
</li>
<li>
Input
<ul class="collapse list-unstyled" id="inputSubmenu">
<li>
Input
</li>
<li>
Optional Input Settings
</li>
</ul>
</li>
<li>
Output
<ul class="collapse list-unstyled" id="outputSubmenu">
<li>
Expected Output
</li>
<li>
Interpretation of the Results
</li>
<li>
Variations of Implementation
</li>
</ul>
</li>
<li>
Comparing Flags
</li>
<li>
Error Codes
</li>
<li>
Contact
</li>
</ul>
</nav>
<div class="container-flex d-flex content" style="width: 40%">
<div class="col">
<!--main page-->
<div class="cont">
<h1>Usage & Implementation</h1>
<h3>Web Interface</h3>
<p>The web interface allows you to quickly lookup IPs without touching any code. It is assumed that the IP you're looking up has made requests to your services on an application level. The web interface uses flags=f which requests full bad IP detection including compromised systems. If you wish to skip full bad IP detection, please use the API instead. A full lookup might take up to 5 seconds to complete because results are generated in real-time.</p>
</div>
</div>
</div>
<div class="container-flex d-flex content" style="width: 40%">
<div class="col bg-dark">
<!--Code Editor-->
<h2 class="codep">Code Preview</h2>
<div class="neapolitan"/>
<div class="code">
<code>
this is code
</code>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
/*
DEMO STYLE
*/
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
background: #fff;
border: none;
border-radius: 0;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
.stay-open {display:block !important;}
.codep {
color: #f0ad4e;
padding-top: 10px;
padding-bottom: 10px;
}
.code {
padding-top: 20px;
padding-left: 3px;
}
.neapolitan {
background:red;
position:relative;
height:1px;
content:'';
background:gray;
width:100%;
}
.cont{
padding-top: 10px;
}
.cont h3 h2 h6{
padding-top: 20px;
}
.cont p{
color: #696969;
font-size: 14px;
}
.label-default {
background-color: #777;
}
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
.cont li {
font-family: 'Poppins', sans-serif;
font-weight: 300;
line-height: 1.7em;
color: #696969;
font-size: 14px;
padding-bottom: 10px;
}
.cont ul{
padding-left: 40px;
}
.cont b{
}
.ind{
}
.cont-t{
font-size: 11px;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
#sidebar {
min-width: 250px;
max-width: 250px;
background: #343a40;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar ul.components {
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #343a40;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #f0ad4e;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #292b2c;
}
.content {
height: 1000px;
}
.linknav {
padding-left: 72px;
}
.linknav a{
display:inline;
margin-right:1.5em;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}
$('#codeSection').scroll(function(){
($('#previewCode').text($('#codeSection').text()).css('color','white'));
});
<!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">
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="lib/style.css">
<script src="lib/script.js"></script>
<title>Hello, world!</title>
</head>
<body>
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container-flex">
<!-- navbar top-->
<nav class="navbar navbar-expand-lg navbar-light bg-dark">
<a class="navbar-brand" href="index.html">IP Intelligence</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0 linknav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="input/input.html">Input</a>
</li>
<li class="nav-item">
<a class="nav-link" href="output/output.html">Output</a>
</li>
<li class="nav-item">
<a class="nav-link" href="flags/flags.html">Flags</a>
</li>
<li class="nav-item">
<a class="nav-link" href="flags/flags.html#error">Error Codes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact/contact.html">Contact</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
<div id="wrapper">
<div class="container-fluid">
<div class="row justify-content-between">
<!-- Sidebar -->
<nav class="" id="sidebar">
<ul class="list-unstyled components">
<li class="active">
Home
</li>
<li>
Input
<ul class="collapse list-unstyled" id="inputSubmenu">
<li>
Input
</li>
<li>
Optional Input Settings
</li>
</ul>
</li>
<li>
Output
<ul class="collapse list-unstyled" id="outputSubmenu">
<li>
Expected Output
</li>
<li>
Interpretation of the Results
</li>
<li>
Variations of Implementation
</li>
</ul>
</li>
<li>
Comparing Flags
</li>
<li>
Error Codes
</li>
<li>
Contact
</li>
</ul>
</nav>
<div class="container-flex d-flex content" style="width: 40%; height:120px">
<div class="col">
<!--main page-->
<div class="cont" id="codeSection" style="overflow:scroll;height:250px">
<h1>Usage & Implementation</h1>
<h3>Web Interface</h3>
<p>The web interface allows you to quickly lookup IPs without touching any code. It is assumed that the IP you're looking up has made requests to your services on an application level. The web interface uses flags=f which requests full bad IP detection including compromised systems. If you wish to skip full bad IP detection, please use the API instead. A full lookup might take up to 5 seconds to complete because results are generated in real-time.</p>
</div>
</div>
</div>
<div class="container-flex d-flex content" style="width: 40%">
<div class="col bg-dark">
<!--Code Editor-->
<h2 class="codep">Code Preview</h2>
<div class="neapolitan"/>
<div id='previewCode' class="code">
<code>
this is code
</code>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
use jquery's scroll function https://api.jquery.com/scroll/. this will trigger once you scroll your div with the code section.
for this example to work i have added an id to code section and also have done some alteration to make codesection div scrollable. (see console for message on scroll).
so on scroll you can also check page offset and can set value to preview screen as needed..

bootstrap - Why does my navbar not appear on the next line?

I am trying to create a responsive website: when resizing the window, you get the "mobile" view. So a button appears. By pushing on the button you can toggle the navigation bar (make it appear and disappear).
This website does this very well: https://blackrockdigital.github.io/startbootstrap-freelancer/
So I tried replicating this behaviour myself:
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<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">
<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>
<link rel="stylesheet" type="text/css" href="css/test.css">
</head>
<body>
<!--Navigation bar-->
<nav class="navbar navbar-custom navbar-fixed-top" id="myNavbar">
<div class="container">
<div class="navbar-brand">
<img src="images/testLogo.png">
</div>
<button class="navbar-toggler navbar-toggler-right text-uppercase bg-primary text-white rounded" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarResponsive" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right" id="ul">
<li class="active">Home</li>
<li>Services</li>
<li>Partners</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
CSS:
/**
* Navigation bar.
*/
#myNavbar
{
padding-top: 1.5rem;
padding-bottom: 2.5rem;
background-color: rgb(100, 100, 100);
}
#navbarResponsive
{
width: 65%;
}
.navbar-collapse
{
flex-basis: 100%;
flex-grow: 1;
}
.nav > li > a
{
font-size: 18px
}
.navbar-brand
{
font-size: 28px;
}
img
{
height: 70px;
width: 70px;
float: right;
margin-top:-20px;
margin-left: 20px;
}
.navbar > .container, .navbar > .container-fluid
{
display: flex;
justify-content: space-between;
}
#media (min-width: 900px)
{
.navbar-toggler
{
display:none;
}
}
.container
{
width: 100%;
}
button
{
background-color: transparent;
}
.bg-primary
{
background-color: transparent;
}
.navbar-toggler-icon
{
background-color: transparent;
display: inline-block;
width: 1.5em;
height: 1.5em;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
Everything seems ok, but when pushing the button the navigation bar (Home - Services - Partners - Contact) does not appear on the next line but rather on the same line and everything gets shifted to the left: https://imgur.com/a/8JU2oKT
Could someone tell me why the navigation bar is not displayed on the next line?
From a quick glance at your code the css seems not to be the problem, rather the placement of your div's. Try to replace the HTML to this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<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">
<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>
<link rel="stylesheet" type="text/css" href="css/test.css">
</head>
<body>
<!--Navigation bar-->
<nav class="navbar navbar-custom navbar-fixed-top" id="myNavbar">
<div class="container">
<div class="navbar-brand">
<img src="images/testLogo.png">
</div>
<button class="navbar-toggler navbar-toggler-right text-uppercase bg-primary text-white rounded" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div id="navbarResponsive" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right" id="ul">
<li class="active">Home</li>
<li>Services</li>
<li>Partners</li>
<li>Contact</li>
</ul>
</div>
</nav>
</body>
</html>
I replaced the div with the actual menu inside, outside of the container div but still inside the nav.
Try this code;
HTML
<!-- .navbar -->
<nav class="navbar navbar-full navbar-dark bg-primary">
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#mainNavbarCollapse">
☰
</button>
<a class="navbar-brand" href="#">
<img class="img-rounded" src="images/testLogo.png">
</a>
<div class="collapse navbar-toggleable-md" id="mainNavbarCollapse">
<ul class="nav navbar-nav pull-lg-right">
<li class="nav-item">
<a class="nav-link" href="main.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="projects.html">Partners</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- /.navbar -->
CSS
#media (max-width: 62em) {
.navbar-nav {
padding-top: .425rem;
padding-left: 0.75rem;
}
.navbar-nav .nav-item {
float: none;
}
.navbar-brand {
float: right;
}
.navbar-brand,
.navbar-nav .nav-item {
display: block;
}
.navbar-nav .nav-item + .nav-item {
margin-left: 0;
}
.dropdown-menu {
position: relative;
float: none;
}
}

How can I change the Navbar button color

I wanted to custom my navbar with different colors, but I could only manage o change the background color successfully. Whenever I try to change other attributes, it simply won't work - it will simply use the default dark grey.
I'm goal is to use:
background color : #97caca
:active background color : #6dafad
default color : #fff
:active and hoover color : #d4e1e3
https://jsfiddle.net/zfv61Lmu/7/
body {
height: 100%;
padding-top: 50px;
}
section {
height: calc(90% - 50px);
}
.nav .active {
background: #6dafad!important;
}
.navbar-inverse .navbar-nav li.active a {
background-color: #6dafad;
}
.affix {
padding: 0px;
-webkit-transition: padding 0.2s linear;
-moz-transition: padding 0.2s linear;
-o-transition: padding 0.2s linear;
transition: padding 0.2s linear;
}
.affix-top {
padding-top: 15px;
padding-bottom: 15px;
-webkit-transition: padding 0.5s linear;
-moz-transition: padding 0.5s linear;
-o-transition: padding 0.5s linear;
transition: padding 0.5s linear;
}
.navbar-brand {
padding: 0px;
margin: 0px;
max-height: 50px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.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>
<div id="wrap">
<div class="navbar navbar-inverse navbar-fixed-top" style="background-color: #d1e6c5; color: #fff; border-color: transparent;">
<div class="container">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-right">
<li><span class="glyphicon glyphicon-globe"></span></li>
<li class="divider-vertical"></li>
<li>PT</li>
<li class="divider-vertical"></li>
<li>EN</li>
<li class="divider-vertical"></li>
<li>FR</li>
<li class="divider-vertical"></li>
<li>DE</li>
</ul>
</div>
</div>
</div>
<div class="navbar navbar-inverse navbar-light" style="background-color: #97CACA; color: #fff; border-color: transparent;" data-spy="affix" data-offset-top="100">
<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 navbar-fixed-top" href="#"><img class="img-responsive logo" width="300" height="300" src="https://ibb.co/ejwDtS" alt=""></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Sobre Nós</li>
<li class="dropdown">
Serviços <b class="caret"></b>
<ul class="dropdown-menu" role="menu">
<li>Bebés e Crianças</li>
<li>Adultos e Séniores</li>
<li>Empresas</li>
</ul>
</li>
<li>Contactos</li>
</ul>
</div>
</div>
</div>
</div>
Also, how can I cut the height by half on the fist navbar? It is too thick. I wanted it to be thinner thus it will only be used to change the language. (also, why isn't the glyphicon align?).
I have added a class to the top navbar: navbar-top.
I've also used child selector (>).
Try to avoid using !important in css.
body {
height:100%;
padding-top:50px;
}
section {
height:calc(90% - 50px);
}
.affix {
padding:0px;
-webkit-transition:padding 0.2s linear;
-moz-transition:padding 0.2s linear;
-o-transition:padding 0.2s linear;
transition:padding 0.2s linear;
}
.affix-top {
padding-top:15px;
padding-bottom:15px;
-webkit-transition:padding 0.5s linear;
-moz-transition:padding 0.5s linear;
-o-transition:padding 0.5s linear;
transition:padding 0.5s linear;
}
.navbar.navbar-top {
background: #d1e6c5;
color: #fff;
border-color: transparent;
}
.navbar.navbar-top li a:link,
.navbar.navbar-top li a:visited {
color: #fff;
}
.navbar.navbar-inverse.navbar-light {
background-color: #97CACA;
color: #fff;
border-color: transparent;
}
.navbar-brand {
padding: 0px;
margin: 0px;
max-height: 50px;
}
.nav.navbar-nav.navbar-right > li.active > a {
background: #6dafad;
color: #d4e1e3;
}
.nav.navbar-nav.navbar-right a:hover {
color: #d4e1e3;
}
<!DOCTYPE html>
<html lang="pt">
<head>
<title>navbar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.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>
</head>
<body>
<!--/ INICIO cabeçalho <-->
<div id="wrap">
<div class="navbar navbar-inverse navbar-fixed-top navbar-top">
<div class="container">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-right">
<li>
<span class="glyphicon glyphicon-globe"></span>
</li>
<li class="divider-vertical"></li>
<li>PT</li>
<li class="divider-vertical"></li>
<li>EN</li>
<li class="divider-vertical"></li>
<li>FR</li>
<li class="divider-vertical"></li>
<li>DE</li>
</ul>
</div>
</div>
</div>
<div class="navbar navbar-inverse navbar-light" data-spy="affix" data-offset-top="100">
<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 navbar-fixed-top" href="#"><img class="img-responsive logo" width="300" height="300" src="img/logo.png" alt=""></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Sobre Nós</li>
<li class="dropdown">
Serviços <b class="caret"></b>
<ul class="dropdown-menu" role="menu">
<li>Bebés e Crianças</li>
<li>Adultos e Séniores</li>
<li>Empresas</li>
</ul>
</li>
<li>Contactos</li>
</ul>
</div>
</div>
</div>
</div>
<!--/ FIM cabeçalho <-->
</body>
</html>
I've edited the other post.
Try this one:
I have added a class to the top navbar: navbar-top. I've also used child selector (>). Try to avoid using !important in css.
body {
height:100%;
padding-top:50px;
}
section {
height:calc(90% - 50px);
}
.affix {
padding:0px;
-webkit-transition:padding 0.2s linear;
-moz-transition:padding 0.2s linear;
-o-transition:padding 0.2s linear;
transition:padding 0.2s linear;
}
.affix-top {
padding-top:15px;
padding-bottom:15px;
-webkit-transition:padding 0.5s linear;
-moz-transition:padding 0.5s linear;
-o-transition:padding 0.5s linear;
transition:padding 0.5s linear;
}
.navbar.navbar-top {
background: #d1e6c5;
color: #fff;
border-color: transparent;
}
.navbar.navbar-top li a:link,
.navbar.navbar-top li a:visited {
color: #fff;
}
.navbar.navbar-inverse.navbar-light {
background-color: #97CACA;
color: #fff;
border-color: transparent;
}
.navbar-brand {
padding: 0px;
margin: 0px;
max-height: 50px;
}
.nav.navbar-nav.navbar-right > li.active > a {
background: #6dafad;
color: #d4e1e3;
}
.nav.navbar-nav.navbar-right a:hover {
color: #d4e1e3;
}
<!DOCTYPE html>
<html lang="pt">
<head>
<title>navbar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.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>
</head>
<body>
<!--/ INICIO cabeçalho <-->
<div id="wrap">
<div class="navbar navbar-inverse navbar-fixed-top navbar-top">
<div class="container">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-right">
<li>
<span class="glyphicon glyphicon-globe"></span>
</li>
<li class="divider-vertical"></li>
<li>PT</li>
<li class="divider-vertical"></li>
<li>EN</li>
<li class="divider-vertical"></li>
<li>FR</li>
<li class="divider-vertical"></li>
<li>DE</li>
</ul>
</div>
</div>
</div>
<div class="navbar navbar-inverse navbar-light" data-spy="affix" data-offset-top="100">
<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 navbar-fixed-top" href="#"><img class="img-responsive logo" width="300" height="300" src="img/logo.png" alt=""></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Sobre Nós</li>
<li class="dropdown">
Serviços <b class="caret"></b>
<ul class="dropdown-menu" role="menu">
<li>Bebés e Crianças</li>
<li>Adultos e Séniores</li>
<li>Empresas</li>
</ul>
</li>
<li>Contactos</li>
</ul>
</div>
</div>
</div>
</div>
<!--/ FIM cabeçalho <-->
</body>
</html>
Ok, so I managed to change the colors with:
.navbar-inverse .navbar-nav li.active a{
background-color: #6dafad;
color: #fff;
border-radius:
margin: 0 0.25em;
}
.navbar-inverse .navbar-nav > li > a {
color: #ffffff;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
color: #d4e1e3;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
color: #d4e1e3;
background-color: #6dafad;
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
color: #d4e1e3;
background-color: #6dafad;
}

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

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;
}

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;