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
Related
I'm trying one hour to change hover color of nav-menu, but I was not able to do that. I can't find hover attribute in css for the menu.
Here is page:
http://jazbinasolutions.com/rooney
If you hover over the top menu links you will see they are getting white and actually being invisible.
Any help will be appreciated.
Thanks
This is the code you are looking to change:
.navbar-inverse .navbar-nav>li>a:hover {
color: #fff;
background-color: transparent;
}
You should use a more specific rule to override it:
.navbar.navbar-inverse.navbar-fixed-top .navbar-nav>li>a:hover {
color: #000;
}
This is your exact code with specific selectors, you don't (and should not use !important unless totally warranted). You should also consider using custom classes when altering a framework.
See working example in Snippet.
html,
body {
height: 100%;
}
body {
padding-top: 50px;
}
.navbar.navbar-custom {
background: white;
}
.navbar.navbar-custom {
min-height: 85px;
}
.navbar.navbar-custom #bs-example-navbar-collapse-1 {
padding-top: 22px;
}
.navbar.navbar-custom .navbar-nav > li > a:hover,
.navbar.navbar-custom .navbar-nav > li > a:focus {
color: #333333;
background-image: none;
}
.navbar.navbar-custom {
color: red;
}
<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" />
<div class="container">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<!-- 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="index.html">
<img src="http://www.jazbinasolutions.com/rooney/images/ElregLogo2.png" />
</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> Home
</li>
<li> About Us
</li>
<li> Projects
</li>
<li> Kompetanse
</li>
<li> Kontakt
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</div>
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..
I am learning bootstrap but i have problems. Website looks normal on computer screen but not on phone. My navbar is not very responsive. Look at this: http://gyazo.com/38234d9e9d9e9dc5dc81903427bb455b . IMG is going under the navbar. What should I do?
website is here: http://www.maesepp.tk
This is my navbar code:
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- 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>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right pull-right" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
Avaleht
</li>
<li>
Teenused
</li>
<li>
Meist
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="peamaja.html">Galerii
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Peamaja</li>
<li>Saunamaja</li>
<li>Transport</li>
<li>Laaksaare sadam</li>
<li>Privaatrand</li>
</ul>
<li>
Kontakt
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
And this is my css:
.navbar .nav > li > a {
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
float: none;
line-height: 19px;
padding: 9px 10px 11px;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
color: white;
font-size: 1.2em;
}
.navbar-inverse{
background:rgba(0,0,0,0.2);
border-radius: 5px;
border-bottom: none;
}
#media only screen and (max-width: 766px) {
.collapsing, .in {background-color: #f7f7f7;}
.collapsing ul li a, .in ul li a {color: #555!important;}
.collapsing ul li a:hover, .in ul li a:hover {color: #f1f1f1!important;}
}
Add this to your css and it will prevent the navbar from overlapping your image:
#media (max-width: 768px) {
body {
margin-top: 50px;
}
}
BUT it will still go under your navbar when you scroll (obviously) so if you wnt to prevent that too, just remove the opacity of the navbar on mobile like this:
#media (max-width: 768px) {
.navbar-inverse {
background:rgba(0,0,0,1);
}
}
If I understand the question correctly, you mean that the logo appears under your navbar, just increase the margin of the logo (css "img#teenused" at line 164)
http://i.stack.imgur.com/AOWEW.jpg
I have a weird margin below bootstrap navbar and I don't know how to remove it. Any solutions with manipulate with margin or padding doesn't working.
HTML
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- 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>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-home"></span></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">Active example <span class="sr-only">(current)</span></li>
<li>Example 3</li>
<li>Example 2 </li>
</ul>
</div>
</div>
</nav>
<!-- HEADER -->
<div class="container-fluid" style="margin-top: -20px; margin-bottom: 25px;">
<div class="row">
<img src="http://thehrblog.ecornell.com/wp-content/uploads/sites/2/2013/04/communication.png" class="img-responsive">
</div>
</div>
CSS
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
background-color: #007DBE;
color: #FFF;
}
Example is here: Jsfiddle (please resize 'Result' if menu in navbar is hidden).
I need to remove this space:
for get this:
The file navbar.less is adding a border on the navbar:
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
So you can use this to reset:
.navbar-fixed-top {
border:0;
}
UpdatedFiddle
Change
.navbar-fixed-top {
border-width: 0 0 1px;
top: 0;
}
to
.navbar-fixed-top {
border-width: 0;
top: 0;
}
:)
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.