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>
Related
I created a 'mega menu' with Bootstrap 3.
I'm having trouble getting the row that creates the mega-menu horizontally centered and retaining functionality. Element in question has class .mega-dropdown-menu.
<ul class="dropdown-menu mega-dropdown-menu row">
Here's the code snippet pertaining to my issue :
body {
background: #f0f0f0;
}
.dropdown-menu {
background-color: #f5f5f5;
}
.navbar-header {
background-color: #3a7dbb;
}
.collapse.navbar-collapse.js-navbar-collapse {
background-color: #3a7dbb;
/* ?=border-bottom: 5px solid #214f82 */
}
.navbar-default .navbar-nav > li > a.dropdown-toggle {
font-size: 16px;
color: white;
}
.dropdown > .dropdown-menu > li > a {
font-size: 16px;
}
.glyphicon-shopping-cart:before {
color: white;
}
.navbar .navbar-brand {
padding-top: 0px;
}
.dropdown > .dropdown-menu > li > a:hover {
background-color: white;
}
.navbar-nav > li > .dropdown-menu {
background-color: #f5f5f5;
margin-top: 20px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.navbar-default .navbar-nav > li > a {
/* width: 8em; */
font-weight: bold;
}
.mega-dropdown {
position: static !important;
width: 100%;
}
.mega-dropdown-menu {
padding: 20px 0px;
width: 100%;
box-shadow: none;
-webkit-box-shadow: none;
}
.center {
margin: auto;
}
.mega-dropdown-menu > li > ul {
padding: 0;
margin: 0;
}
.mega-dropdown-menu > li > ul > li {
list-style: none;
}
.mega-dropdown-menu > li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #262626;
white-space: normal;
}
.i-am-centered {
margin: auto;
max-width: 300px;
}
.mega-dropdown-menu > li ul > li > a {
font-size: 16px;
}
.mega-dropdown-menu > li ul > li > a:hover,
.mega-dropdown-menu > li ul > li > a:focus {
text-decoration: none;
color: #444;
background-color: white;
}
li.dropdown:hover {
background-color: #c3c1c1;
}
ul.dropdown-menu.mega-dropdown-menu.row {
width: 80%;
}
.mega-dropdown-menu .dropdown-header {
color: #428bca;
font-size: 18px;
font-weight: bold;
}
.mega-dropdown-menu .dropdown-header > a {
color: #428bca;
font-size: 18px;
font-weight: bold;
padding-left: 0;
}
.mega-dropdown-menu form {
margin: 3px 20px;
}
.mega-dropdown-menu .form-group {
margin-bottom: 3px;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: black !important;
}
#media only screen and (min-width: 768px) {
.dropdown:hover > .dropdown-menu {
display: block;
}
.dropdown > .dropdown-toggle:active {
pointer-events: none;
}
}
/* .mega-dropdown-menu:before {
content: "";
border-bottom: 15px solid #fff;
border-right: 17px solid transparent;
border-left: 17px solid transparent;
position: absolute;
top: -15px;
left: 285px;
z-index: 10;
}
.mega-dropdown-menu:after {
content: "";
border-bottom: 17px solid #ccc;
border-right: 19px solid transparent;
border-left: 19px solid transparent;
position: absolute;
top: -17px;
left: 283px;
z-index: 8;
} */
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="https://brm.institute/wp-content/themes/brmi/images/brm-institute-logo.png"></a>
</div>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown">
Dummy MegaMenu<span class="caret"></span>
<ul class="dropdown-menu mega-dropdown-menu row">
<li class="col-sm-4">
<ul>
<li class="dropdown-header">Dresses</li>
<li>Unique Features</li>
<li>Image Responsive</li>
<li>Auto Carousel</li>
<li>Newsletter Form</li>
<li>Four columns</li>
<li class="divider"></li>
<li class="dropdown-header">Tops</li>
<li>Good Typography</li>
</ul>
</li>
<li class="col-sm-4">
<ul>
<li class="dropdown-header">Jackets</li>
<li>Easy to customize</li>
<li>Glyphicons</li>
<li>Pull Right Elements</li>
<li class="divider"></li>
<li class="dropdown-header">Pants</li>
<li>Coloured Headers</li>
<li>Primary Buttons & Default</li>
<li>Calls to action</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</nav>
</div>
Code available on codepen as well.
Any help would be appreciated,
Thank you
For your current problem, set .mega-dropdown-menu to either :
01 Using translate :
left: 50% /* instead of 0 */
transform: translateX(-50%);
02 Using margins (prefered solution IMO)
left: 0;
right: 0;
margin: 0 auto; /* Centers the element */
Not enough Rep to add a comment sorry.
I always found:
margin-right: auto;
margin-left: auto;
Does the trick without a need to set a left/right position.
You can also used the class "center-block" built in to Bootstrap 3 to apply this css as a class.
Personally I would recommend updating to Bootstrap 4, took me a while to make the leap but the flexgrid is such an improvement its worth it. Most of the classes are interchangeable to some degree, though in bootstrap 4 "center-block" is now "mx-auto"
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'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}
}