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}
}
Related
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.
i have been playing around with bootstrap to setup a navbar the way i would like it to be.
I am struggling as you might see in my code to have everything vertically centered properly in this menu. I have made some average fix by playing with the margin but i can't fix the button.
I am sure there is a simple solution with position:relative to have everything center but i can't find it.
http://codepen.io/anon/pen/yMGEZb
Thanks for your help !
updated codepen
Just add the button inside navbar-right li.no need to modify your css.
example snippet
.navbar-default .navbar-header .navbar-brand {
font-family: 'Catamaran', 'Helvetica', 'Arial', 'sans-serif';
font-weight: 200;
letter-spacing: 1px;
color: #fdcc52;
}
.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
color: #fcbd20;
}
.navbar-default .navbar-header .navbar-toggle {
font-size: 12px;
color: #222222;
padding: 8px 10px;
}
.navbar-default .nav > li > a {
font-family: Montserrat;
font-weight:300;
font-style:normal;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 13px;
color: #121212;
}
/*#media (min-width: 768px)
.button-nav {
display: inline-block;
z-index: 101;
}*/
.button-nav {
position: relative;
bottom: 50%;
background-color: transparent;
font-family: Montserrat;
font-weight: 300;
font-style:normal;
letter-spacing:2px;
font-size: 13px;
color: #121212;
text-transform: uppercase;
border: 1px solid #121212;
padding: 18px 40px;
transition: color .4s cubic-bezier(.694,.0482,.335,1),background-color .4s cubic-bezier(.694,.0482,.335,1),border .4s cubic-bezier(.694,.0482,.335,1);
cursor:pointer;
text-align:center;
text-rendering: optimizeLegibility;
}
.button-nav:hover {
background-color: #1c1c1c;
font-family: Montserrat;
font-weight: 300;
font-style:normal;
letter-spacing:2px;
font-size: 13px;
color: white;
text-transform: uppercase;
border: 1px solid #1c1c1c;
padding: 18px 40px;
transition: color .4s cubic-bezier(.694,.0482,.335,1),background-color .4s cubic-bezier(.694,.0482,.335,1),border .4s cubic-bezier(.694,.0482,.335,1);
cursor:pointer;
text-align:center;
text-rendering: optimizeLegibility;
}
.navbar-default .nav > li > a,
.navbar-default .nav > li > a:focus {
color: #121212;
}
.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus:hover {
color: #fdcc52;
}
.navbar-default .nav > li.active > a,
.navbar-default .nav > li.active > a:focus {
color: #fdcc52 !important;
background-color: transparent;
}
.navbar-default .nav > li.active > a:hover,
.navbar-default .nav > li.active > a:focus:hover {
background-color: transparent;
}
#media (min-width: 768px) {
.navbar-default {
background-color: transparent;
border-color: transparent;
}
.navbar-default .navbar-header .navbar-brand {
color: rgba(34, 34, 34, 0.1);
}
.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
color: white;
}
.navbar-default .nav > li > a,
.navbar-default .nav > li > a:focus {
color: #121212;
}
.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus:hover {
color: white;
}
.navbar-default.affix {
background-color: white;
border-color: rgba(34, 34, 34, 0.1);
}
.navbar-default.affix .navbar-header .navbar-brand {
color: #222222;
}
.navbar-default.affix .navbar-header .navbar-brand:hover,
.navbar-default.affix .navbar-header .navbar-brand:focus {
color: #fdcc52;
}
.navbar-default.affix .nav > li > a,
.navbar-default.affix .nav > li > a:focus {
color: #222222;
}
.navbar-default.affix .nav > li > a:hover,
.navbar-default.affix .nav > li > a:focus:hover {
color: #fdcc52;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container" style="height:80px;">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="#page-top">
<img src="http://svgshare.com/i/17J.svg" width="220" height="50" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" style="margin-top:20px;">
<li>
<a class="page-scroll" href="#download">Download</a>
</li>
<li>
<a class="page-scroll" href="#features">Features</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
<li><button class="button-nav pull-right">Get started</button></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
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 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
I am struggling using bootstrap framework for my navigation bar.
Once I start to customize it the desktop version, the mobile version (collapsed) no longer displays as a dropdown mobile menu.
It looks just like my desktop menu when I expend it.
I'm assuming it is a simple solution, but I've researched for a while and can't figure it out.
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href="http://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="portfolio.css">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<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>
<!-- 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">
<li class="active">Portfolio
</li>
<li>Credentials
</li>
<li>Resume
</li>
<li>Mentions
</li>
<li>Contact
</li>
</ul>
</li>
</ul>
</div>
</nav>
/* --- Style --- */
/* navbar */
.navbar-default {
height: 90px;
background-color: #F5F5F5;
border-color: #D6D6D6;
text-align: center;
}
.navbar-default .navbar-nav {
margin: 0;
display: table;
width: 100%;
}
.navbar-default .navbar-nav li {
display: table-cell;
width: 13%;
float: none;
}
/* title */
.navbar-default .navbar-brand {
font: 30px 'Pacifico', Helvetica, sans-serif;
font-style: normal;
color: #616161;
text-shadow: 1.5px 1.5px 0px rgba(0, 0, 0, 0.1), 0.5px 0.5px 0px rgba(0, 0, 0, 0.05);
padding-top: 20px;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
font: 30px 'Pacifico', Helvetica, sans-serif;
font-style: normal;
color: green;
text-shadow: 1.5px 1.5px 0px rgba(0, 0, 0, 0.1), 0.5px 0.5px 0px rgba(0, 0, 0, 0.05);
}
/* link */
.navbar-default .navbar-nav > li > a {
font-family: Open Sans, sans-serif;
font-size: 20px;
color: #3B3B3B; /* inactive link text color */
text-align: center;
padding-top: 3px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #3B3B3B; /* active link text color */
font-weight: 600;
background-color: #F5F5F5; /* inactive link bg color */
box-shadow: inset 0px -6px 0px #EBEBEB; /* switch to a darker color on hover */
padding-top: 3px;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #3B3B3B;
font-weight: 600;
background-color: #F5F5F5;
box-shadow: inset 0px -6px 0px 0px #00FFFF; /* switch to a lighter color for active element */
padding-top: 3px;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: blue;
background-color: red;
padding-top: 3px;
}
}
/* mobile version */
.navbar-default .navbar-toggle {
border-color: blue;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: red;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: green;
}
#media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: red;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: blue;
}
}
Hello you need to a css media query and put the styles you want in it. what is the you need different?