I found a code for the sticky navbar on this site, I copied the code and tried to run on my laravel blade file. Following is the complete code.output comes like
I copied the code in following way.
CSS
JS
HTML
please let me know what to do, I am beginner and trying to learn. Thank you
This code not working with Bootstrap 4. Use the correct CSS and JS link.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.image {
background-color: #490D40;
background: url(https://sonorangirl.github.io/Earth-Quotes/img/google-earth-view-South-Iceland3.jpg) no-repeat center center;
background-size: cover;
height: 570px;
margin-top: -20px;
}
.image .heading {
color: white;
text-align: center;
padding-top: 200px;
}
.image p {
text-align: center;
padding: 20px 60px;
}
.image p .btn {
background-color: transparent;
color: white;
border: 1px solid white;
padding: 10px;
font-size: 1.2em;
}
.image p .btn:hover {
color: #C57ED3;
border-color: #C57ED3;
}
.navbar {
height: 80px;
background-color: transparent;
border: none;
color: white;
z-index: 100;
transition: background-color 1s ease 0s;
}
.navbar-default .navbar-brand {
margin-top: 10px;
color: white;
}
.navbar-default .navbar-brand:hover {
color: #C57ED3;
border: 1px solid #C57ED3;
}
.navbar-default .navbar-nav > li > a {
color: white !important;
margin: 10px 5px 5px 5px;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:active, .navbar-default .navbar-nav > li > a:focus {
color: #C57ED3;
border: 1px solid #C57ED3;
}
.navbar-default .navbar-nav > li > a:visited {
color: #C57ED3;
text-decoration: none;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
background-color: transparent;
color: #C57ED3;
}
.navbar-default .navbar-toggle {
border-color: #C57ED3;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #490D40;
}
.navbar-default .navbar-toggle .icon-bar {
color: #C57ED3;
background-color: #C57ED3;
}
.navbar-default .navbar-collapse.collapse.in ul {
background-color: #490D40;
}
/* Solid class attached on scroll past first section */
.navbar.solid {
background-color: #490D40;
transition: background-color 1s ease 0s;
box-shadow: 0 0 4px grey;
}
.navbar.solid .navbar-brand {
color: #C57ED3;
transition: color 1s ease 0s;
}
.navbar.solid .navbar-nav > li > a {
color: #C57ED3 !important;
transition: color 1s ease 0s;
}
.about {
background-color: #C57ED3;
color: #490D40;
height: 600px;
text-align: center;
margin-top: -20px;
min-height: 200vh;
}
.about h2 {
padding-top: 220px;
}
.about p {
padding: 20px 80px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Transparent to Solid Nav</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Link</li>
<li>Another Link</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="image">
<h1 class="heading">Main Heading</h1>
<p><button class="btn btn-large">Big Button</button></p>
</div>
<div class="about">
<h2>Main Description</h2>
<p>Roll on the floor purring your whiskers off intrigued by the shower burrow under covers, and play time, rub face on everything, intently sniff hand, or pelt around the house and up and down stairs chasing phantoms. Attack feet. Damn that dog shake treat bag under the bed drink water out of the faucet for lick butt love to play with owner's hair tie. Swat at dog give attitude.</p>
</div>
</body>
<script>
$(document).ready(function() {
// Transition effect for navbar
$(window).scroll(function() {
// checks if window is scrolled more than 500px, adds/removes solid class
if($(this).scrollTop() > 500) {
$('.navbar').addClass('solid');
} else {
$('.navbar').removeClass('solid');
}
});
});
</script>
</html>
min-height: 200vh; by .about class is optional for testing.
Related
The snippet isnt working but my question is for some reason the navbar on resizing the browser does not look the same as when it is viewed in the mobile phone and I am not sure why I am using media queries, attached are photos.
Desktop version of navbar
On an iphone 6
.navbar-default .navbar-nav > li > a:hover {
text-decoration: none;
color: #0064a4;
}
.navbar {
border-radius: 0;
padding: 10px 0;
margin: 0px;
}
.navbar-brand {
height: 70px;
padding: 0 0 0 20px;
}
.navbar-collapse {
padding-left: 20px;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
}
#navbar5 {
font-family: 'Oswald', sans-serif;
margin: 0;
float: right;
background-color: #00a7d7;
}
.navbar-default {
background-color: #00a7d7;
border: none;
}
.navbar-default .navbar-nav > li > a {
color: #fff;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #0064a4;
background-color: transparent;
}
.navbar-toggle {
/* padding:13px 10px; */
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #0096C1;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
background-color: #00a7d7;
color: #0064a4;
}
ul.dropdown-menu {
background-color: #00a7d7;
border: none;
box-shadow: none;
}
ul.dropdown-menu a {
color: #fff;
}
#media (min-width: 992px) {
.anon>.col-md-offset-0 {
margin: 0 12%;
}
.navbar-brand img {
width: 75px;
}
}
#media (max-width: 991px) {
.navbar-brand img {
width: 120px;
}
body {
padding-top: 89px;
}
.navbar-header {
float: none;
height: 120px;
}
.navbar-toggle {
display: block;
}
.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 {
font-size: 50px;
line-height: 50px;
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
.navbar-default .navbar-toggle .icon-bar {
width: 40px;
height: 4px;
margin: 8px 0;
}
.navbar-toggle {
padding: 20px;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="example5">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar5">
<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="index.html">
<img src="img/logo.png" alt="cophyright logo">
</a>
</div>
<div id="navbar5" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">ABOUT
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="copyright.html">
COPYRIGHT
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>WHAT IS COPYRIGHT?
</li>
<li>WORKS INCLUDED
</li>
<li>WORKS EXCLUDED
</li>
<li>COPYRIGHTS
</li>
<li>LIMITATIONS
</li>
<li>OWNERSHIP
</li>
<li>TERM OF PROTECTION
</li>
</ul>
</li>
<li>PROTECTION
</li>
<li>CONTACT US
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
I think bootstrap.min.css overwrite your custom css. So call this sequence: First call bootstrap then custom.css
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https:custom.css" rel="stylesheet" />
I want to be able to center my nav bar on the screen . for the nav bar i created a list. i tried using a table element, however than i would lose my links. My goal for this is just to have the nav bar to be centered under the logo.
font-size: 48px;
}
.img {
text-align: center;
}
.table {
/*display: table; Allow the centering to work */
margin: 0 auto;
}
ul#horizontal-list {
min-width: 100%;
list-style: none;
padding-top: 20px;
}
ul#horizontal-list li {
display: inline;
}
.logo {
/* top: 200px;*/
position: relative;
text-align: center;
}
ul {
float: center;
position: relative;
text-align: center;
/*margin-left: auto;
margin-right: auto;*/
list-style-type: none;
margin: 0;
padding: 0;
/* overflow: hidden;*/
background-color: white;
z-index: -2;
}
li {
float: left;
border-top:3px solid #C5908E;
border-bottom:3px solid #C5908E;
padding: 5px;
}
li:first-child {
border-left: 3px solid #C5908E;
}
li:last-child {
border-right: 3px solid #C5908E;
}
/*to change font */
li a {
text-align: center;
display: inline;
color: #484846;
font-size: 30px;
font-family: 'Poiret One', cursive;
padding: 5px ;
text-decoration: none;
}
.links a:link {color:#484846; background-color:transparent; text-decoration:none}
.links a:visited {color:#484846; background-color:transparent; text-decoration:none}
.links a:hover {color:#C5908E; background-color:transparent; text-decoration:none}
.links a:active {color:#484846; background-color:transparent; text-decoration:none}
.wrapper {
/*padding: 20px;*/
text-align: center;
}
</style>
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
<style>
#font-face {
font-family: 'Poiret One', cursive;
<div class= "title">
</div>
<title>
Kristin Fincken
</title>
</div>
</head>
<body>
</div>
<div class="wrapper">
<br>
<div class="logo">
<img src="images/logo.png" usemap="#rec">
</div>
</div>
<br>
<br>
<br>
<div class ="links" >
<div class="table">
<ul id="horizontal-list">
<li><a href="html/design.html" >Design </a></li>
<li> Photo </li>
<li>Web</li>
<li>Words</li>
</font>
</ul>
</div>
</div>
</body>
</html>
Don't use a table for that. Look at this http://codepen.io/mlegg10/pen/EZdxbd
You should also validate your code for all your errors https://validator.w3.org/nu/
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
// Highlight the top nav as scrolling occurs
$('body').scrollspy({
target: '.navbar-fixed-top'
})
// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a').click(function() {
$('.navbar-toggle:visible').click();
});
.navbar-default .navbar-brand {
font-family: 'Poiret One', cursive;
color: #1ee2e7;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:active,
.navbar-default .navbar-brand.active {
color: #fec503;
}
.navbar-default .navbar-collapse {
border-color: rgba(255,255,255,.02);
}
.navbar-default .navbar-toggle {
border-color: #1ee2e7;
background-color: #1ee2e7;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #1ee2e7;
}
.navbar-default .nav li a {
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 400;
letter-spacing: 1px;
color: #fff;
}
.navbar-default .nav li a:hover,
.navbar-default .nav li a:focus {
outline: 0;
color: #1ee2e7;
}
.navbar-default .navbar-nav>.active>a {
border-radius: 0;
color: #fff;
background-color: #1ee2e7;
}
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
color: #fff;
background-color: #17d0d5;
}
#media(min-width:768px) {
.navbar-default {
padding: 25px 0;
border: 0;
background-color: transparent;
-webkit-transition: padding .3s;
-moz-transition: padding .3s;
transition: padding .3s;
}
.navbar-default .navbar-brand {
font-size: 2em;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.navbar-default .navbar-nav>.active>a {
border-radius: 3px;
}
.navbar-default.navbar-shrink {
padding: 10px 0;
background-color: #222;
}
.navbar-default.navbar-shrink .navbar-brand {
font-size: 1.5em;
}
}
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top navbar-shrink">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<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 page-scroll" href="#page-top">Kristin Fincken</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden active">
</li>
<li class="">
<a class="page-scroll" href="design.html">Design</a>
</li>
<li class="">
<a class="page-scroll" href="photos.html">Photos</a>
</li>
<li class="">
<a class="page-scroll" href="web.html">Web</a>
</li>
<li class="">
<a class="page-scroll" href="words.html">Words</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
I'm currently working with a bootstrap navbar but i want to style my dropdown,
I have a "Hamburger" styled dropdown button and my current dropdown looks like this: http://prntscr.com/ctocj2 What i need to do is to style the dropdown. What i'm trying to accomplish is this
body {
margin: 0;
padding: 0;
background-color: lightgrey;
}
.navbar-default {
font-family: "Arial Rounded MT";
font-weight: bold;
font-size: 20px;
position: relative;
background-color: white;
box-shadow: 20px;
padding: 30px;
border: none;
}
.navbar-header {
right: auto;
}
.navbar-nav > li {} .navbar-default .navbar-brand,
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: black;
font-size: 30px;
}
.navbar-default .navbar-nav > li > a {
color: #3E6AAF;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #0042a5;
opacity: 0.5;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #3E6AAF;
background-color: transparent;
}
.navbar-default .navbar-text {
color: #FFF;
}
.navbar-default .navbar-toggle {
background-color: transparant;
border: none;
}
.navbar-toggle .icon-bar {
height: 8px;
width: 50px;
border-radius: 10px;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: ;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #3E6AAF;
border: none;
}
.col-md-5 {
font-family: "Lato-Bold";
padding: 10px;
color: white;
font-size: 20px;
}
.col-md-12 {
font-family: "Lato-Bold";
height: 520px;
padding: 10px;
color: white;
}
.navbar-collapse {
border: 0px;
}
.navbar-default .navbar-collapse {
color: #e7e7e7;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: transparent;
box-shadow: none;
}
.dropdown-menu {
background-color: transparent;
;
text-decoration-color: black;
}
.dropdown-toggle {
background-color: transparent;
color: black;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a,
.navbar-default .navbar-nav .open .dropdown-menu {
background-color: black;
color: white;
}
.navbar-right {
padding-right: 100px;
}
.navbar-brand {
position: relative;
right: 15%;
display: block;
padding-top: -100px;
width: 50%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Niet beschikbaar</title>
<link rel="shortcut icon" href="img/favicon2.ico" type="image/x-icon">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script>
</head>
<body>
<!-- NAVIGATIE BALK -->
<nav class="navbar navbar-default" role="navigation">
<!-- logo -->
<div class="navbar-header">
<!-- -->
<a class="pull-right navbar-brand" href="#">
<img src="img/LOGOBIRSKEN2.svg"/>
</a>
<button type="button" class="pull-left navbar-toggle" data-toggle="collapse" data-target="#mainnavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="mainnavbar">
<ul class="nav navbar-nav">
<li class="active">home</li>
<li>over</li>
<li>diensten</li>
<li>contact</li>
</ul>
</div>
</nav>
<div class="container-fluid">
</div>
I hope you guys can help me out.
Rainier
NOTE:
Its only for mobile
Rainier
bust this css in your style.css
#media (max-width:767px) {
.navbar-nav{ margin:0}
.navbar-nav>li>a{padding-top: 20px;padding-bottom: 20px; border-top:8px solid #406bad}
.navbar-nav>li:last-child>a{border-bottom:8px solid #406bad}
}
Using bootstrap.
I changed breakpoint to collapse menu in 991px.
Menu are collapsing, but stays expended in sm. Works fine in xs.
It looks like collapsing, but is not disappearing.
Can't figure put whats is causing that.
Link below.
https://jsfiddle.net/marko_lt/spa8Ls1d/
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="meniu">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#meniucollapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="logo-box">
<a class="navbar-brand" href="{% url 'home' %}">
<img id="logotipas" src="{% static 'images/log_pure_small.jpg' %}" alt="logo"/>
</a>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="meniucollapse">
<ul class="nav navbar-nav">
<li><a data-toggle="collapse" data-target="#meniucollapse" href="#paslaugos" ><span>1 link </span></a></li>
<li><a data-toggle="collapse" data-target="#meniucollapse" href="#marsrutas"><span>2 link </span></a></li>
<li><a data-toggle="collapse" data-target="#meniucollapse" href="#kainos"><span>3 link </span></a></li>
<li><a data-toggle="collapse" data-target="#meniucollapse" href="#taisykles"><span>4 link </span></a></li>
<li><a data-toggle="collapse" data-target="#meniucollapse" href="#kontaktai"><span>5 link </span></a></li>
</ul>
</div>
</div>
</
CSS:
.navbar-default {
background-image:none;
background-color: #373737;
}
/*BIG SCREENS*/
#media all and (min-width: 991px) {
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav > li > a {
width: 120px;
height: 65px;
font-size: 16px;
border-left: 10px solid #178ACC;
transform: skewX(-45deg);
background-color: #000;
color: #f4ebeb;
}
.navbar-default .navbar-nav > li > a >span {
display:inline-block;
transform: skewX(45deg);
vertical-align: middle;
padding-top: 5px;
padding-left: 2px;
}
.navbar-default .navbar-nav > .active #uzsakymo-linkas {
background-color: #FC6607;
color:#fff;
margin:0px;
width:160px;
border-right: 10px solid #178ACC;
}
.navbar-default .navbar-nav > li>#uzsakymo-linkas > span {
padding-top: 0px;
padding-left: 0px;
text-align: center;
}
} /*end of big screens*/
/*SMALL SCREENS*/
#media (max-width: 991px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.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-default .navbar-nav>.active>a,
.navbar-nav>li>a
{
padding-top: 5px;
padding-bottom: 5px;
color: #727272;
width: 500px;
border-left: 5vw solid #178ACC;
height: 40px;
font-size: 16px;
color: #f4ebeb;
background-color: #000;
}
.navbar-default .navbar-nav > li > a >span {
display:inline-block;
vertical-align: middle;
padding-top: 5px;
padding-left: 2px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/*.navbar-collapse .collapse .in { */
.navbar-collapse .collapse .in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
} /*end small screens*/
I changed your css-code for small-screen to css-code I used before and it worked fine, of course, I put your properties for li a span:
#media (max-width: 990px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.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-default .navbar-nav>.active>a,
.navbar-nav>li>a {
padding-top: 5px;
padding-bottom: 5px;
color: #727272;
width: 500px;
border-left: 5vw solid #178ACC;
height: 40px;
font-size: 16px;
color: #f4ebeb;
background-color: #000;
}
.navbar-default .navbar-nav > li > a > span {
display:inline-block;
vertical-align: middle;
padding-top: 5px;
padding-left: 2px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}
jsfiddle-link
I am trying to add a border around my drop down menu which appears for mobile sizes. Thought it would be to control through .navbar-collapse but it doesn't seem to be working. Any ideas?
Sample pic of mobile size:
My code is as follows:
<nav class="navbar navbar-default navbar-fixed-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 class="active">I am fouridine
</li>
<li>design
</li>
<li>animation
</li>
<li>other art
</li>
<li>contact
</li>
</ul>
</ul>
</div>
<!--/.nav-collapse -->
</nav>
CSS for nav is as such:
#media (min-width: 768px) {
.navbar {
display: none;
}
}
.navbar {
min-height:0;
}
.navbar-nav {
margin:0;
}
.navbar-default {
background-color:#47c4c0;
border:0;
height:30px;
font-size: 16px;
}
.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
margin:0;
border:0 30px 30px 30px;
}
.nav > li > a {
padding: 5px 20px 5px 20px;
}
.navbar-default .navbar-nav > li > a {
color: #47c4c0;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #666666;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: white;
background-color: #47c4c0;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
border:0;
}
.navbar-collapse {
padding:0;
background:white;
border-style:solid;
border-color:#47c4c;
border:0 30px 30px 30px;
}
.navbar-toggle {
padding: 8px;
margin: 0;
border:0;
border-radius: 0;
}
.navbar-toggle .icon-bar {
width: 15px;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: white;
}
.navbar-default .navbar-toggle:hover .icon-bar, .navbar-default .navbar-toggle:focus .icon-bar {
background-color: #47c4c0;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: white;
}
You can apply this to the navbar-nav class. Also see on MDN: border-width
#media (max-width: 767px) {
.navbar.navbar-default .navbar-nav {
background-color: white;
border: none;
margin-top: 0px;
border: solid #47c4c0;
border-width: 0 30px 30px;
}
}
See working Snippet.
#media (min-width: 768px) {
.navbar.navbar-default {
display: none;
}
}
.navbar.navbar-default {
min-height: 0;
background-color: #fff;
border: 0;
height: 30px;
font-size: 16px;
}
.navbar.navbar-default .navbar-nav > li > a {
padding: 5px 20px;
color: #47c4c0;
}
.navbar.navbar-default .navbar-nav > li > a:hover,
.navbar.navbar-default .navbar-nav > li > a:focus {
color: #666666;
}
.navbar.navbar-default .navbar-nav > .active > a,
.navbar.navbar-default .navbar-nav > .active > a:hover,
.navbar.navbar-default .navbar-nav > .active > a:focus {
color: white;
background-color: #47c4c0;
}
.navbar.navbar-default .navbar-collapse,
.navbar.navbar-default .navbar-form {
border: none;
}
#media (max-width: 767px) {
.navbar.navbar-default {
background-color: #47c4c0;
}
.navbar.navbar-default .navbar-toggle {
padding: 8px;
margin: 0;
border: 0;
border-radius: 0;
}
.navbar.navbar-default .navbar-toggle .icon-bar {
width: 15px;
background-color: white;
}
.navbar.navbar-default .navbar-toggle:hover .icon-bar,
.navbar.navbar-default .navbar-toggle:focus .icon-bar {
background-color: #47c4c0;
}
.navbar.navbar-default .navbar-toggle:hover,
.navbar.navbar-default .navbar-toggle:focus {
background-color: white;
}
.navbar.navbar-default .navbar-nav {
background-color: white;
border: none;
margin-top: 0px;
border: solid #47c4c0;
border-width: 0 30px 30px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-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 class="active">I am fouridine
</li>
<li>design
</li>
<li>animation
</li>
<li>other art
</li>
<li>contact
</li>
</ul>
</ul>
</div>
</nav>
border:0 30px 30px 30px solid black; // or whatever color you want
solid indicates the type of border, could also be dotted|dashed|solid|double|groove|ridge
and just pick the color you want
http://www.w3schools.com/cssref/pr_border-style.asp