I"m trying to make a bootstrap nav bar like this :
I could manage only this one:
And here is my code:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.nav{
position: absolute;
top: 5px;
right: 190px;
border-left: 3px solid #EEE;
border-right: 3px solid #EEE;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<img src="./imgs/endorse-logo1.png" alt="logo">
</div>
<div class="navbar-header nav">
<ul class="nav nav-pills">
<li class="dropdown">
English<b class="caret"></b>
<ul class="dropdown-menu">
<li>Russian</li>
<li>Chinese</li>
<li>German</li>
<li>Italian</li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>
It isn't even responsive. How can I make a responsive nav bar properly?
If you take a look at the official documentation you will see that there is a lot of mistakes in your code:
you have two navbar-header element, you should have only one, and multiple <ul class="nav navbar-nav"> elements,
you need to wrap your navbar elements (<ul class="nav navbar-nav">) in a <div class="collapse navbar-collapse"> element in order to make it responsive,
you can get rid of your .nav css to fix the navbar top as you are already using navbar-fixed-top,
you are using <ul class="nav nav-pills"> where you should directly use <a class="dropdown-toggle">
etc...
Maybe you should retry to create the navbar from the beginning by following precisely the documentation.
Related
I'm working on a navbar with bootstrap and the hover effect in css isn't working and i added the hover pseudo class to my anchor tag
<!DOCTYPE html>
<html>
<head>
<style>
li a:hover{
background-color: green;}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-inverse mynav">
<div class="collapse navbar-collapse navHeaderCollapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active nav-item">Home</li>
<li class="nav-item">About</li>
<li class="nav-item">Work</li>
<li class="nav-item">Contact</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</body>
</html>
when you want to customize bootstrap elements use the !important attribute in your css like so
li a:hover{
border-bottom: 2px solid blueviolet !important;
background-color: ;
}
In Bootstrap 3 it was possible to do this:
The effect was to apply a solid background colour (orange in this case) on to an <li> element inside .navbar
An example fiddle is here: https://jsfiddle.net/p1vm4aeo/
The only custom CSS is the orange background, the rest is Bootstrap 3:
.orange-bg {
background-color: orange;
}
Markup is as follows:
<nav class="navbar navbar-fixed-top navbar-default" role="navigation">
<div id="navbar-collapse-1" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown orange-bg">
Foo
</li>
</ul>
</div>
</nav>
Again this is all standard Bootstrap 3 markup, with the addition of .orange-bg.
In Bootstrap 4 this doesn't seem to be achievable because the <li> inside .navbar doesn't occupy the full height of the navbar. The effect is like this:
Fiddle for it is here: https://jsfiddle.net/20ehqxsy/
The only difference in the markup is that the Navbar classes are appropriate to Bootstrap 4 instead of 3 (.navbar-expand-lg for instance):
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light navbar-default" role="navigation">
<div id="navbar-collapse-1" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown orange-bg">
Foo
</li>
</ul>
</div>
</nav>
Is there any way to get the same effect that's possible in Bootstrap 3 when using Bootstrap 4?
A standard navigation bar is created with the .navbar class, followed by a responsive collapsing class: .navbar-expand-xl|lg|md|sm (stacks the navbar vertically on extra large, large, medium or small screens).
You need to use bootstraps utility/spacing to achieve the desired result.
Also, notice the use of nav-link class inside li.
This is a considerably cleaner approach, without overriding bootstraps default css.
.orange-bg {
background-color: orange;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar p-0 fixed-top navbar-expand-sm navbar-light bg-light navbar-default" role="navigation">
<div id="navbar-collapse-1" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="nav-item dropdown orange-bg">
<a class="nav-link" href="#">Foo</a>
</li>
</ul>
</div>
</nav>
Your .navbar element has:
.navbar {
...
padding: .5rem 1rem;
}
So simply set this to 0, and apply the same value to your most element-local element; for ease of illustration I have used .dropdown but you can use .navbar-nav > li, etc. :
.dropdown {
...
padding: .5rem 1rem;
}
.navbar {
padding: 0;
}
This gives the required result.
Please see this Fiddle: https://jsfiddle.net/tpv79kyr/
Just apply padding:0 to nav as it takes padding:16px. Below is the working tested solution
To make your navbar responsive and collapsible you can use .navbar-expand-xl|lg|md|sm refer to Navbar
nav {
padding: 0px!important;
}
.orange-bg {
background-color: orange!important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar fixed-top navbar-expand navbar-light bg-light navbar-default" role="navigation">
<div id="navbar-collapse-1" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown orange-bg">
Foo
</li>
</ul>
</div>
</nav>
</body>
</html>
I am trying to create a navbar in bootstrap 3.x. But I have an issue (JsFiddle) when trying to divide the menus to the left and right as in the following example.
Home - About - Services - Contact Login - Register
But the result I get with my code is something like this:
Home - About - Login
Services - Contact Register
This is my code currently.
.site-top-nav{
padding:0.5em;
color: #fff;
font-size: 12px;
width: 100%;
text-transform: uppercase;
}
.site-top-nav li{
margin-left: 2%;
}
<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse" role="nagivation">
<div class="container-fluid">
<div class="navbar-inner site-top-nav">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav" style="float:right;">
<li>Login</li>
<li>Register</li>
</ul>
</div>
</div>
</nav>
I have tried other methods, but I can't get the effect I needed.
I did few changes to your existing fiddle.
Just you need to add one more css property
check it here : https://jsfiddle.net/ns82ne1z/5/
.navbar-nav li{
margin-left:10px;
}.
it may help you.
use float: left property to other ul element, and display: inline-block to li element
try using this Jsfiddle code updated
Example below
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<div class="container">
<h3>Basic Navbar Example</h3>
<p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>
</body>
</html>
If it helps mark as answer.
you need to do something like the code I will link below:
.body {
margin: 0px;
padding: 0px;
}
.nav-bar {
padding: 0px;
width: 100%;
margin: 0px auto;
}
.nav-bar ul {
list-style-type: none;
}
.nav-bar li {
display: inline-block;
padding: 10px;
}
.left {
position: relative;
right: 30px;
}
.right {
float: right;
}
<html>
<body>
<div class="nav-bar">
<ul>
<li class="left">Home</li>
<li class="left">About</li>
<li class="left">Contact</li>
<li class="left">More</li>
<li class="right">Register</li>
<li class="right">Log In</li>
</ul>
</div>
</body>
</html>
Hopefully this works for you, any issues please report back. It worked in the fiddle so it should apply the same to your project.
Best of luck mate!
Editted on https://jsfiddle.net/ns82ne1z/4/
<div class="container-fluid">
<div class="navbar-inner site-top-nav">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
<li>Register</li>
</ul>
</div>
Add in the following CSS
.site-top-nav li{
padding-left:15px;
padding-right:15px;
}
.navbar-nav>li {
float: left;
}
Hope this helps.
I want to reduce bootstrap navbar height ,What is the best solution to achieve this task , should i overwrite bootstrap css or any pure css solution ?
main.html
<div class="col-md-10">
<div class="tab-content">
<nav class="navbar navbar-default container-panel">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="z-index:10;">
<ul class="nav navbar-nav pull-right">
<li class="dropdown">
<li>some other stuff</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
main.css
.navbar.container-panel {
width:250px;
margin-left: 760px;
min-height: 15px;
}
You need to overwrite the Bootstrap CSS.
In your HTML file put the Bootstrap link first then put your link to your css file after. Then you can go about editing the navbar class you want.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="location/filename.css">
Making the logo and text responsive across all resolution and size. I am having a problem where my text gets collapsed when i re-size my browser. How can i ensure that the logo and the text next to is in same line for all resolution and sizes.
<html>
<head>
<title>Header</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="slider.js"></script>
<style>
.divider-vertical {
height: 50px;
margin-top: 0;
margin-bottom: 0;
margin-left: 20px;
margin-right: 10px;
border-left: 1px solid #a8a8a8;
border-right: 1px solid #a8a8a8;
}
</style>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-default">
<div class="col-sm-3">
<a class="navbar-brand" href="#">BimAssure</a>
<ul class="nav navbar-nav">
<li class="divider-vertical"></li>
<li><h4 style="margin-top: 15px">ACME - New York</h4></li>
</ul>
</div>
</nav>
</div>
</body>
</html>
Below is the fiddle i am being working on. I want the logo and text to be in same line across all resolution and sizes.
http://jsbin.com/yuhibisu/4/edit
You only need to change this
<ul class="nav navbar-nav">
<li class="divider-vertical"></li>
To this:
<ul class="nav navbar-nav divider-vertical">
<li> ...
you have to apply the style to the "ul" and not the "li"
Check it:
http://jsbin.com/yuhibisu/8/edit