I am trying to make navbar elements appear on same line. I tried overriding .nav class display to inline:block. but it is not working at all. Please help me fix this problem. This is working on bootstrap 3
HTML
<head>
<title>Samrat Luitel website design </title>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top topnav">
<div class="container-fluid topnav">
<div class="navbar-header">
<a class="navbar-brand topnav" href="#" target="_blank">Samrat Luitel</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
</div>
</nav>
</body>
CSS
body{
font-family:"Lato";
font-weight:700;
}
.navbar-brand{
color:black;
}
.nav {
display: inline-block;
}
You can use this
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css" />
<head>
<title>Samrat Luitel website design </title>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-fixed-top">
<div class="container topnav">
<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="#">Samrat Luitel</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
</nav>
</body>
Pls add inline-block style to your li, so that you can manage your list items.
.nav li{
display:inline-block;
}
You need to put this css .nav > li {display: inline}
Update your css with below css. Remove display:inline-block; from .nav css rule.
.nav {
float: left;
width: 100%;
}
.nav li {
display: inline-block;
padding: 0 10px;
}
Its difficult to understand the exact problem but i guess if inline is not working try float
.nav > li {float:left:width:30%;}
/* New edit */
Try this one
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
I had the same problem and the suggested solutions with adding something like "... display: inline ..." to my stlyes.css file also did not help me (I also use Bootstrap4).
This is what finally helped me
<nav class="navbar navbar-default navbar-expand-sm">
...
</nav>
The important point here is navbar-expand-sm. This says that the nav-bar-items are only stacked vertically when the screen size is smaller or equal to small.
See further explanation here https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp
li {
float:left;
}
ul {
list-style-type:none;
}
Related
I am trying to implement a navbar that collapses when on small devices. This works properly.
However, on medium and large screens, the navbar does not show up at all. I want the navbar to appear like a normal navbar for medium and large screens and then collapse into the navbar button for small devices. I'm following the bootstrap template and have no idea why the navbar doesn't show up at all.
<div class = "container">
<nav class="navbar navbar-default" >
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="logo" src="logo.png" width="250px;">
</a>
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#collapse-navbar" aria-expanded="false" aria-controls="navbar">
☰
</button>
</div>
<div class="navbar-collapse collapse" id="collapse-navbar">
<ul class="nav navbar-nav">
<li class= "nav-item"><a class= "nav-link active" href="#">Home</a></li>
<li class= "nav-item"><a class= "nav-link" href="#">Build</a></li>
<li class= "nav-item"><a class= "nav-link" href="#">About</a></li>
</ul>
</div>
</nav>
</div>
Here's a code pen link: https://codepen.io/gkunthara/pen/VWdrYj
You are using bootstrap 3 markup and linking to bootstrap 4 css either link to bootstrap 3's css and javascript like so:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Or change your navbar markup to bootstrap 4's markup like so:
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<img alt="logo" src="logo.png" width="250px;">
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Build</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
You need to display the .navbar-header button on medium and large screen. So change
#media (min-width: 768px)
{
.navbar-toggle {
display: none;
}
}
this to
#media (min-width: 768px)
{
.navbar-toggle {
display: none;
}
.navbar-header button {
display: block;
}
}
https://codepen.io/julysfx/pen/jwRYQB
My portfolio page has a sticky navbar, but when I click on the navbar links it overlaps the text in each section. In about, it overlaps the text. In "portfolio" and "about" it overlaps both tiles. I tried to compensate with some padding-top in each section to no avail.
Here is the complete navbar:
<nav class="navbar navbar-toggleable-md navbar-light bg-faded fixed-top" style="background-color: #fc7a57;">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand mr-auto navfont" href="#">portfolio.</a>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#about"><i class="fa fa-user-circle-o" aria-hidden="true"></i> about</a>
</li>
<li class="nav-item">
<a class="nav-link text" href="#portfolio"><i class="fa fa-picture-o" aria-hidden="true"></i> portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link text" href="#contact"><i class="fa fa-envelope-o" aria-hidden="true"></i> contact</a>
</li>
</ul>
</nav>
And here's the CSS code for one of the sections
#contact {
background-color: #466365;
width: 100%;
height: 100%;
padding-top:50px;
color: white;
}
https://codepen.io/pablovester/pen/ZKJxLL
Thank you guys
First thing wrong I see is you are using ID's to style elements, NO, use class.
You are using ID "portfolio" in more than 1 element while Id should be unique in document.
Anyway to fix your problem just add margin-top: 100px; will be enough
.portfolio {
background-color: #bcd39c;
width: 100%;
height: 100%;
padding-top:50px;
margin-top:100px;
}
and add a class in html
<div id="portfolio" class="portfolio">
and also in other needed IDS.
Hope it helps!
I'm working on this site and did exactly what you are trying to achieve, check it out
Take a look at this HTML source and check if help you. Don't forget to copy all links at CSS and Javascript Settings section.
https://codepen.io/danogliari/pen/gWQWqo
<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<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="#">Daniel Ogliari</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right" id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active">About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
My solution to this same problem in Bootstrap 4 is...
.navbar-nav > .nav-item > a {
position: relative;
}
The brand is centered until i change it to an img.
I have tried many different ways of fixing it in css, but it wont work.
How can i vertically align this logo? and why doesnt my css work? For some reason, not all of my css styles are being applied.
<!DOCTYPE html>
<html>
<head>
<title>Stuff</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="app.css" >
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">
<img id="logo" alt="Brand" src="images/logo.jpg" width="40px" height="40px">
</a>
</div>
<div>
<div class="container" id="mynav">
<!-- 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" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- 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">Link <span class="sr-only">(current)</span></li>
<li>Home</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
</html>
css:
#mynav
{
width: 80%;
}
#logo
{
width:50px;
height: 50px;
vertical-align: middle;
}
You should only need one .navbar-header div, just place the .navbar-brand into your standard .navbar-header and adjust the padding for the .navbar-brand class.
.navbar .navbar-brand {
padding-top: 5px;
}
Working Example:
.navbar .navbar-brand {
padding-top: 5px;
}
.navbar .navbar-brand img {
height: 40px;
width: 40px;
}
<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">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img alt="Brand" src="https://unsplash.it/40/40/?random">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span>
</li>
<li>Home
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login
</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
I am new to bootstrap.
This is the design I am trying to make:
As you can see the navbar is on top op the background image.
This is what I have:
<!DOCTYPE html>
<html lang="en">
<head>
<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">
<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>
<style>
<style>
.navbar-default {
background: none;
border: none;
}
body{
height:100%;
}
html{
background: url('sun.jpg') no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position: 0 0;
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li class="active">home</li>
<li>ask a question!</li>
<li>learn</li>
<li>contact</li>
</ul>
</div>
</nav>
</body>
</html>
gives:
I don't know how to put it on the image itself instead of above.
short sidequestion: what makes it that the picture from vimeo makes it look so much better than the image I use from the sun? on my image you can see all the pixels etc... Is this due to the fact that it might be a too small image and that it has to be stretched a lot to fit the whole page?
EDIT:
this is what I tried but didn't work
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li class="active">home</li>
<li>ask a question!</li>
<li>learn</li>
<li>contact</li>
</ul>
<style>
.navbar{
background:transparent;
}
</style>
</div>
</nav>
Bootstrap 4
The Navbar has no background color, so it's transparent by default. Just remember to use navbar-light or navbar-dark so the link colors work with the contrast of the background image. Display of the toggler is also based on navbar-(dark or light).
https://www.codeply.com/go/FTDyj4KZlQ
<nav class="navbar navbar-expand-sm fixed-top navbar-light">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
Bootstrap 3
Use navbar-fixed-top and then change the CSS to make it transparent. Here's an example of a custom transparent navbar.
http://www.codeply.com/go/JNy8BtYSem
<nav id="nav" class="navbar navbar-fixed-top" data-spy="affix">
<div class="container">
<div class="navbar-header">
Brand
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Link</li>
<li>Link</li>
</ul>
<ul class="nav pull-right navbar-nav">
<li>
Link
</li>
</ul>
</div>
</div>
</nav>
This question is only to make the transparent Navbar. To change style after scrolling or at some Navbar position see: Animate/Shrink NavBar on scroll using Bootstrap 4
You need to remove the background from your nav-bar:
.navbar-default {
background: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
html,
body {
height: 100%;
background: red;
}
.navbar-default {
background: none;
border: none;
}
</style>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
Just take the backgound image in Body and then use this code
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-
toggle="collapse" data-target=".navbar-collapse">
<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="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Username</li>
</ul>
</div>
</div>
</div>
<div class="wide">
<div class="col-xs-5 line"><hr></div>
<div class="col-xs-2 logo">Logo</div>
<div class="col-xs-5 line"><hr></div>
</div>
<div class="container">
<div class="text-center">
<h1>Content</h1>
</div>
</div>
Also used styling style="opacity:0.6;" in Navbar div
The background colour is set on the .navbar-default class so make sure your css is using that class to target turning the bar transparent. e.g.
.navbar-default{background-color: transparent;}
As Turnip states, this needs to be applied after the bootstrap styles in your <head>
If you really want to force it whilst you are getting it to work add the following attribute to your <nav> element
style="background-color: transparent;"
So your nav element looks like this:
<nav class="navbar navbar-default" style="background-color: transparent;">
However, it obviously better to have this within a CSS file, rather than as inline HTML
.navbar{
background:transparent;
}
This will make your background transparent.
I want a header with a height of 150px which contains a navbar. The navbar should be vertically centered in the header.
HTML:
<header>
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container" style="background:yellow;">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-th-list"></span>
</a>
<img src="img/logo.png" class="logo" />
<nav class="nav-collapse collapse pull-right" style="line-height:150px; height:150px;">
<ul class="nav" style="display:inline-block;">
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
CSS:
header {
width: 100%;
line-height: 150px;
color:red;
height: 150px;
.navbar-inner {
border:0;
border-radius: 0;
background: blue;
padding:0;
margin:0;
height: inherit;
}
}
The nav/menu/vertical list is now in the top right of the header. How do I get it to center vertically? bootstrap.css is uncustomized.
your markup was a bit messed up. Here's the styles you need and proper html
CSS:
.navbar-brand,
.navbar-nav li a {
line-height: 150px;
height: 150px;
padding-top: 0;
}
HTML:
<nav class="navbar navbar-default">
<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="#"><img src="img/logo.png" /></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</nav>
Or check out the fiddle at: http://jsfiddle.net/TP5V8/1/
You need also to set .min-height: 0px; please see bellow:
.navbar-inner {
min-height: 0px;
}
.navbar-brand,
.navbar-nav li a {
line-height: 150px;
height: 150px;
padding-top: 0;
}
If you set .min-height: 0px; then you can choose any height you want!
Good Luck!
For Bootstrap 4, there are now spacing utilities so it's easier to change the height via padding on the nav links. This can be responsively applied only at specific breakpoints (ie: py-md-3). For example, on larger (md) screens, this nav is 120px high, then shrinks to normal height for the mobile menu. No extra CSS is needed..
<nav class="navbar navbar-fixed-top navbar-inverse bg-primary navbar-toggleable-md py-md-3">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
<div class="navbar-collapse collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item py-md-3">Home</li>
<li class="nav-item py-md-3">Link</li>
<li class="nav-item py-md-3">Link</li>
<li class="nav-item py-md-3">More</li>
<li class="nav-item py-md-3">Options</li>
</ul>
</div>
</nav>
Bootstrap 4 Navbar Height Demo
I believe you are using Bootstrap 3. If so, please try this code, here is the bootply
<header>
<div class="navbar navbar-static-top navbar-default">
<div class="navbar-header">
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-th-list"></span>
</a>
</div>
<div class="container" style="background:yellow;">
<a href="/">
<img src="img/logo.png" class="logo img-responsive">
</a>
<nav class="navbar-collapse collapse pull-right" style="line-height:150px; height:150px;">
<ul class="nav navbar-nav" style="display:inline-block;">
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>