i'm currently working on a project right now regarding bootstrap.. I'm having a hard time figuring this one out.
I have a navigation which I need to collapse early around 1200px but when I do so, the links are overflowing like this:
I dont know what was the reason behind this. But I'm using bootstrap.min.css which I know is different in bootstrap.css alone. Can anyone help me with this ?
And BTW, here's a snippet on what I have already done in my navigation:
.navbar-default .navbar-header {
float: none;
}
.navbar-default .navbar-left,
.navbar-default .navbar-right {
float: none !important;
}
.navbar-default .navbar-toggle {
display: block;
}
.navbar-default .navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar-default.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-default .navbar-collapse.collapse {
display: none!important;
}
.navbar-default .navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-default .navbar-nav>li {
float: none;
}
.navbar-default .navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-default .collapse.in {
display: block !important;
}
<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" />
<header id="header">
<nav id="main-menu" class="navbar navbar-default navbar-fixed-top" role="banner">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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>
<div class="brand-pad"></div>
<a class="navbar-brand" href="index.html">
<img src="images/logo_white.png" alt="logo" width="210px" height="90px">
</a>
</div>
<div class="collapse navbar-collapse navbar-right">
<div id="socialicon" class="collapse navbar-collapse navbar-right">
<ul class="navbar-rights ">
<li class="icon-margin-left icon-margin-right">
<a class="twitterBtn smGlobalBtn" href="http://twitter.com/"></a>
</li>
<li>
<a class="facebookBtn smGlobalBtn" href="http://facebook.com/"></a>
</li>
</ul>
</div>
<br>
<ul class="nav navbar-nav nav-pad">
<li class="scroll active">HOME
</li>
<li class="scroll">ABOUT
</li>
<li class="scroll"><a class="services" href="#services">OUR SERVICES</a>
</li>
<li class="scroll"><a class="collection" href="#portfolio">OUR COLLECTION</a>
</li>
<li class="scroll">BECOME A MEMBER
</li>
<li class="scroll">OUR PARTNERS
</li>
<li class="scroll">CONTACT
</li>
</ul>
</div>
</div>
<!--/.container-->
</nav>
<!--/nav-->
</header>
<!--/header-->
Thanks in advance..
Related
I am trying to get the elements in a navbar to show up and the issue is that they do albeit vertically.
I have tried to add the code display:inline-block to all css navbar-nav selectors , but to no avail. In the end, I have tried to change the "display:block" code in the "nav" selector to display:inline-block.
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: inline-block;
}
.navbar-nav {
margin: 7.5px -15px;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
}
#media (max-width: 767px) {
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-nav .open .dropdown-menu>li>a,
.navbar-nav .open .dropdown-menu .dropdown-header {
padding: 5px 15px 5px 25px;
}
.navbar-nav .open .dropdown-menu>li>a {
line-height: 20px;
}
.navbar-nav .open .dropdown-menu>li>a:hover,
.navbar-nav .open .dropdown-menu>li>a:focus {
background-image: none;
}
}
#media (min-width: 768px) {
.navbar-nav {
float: left;
margin: 0;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 15px;
padding-bottom: 15px;
}
}
#media (min-width: 768px) {
.navbar-left {
float: left !important;
}
.navbar-right {
float: right !important;
margin-right: -15px;
}
.navbar-right~.navbar-right {
margin-right: 0;
}
}
<html>
<head>
<title>This is a webpage!</title>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav">
<!-- 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="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand topnav" href="#"></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>
About
</li>
<li>
Login
</li>
<li>
Sign Up
</li>
<li>
Symptoms
</li>
<li>
Insurances
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
The links "About", "Login", "Sign Up", "Symptoms", and "Insurances" should all be lined up horizontally. However, no matter what I do, they only lign up vertically.
Try adding the following style:
.navbar-nav > li {
float: left;
}
Alternatively, you can add display: inline-block; to the li elements specifically:
.navbar-nav > li {
display: inline-block;
}
First of all if you are using bootstrap 4, then there is no need of writing this all CSS at all, BS 4 gives you great solutions for such thing only using some classes properly.
Check this out
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item">
About
</li>
<li class="nav-item">
Login
</li>
<li class="nav-item">
Sign Up
</li>
<li class="nav-item">
Symptoms
</li>
<li class="nav-item">
Insurances
</li>
</ul>
</div>
</nav>
Just use the classes properly, You can see all these class options form here.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li>
Dropdown
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Same goes with Bootstrap 3, Proper use of Classes will help you to get the desired result. See this example
How do you change the background-color of the collapsed navbar as it goes up and down? I have changed a few parts of bootstrap.css:
.navbar{
background-color: #A9B7C0;
border-bottom-color: #EFD9C1;
}
.navbar-inverse {
background-color: #A9B7C0 !important;
}
.container .navHeaderCollapse .nav li a {
color: #EFD9C1;
}
.container .navHeaderCollapse .nav .dropdown .dropdown-menu li a {
color: black;
}
.navbar .navbar-brand{
color: #EFD9C1;
}
.navbar .navbar-brand:hover{
color: #EAC67A;
}
.collapse .nav .active a{
color: #A9B7C0 !important;
background-color:#EFD9C1;
}
.collapse .nav .active a:hover{
background-color:#EFD9C1;
color: #A9B7C0;
}
body {
background-color: #CCCBC6;
color:white;
}
#media screen and (max-width: 375px) {
.fullName{
display:none;
}
}
While the action of collapsing down or going back to compressed mode is still ongoing, the background-color remains black and I want it to be the color of my customized bootstrap. Once it's done collapsing, it goes to the bg-color that I set.
Here's my html code:
<div class="navbar navbar-inverse navbar-static-top">
<div class ="container">
<div class="navbar-header">
<span class="glyphicon glyphicon-user"></span> <span class="fullName">Rayven Yor Zambo Esplanada</span>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About Me</li>
<li class="dropdown">
My Family <b class="caret"></b>
<ul class="dropdown-menu">
<li> Mother </li>
<li> Father </li>
<li> Younger Brother </li>
<li> Older Brother </li>
</ul>
</li>
<li>Contact Me</li>
</ul>
</div>
</div>
</div>
You need to use the same selector as bootstrap does which is: .navbar-inverse .navbar-nav>.active>a that's how your style will override the bootstrap's style.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.navbar{
background-color: #A9B7C0;
border-bottom-color: #EFD9C1;
}
.navbar-inverse {
background-color: #A9B7C0 !important;
}
.container .navHeaderCollapse .nav li a {
color: #EFD9C1;
}
.container .navHeaderCollapse .nav .dropdown .dropdown-menu li a {
color: black;
}
.navbar .navbar-brand{
color: #EFD9C1;
}
.navbar .navbar-brand:hover{
color: #EAC67A;
}
.collapse .nav .active a{
color: #A9B7C0 !important;
background-color:#EFD9C1;
}
.collapse .nav .active a:hover{
background-color:#EFD9C1;
color: #A9B7C0;
}
body {
background-color: #CCCBC6;
color:white;
}
.navbar-inverse .navbar-nav>.active>a {
background:#EFD9C1;
color: #A9B7C0 !important;
}
#media screen and (max-width: 375px) {
.fullName{
display:none;
}
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class ="container">
<div class="navbar-header">
<span class="glyphicon glyphicon-user"></span> <span class="fullName">Rayven Yor Zambo Esplanada</span>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About Me</li>
<li class="dropdown">
My Family <b class="caret"></b>
<ul class="dropdown-menu">
<li> Mother </li>
<li> Father </li>
<li> Younger Brother </li>
<li> Older Brother </li>
</ul>
</li>
<li>Contact Me</li>
</ul>
</div>
</div>
</div>
</body>
</html>
http://jsbin.com/weguya/edit?html,css,output
I am trying to use bootstrap so that i can make a line break between each of my nav menu.
For example:
Hi | Hi1 | h3
I need it so that the bar at the end also does not show after h3.
I have tried this so far but its not working, its pushing all the nav functions down to the bottom.
HTMKL:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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>
<div class="logo">
<img src="Image/Logo.png" class="img-responsive"/>
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Login</li>
<li>Become A member</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
CSS:
.navbar-default .navbar-nav > li + li:before {
content: "";
display: inline-block;
vertical-align: middle;
border-left: 1px solid #ffffff;
height: 2.5em;
}
For some reason it does create the lines but it pushs all my texts down. Thanks for all the help.
Here's an example of how you can do this with pseudo elements (:after). You dont need the positioning rules your currently using (which are the cause of your misaligned links). Use position: absolute and apply a height.
As far as the last li, use :last-child:after to remove the border.
See MDN Pseudo-elements
Working example Snippet (with Active class)
#media (min-width: 768px) {
.navbar.navbar-default .navbar-nav .active:after {
content: "";
border: none;
}
.navbar.navbar-default .navbar-nav > li:after {
content: "";
border-right: 2px solid #000;
position: absolute;
height: 50%;
right: 0;
top: 25%;
}
.navbar.navbar-default .navbar-nav > li:last-child:after {
border: none;
}
}
.navbar.navbar-default .navbar-brand {
padding-top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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">
<img src="http://placehold.it/50x50" />
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>About
</li>
<li>Login
</li>
<li>Become A member
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
Working example Snippet without Active
#media (min-width: 768px) {
.navbar.navbar-default .navbar-nav .active:after {
content: "";
border: none;
}
.navbar.navbar-default .navbar-nav > li:after {
content: "";
border-right: 2px solid #000;
position: absolute;
height: 50%;
right: 0;
top: 25%;
}
.navbar.navbar-default .navbar-nav > li:last-child:after {
border: none;
}
}
.navbar.navbar-default .navbar-brand {
padding-top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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">
<img src="http://placehold.it/50x50" />
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home
</li>
<li>About
</li>
<li>Login
</li>
<li>Become A member
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
Example Snippet Mobile
.navbar.navbar-default .navbar-nav .active:after {
content: "";
border: none;
}
.navbar.navbar-default .navbar-nav > li:after {
content: "";
border-right: 2px solid #000;
position: absolute;
height: 50%;
top: 25%;
}
#media (min-width: 768px) {
.navbar.navbar-default .navbar-nav > li:after {
right: 0;
}
.navbar.navbar-default .navbar-nav > li:last-child:after {
border: none;
}
}
.navbar.navbar-default .navbar-brand {
padding-top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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">
<img src="http://placehold.it/50x50" />
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home
</li>
<li>About
</li>
<li>Login
</li>
<li>Become A member
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
This can be achieved by setting borders.
HTML:
<ul class="navbar-nav mr-auto">
<li class="nav-item">
About us
</li>
<li class="nav-item">
Our Services
</li>
<li class="nav-item">
Solutions
</li>
<li class="nav-item">
Contact
</li>
</ul>
SCSS
.navbar-nav {
li.nav-item {
.is-active {
color: $blue;
border-bottom: 2px solid $violet;
}
.nav-link {
margin: 0 8px;
padding: 0;
}
// for nav navbar-expand-lg
#include media-breakpoint-up(lg) {
border-right: 2px dotted $black;
&:last-child {
border-right: none;
}
}
}
}
This will display a border line to the right, also hides for the last.
This is so inane but I it might help someone else. I had <br> blending in after the navbar item link, and it took me forever to spot. Be wary of any errant <br> tags!
I have one navbar in one website that im building which is full width in large screen.
I am trying to make it in my own width for large screens and im stuck.
i have the code here
.navbar {
background-color: #242424;
border-bottom: 1px solid #b9b9b9;
font-family: 'Poiret One', cursive;
}
.navbar a {
color: #cccccc !important;
}
.navbar a:hover {
color: #ffffff !important;
background-color: #646464 !important;
}
.navbar-header .navbar-brand {
color: white !important;
font-size: 1.5em;
}
<!-- NAVBAR -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle Nav</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Contact</li>
</ul>
</div>
</div>
</div>
<!-- END NAVBAR -->
Do you have any suggestion of how can i make it lets say 800px for wide screens
and when its loaded in tablet to be normal width of all the tablet/smartphone screen?
This might be the simplest way to do this: you can limit the container size with a custom class at whatever media query you'd like the navbar with be 800px, then just adjust the custom container color to the navbar color and the navbar background color so it matches the body or use transparent.
See working example.
body,
html {
margin-top: 55px;
}
.navbar.navbar-custom {
background-color: #242424;
border-bottom: 1px solid #b9b9b9;
font-family: 'Poiret One', cursive;
}
.navbar.navbar-custom .navbar-nav li a {
color: #cccccc;
}
.navbar.navbar-custom .navbar-nav li a:hover {
color: #ffffff;
background-color: #646464;
}
.navbar-custom .navbar-header .navbar-brand {
color: white;
font-size: 1.5em;
}
#media (min-width: 1200px) {
.container.container-nav {
width: 800px;
background-color: #242424;
}
.container.container-content {
width: 800px;
}
.navbar.navbar-custom {
background-color: transparent;
border: none;
}
}
<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" />
<body>
<div class="navbar navbar-default navbar-custom navbar-fixed-top" role="navigation">
<div class="container container-nav">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle Nav</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>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home
</li>
<li>Work
</li>
<li>About
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>News
</li>
<li>Blog
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</div>
<div class="container container-content">
<div class="alert alert-warning">Hello</div>
</div>
</body>
:)
I m fiddeling around with my bootstrap fixed bottom navbar..
its working kinda ..
But my navbar links wont go justified .. i tried everything i could think about..
i want to have it responsive soo the code i m currantly having (60px padding) is just the best i came up with, - looks soo aweful if it resizes.. :(
thx a lot!!!
<!--NAVBAR-->
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="container-fluid">
<!-- 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>
<li class="active"><a class="navbar-brand" href="#"><img src="Bilder/grafik4.jpg" type="picture/jpg"/></a></li>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>F</li>
<li>Z</li>
<li>V</li>
<li>Ns</li>
<li>Englisch</li>
<li class="dropdown">
Kontakt und Impressum<b class="caret"></b>
<ul class="dropdown-menu">
<li>A</li>
<li>Kontakt</li>
<li class="divider"></li>
<li>Webseitengestaltung</li>
<li>Foto und Film</li>
<li class="divider"></li>
<li>Copyright 2014</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!--NAVBAR ENDE-->
the custom css is (other than that i used the bootstrap 3 one):
`
.navbar-brand {
float: left;
font-size: 18px;
height: 50px;
line-height: 20px;
padding-left: 40px;
padding-top:5px;
text-decoration: none;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
background-color: transparent;
color:black;
text-decoration:underline;
}
.navbar-default .navbar-nav > li > a {
color: grey;
text-decoration: none;
width: 100%;
padding-left:60px;
}
.navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
size: 60px;
margin: 14,82% 0 0 10%;
}
.navbar-default {
background-color: #FFFFFF;
border-color: #E7E7E7;
}
.dropdown-menu > li > a {
color: grey;
}
.dropdown-menu> li > a:hover,
.dropdown-menu> li > a:focus {
background-color: transparent;
color:black;
text-decoration:underline;
}
`
Check this solution (if I understand correct what you want). JsFiddle:
I just replaced <ul class="nav navbar-nav"> with <ul class="nav custom-menu nav-justified">.
The nav-justified is provided by bootstrap.
Also I made few modifications to your css.
HTML:
<!--NAVBAR-->
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="container-fluid">
<!-- 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>
<li class="active"><a class="navbar-brand" href="#">
<img src="http://placehold.it/20x20" type="picture/jpg" /></a>
</li>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav custom-menu nav-justified">
<li>F</li>
<li>Z</li>
<li>V</li>
<li>Ns</li>
<li>Englisch
</li>
<li class="dropdown">Kontakt und Impressum <b class="caret"></b>
<ul class="dropdown-menu">
<li>A</li>
<li>Kontakt</li>
<li class="divider"></li>
<li>Webseitengestaltung</li>
<li>Foto und Film</li>
<li class="divider"></li>
<li>Copyright 2014</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!--NAVBAR ENDE-->
CSS:
.navbar-default .custom-menu > li a {
color: grey;
}
.dropdown-menu > li > a:hover {
color: white;
}
.custom-menu > li > a {
padding-top: 15px;
padding-bottom: 15px;
}
.navbar-default {
background-color: #FFFFFF;
border-color: #E7E7E7;
}
.custom-menu > li > a:hover {
background-color: transparent;
color:black;
text-decoration:underline;
}
.navbar-default .dropdown.open {
background-color: #eee;
color:black;
text-decoration:underline;
}
.nav>li>a{
padding:15px 0;
}
EDIT:
JsFiddle
To make dropdown menu as before add few things:
Add id="menu" for ul element:
Add new css class. It's need to align to center menu items when they are collapsed:
.navbar-nav{
margin:inherit !important;
}
Add javascript that will replace custom-menu class to navbar-nav class when toggle button is visible; otherwise it will do opposite thing.
$(function () {
$(window).resize(function () {
changeMenu();
});
changeMenu();
function changeMenu() {
if ($(".navbar-toggle").is(":visible")) {
$("#menu").removeClass("custom-menu").addClass("navbar-nav");
} else {
$("#menu").removeClass("navbar-nav").addClass("custom-menu");
}
}
});
Not sure if this is what you are after, but here is a codepen with a fixed menu at the bottom of the page. It's elements are centered using text-align:center for the ul. The navbar is 'responsive' as it resizes with the window. However for a proper responsive design you should use #media queries to set specific rules for different devices.
hope this helps.