float: left;
and
display: inline;
are both failing to work.
What am I doing wrong? How can I make this navigation bar horizontal?
.navbar li {
margin: 5px;
padding: 0;
width: 80px;
float: left;
}
<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">
<a class="navbar-brand">Simmo Simpson</a>
</div>
<ul class="nav navbar-nav">
<li id="navbar" class="active">Home</li>
<li id="navbar" class="active">About</li>
<li id="navbar" class="active">Portfolio</li>
<li id="navbar" class="active">Contact</li>
</ul>
</div>
</nav>
put your css inside style tags or an external css file and include it in the header section of your html
<style>
ul li{ display: inline;}
</style>
try the following code snippet, it might help you
.navbar li {
margin: 5px;
padding: 0;
width: 80px;
float: left;
list-style-type : none;
}
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Simmo Simpson</a>
</div>
<ul class="nav navbar-nav">
<li id="navbar" class="active">Home</li>
<li id="navbar" class="active">About </li>
<li id="navbar" class="active">Portfolio </li>
<li id="navbar" class="active">Contact </li>
</ul>
</div>
</nav>
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>
Changed
.navbar li {
to
li.navbar {
li.navbar {
margin: 5px;
padding: 0;
width: 80px;
float: left;
}
<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">
<a class="navbar-brand">Simmo Simpson</a>
</div>
<ul class="nav navbar-nav">
<li id="navbar" class="active">Home</li>
<li id="navbar" class="active">About</li>
<li id="navbar" class="active">Portfolio</li>
<li id="navbar" class="active">Contact</li>
</ul>
</div>
</nav>
Is this what you are looking for?
Solved:
The
<li id="navbar" class="active">Home</li>
elements need the corresponding CSS to be
#navbar
and NOT
.navbar li
.navbar li should be used in the CSS for the html class attribute class="navbar li" whereas #navbar should be used the ID attribute
When I changed that, the CSS styling was applied to the html with the corresponding id attribute.
It seems you're doing things the right way, but your code sample misses some tags :
<html>
<head>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Simmo Simpson</a>
</div>
<ul class="nav navbar-nav">
<li class="navbar-link" class="active">Home</li>
<li class="navbar-link" class="active">About</li>
<li class="navbar-link" class="active">Portfolio</li>
<li class="navbar-link" class="active">Contact</li>
</ul>
</div>
</nav>
<style>
.navbar li {
margin: 5;
padding: 0;
width: 80;
float: left;
}
</style>
</body>
</html>
will do the trick. You have to say to the browser, what it have to do with those lines : use Html <html> and apply that style using <style> . If your style directives have to be more important, I think that it could be a better way to create a second file that will contains all your css and to link it with your html document.
EDIT :
The css rule : .navbar li will find the navbar class and find all its li childs, so you can remove ids on each li and replace them by a class name
I hope it may help
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: ;
}
So, I'm just starting with web dev and was learning bootstrap. This is my code,
<!DOCTYPE html>
<html>
<head>
<title>IMAGE GALLERY</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<style type="text/css" media="screen">
.navcolor{
background-color: #042638;
}
.textcolor{
color: white;
}
.align{
margin-left: 80px;
}
.one{
width: 40px;
height: 40px;
color:white;
}
</style>
</head>
<body>
<nav class=" navbar navabar-default navcolor ">
<div class="navbar-header">
<img class="one align" src="https://www.pngkey.com/png/full/212-2129758_ios-gallery-icon-png.png" >
IMGS
</div>
<ul class="nav navbar-nav ">
<li><a class="textcolor" href="#">About</a></li>
<li><a class="textcolor" href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a class="textcolor" href="#">Sign Up</a></li>
<li><a class="textcolor" href="#">Login</a></li>
</ul>
</nav>
</body>
</html>
I know I should have a separate file for CSS, but I was just trying something. Now, this definitely seems very basic. I was expecting something like this.
But, what I got was, something like this.
Ignore the logo ofc. I'm more concerned about the fact that 'About' and 'Contact' are stacked over one other and also for some reason it is in the middle. I tried 'navbar-left' or 'pull-left' but it stays in the middle. Any help would really be appreciated.
You can place About and Contact next to each other using flexbox:
.navbar-nav {
display: flex;
}
As for bringing the links from the middle to the left, I'd recommend placing them in a new <div> and utilising flexbox with justify-content:
.links {
display: flex;
justify-content: space-between;
}
As is done in this snippet:
<!DOCTYPE html>
<html>
<head>
<title>IMAGE GALLERY</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style type="text/css" media="screen">
.navcolor {
background-color: #042638;
}
.textcolor {
color: white;
}
.one {
width: 40px;
height: 40px;
color: white;
}
.navbar {
display: flex;
}
.navbar-nav {
display: flex;
}
.links {
flex-grow: 1;
display: flex;
justify-content: space-between;
}
</style>
</head>
<body>
<nav class=" navbar navabar-default navcolor ">
<div class="navbar-header">
<img class="one align" src="https://www.pngkey.com/png/full/212-2129758_ios-gallery-icon-png.png">
IMGS
</div>
<div class="links">
<ul class="nav navbar-nav ">
<li><a class="textcolor" href="#">About</a></li>
<li><a class="textcolor" href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a class="textcolor" href="#">Sign Up</a></li>
<li><a class="textcolor" href="#">Login</a></li>
</ul>
</div>
</nav>
</body>
</html>
Hi I want to change the font color of the bootstrap navbar links and already tried setting a specific class to the navbar like those suggested in other posts similar to this. However, I only managed to change the font of the navbar brand. Can you give any suggestions? Is there a problem with my specificity?
header{
margin-top: 1em;
}
.navbar-main{
background-color: #00cc99;
}
.navbar .navbar-www{
color: white;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav class="navbar navbar-default navbar-main">
<div class="container">
<div class="navbar-header">
Kau Unlimited
</div>
<ul class="nav navbar-nav navbar-www">
<li>About</li>
<li>Services</li>
<li>Products</li>
<li>Contact Us</li>
</ul>
<ul class="nav navbar-nav navbar-right"></ul>
</div>
</nav>
I'm still an absolute beginner at coding and trying to avoid !important and still learning on specificity.
Thank you!
header{
margin-top: 1em;
}
.navbar-main{
background-color: #00cc99;
}
.navbar-www li a{
color: white !important;
<header>
<nav class="navbar navbar-default navbar-main">
<div class="container">
<div class="navbar-header">
Kau Unlimited
</div>
<ul class="nav navbar-nav navbar-www">
<li>About</li>
<li>Services</li>
<li>Products</li>
<li>Contact Us</li>
</ul>
<ul class="nav navbar-nav navbar-right"></ul>
</div>
</nav>
</header>
Try to avoid !important as it is a bad habit. You can override the bootstrap CSS by adding some extra classes to your navbar or may be any ID.
Here is what you can do to change the navlink text color
.navbar-www.navbar-brand li a{
color:#fff;
}
If this doesn't override, try to add some id in you navbar and make your css code something like this.
#navbar.navbar-www.navbar-brand li a{
color:#fff;
}
You can easily check in the console, what is the styling of the nav link bootstrap. You can override this by adding one extra selector, either it is class, attribute, id, or any parent selector.
You need to add color for link please replace .navbar .navbar-www this with .navbar .navbar-www a please check below
header{
margin-top: 1em;
}
.navbar-main{
background-color: #00cc99;
}
.navbar .navbar-www a{
color: white;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav class="navbar navbar-default navbar-main">
<div class="container">
<div class="navbar-header">
Kau Unlimited
</div>
<ul class="nav navbar-nav navbar-www">
<li>About</li>
<li>Services</li>
<li>Products</li>
<li>Contact Us</li>
</ul>
<ul class="nav navbar-nav navbar-right"></ul>
</div>
</nav>
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'm very new to HTML and CSS. I'm trying to center the navbar at the top of a site. Here is my HTML code:
<!-- Navigation -->
<div class="nav_container">
<nav class="navbar navbar-default navbar-fixed-top top-nav-collapse" role="navigation">
<div class="container">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav page-scroll" style="text-align:center">
<li>
<a class="page-scroll" href="#page-top">Start</a>
</li>
<li>
<a class="page-scroll" href="#packages">Packages</a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#showcase">Showcase</a>
</li>
<li>
<a class="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
And here is (some) relevant CSS code:
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
#media (min-width: 768px) {
.navbar {
border-radius: 4px;
}
}
.nav_container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
position: relative;
opacity: 1;
text-align: center;
}
.nav_container nav {
display: inline-block;
text-align: center;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
I must apologise in advance if this question looks like a duplicate of other questions. I have tried out different permutations of how the CSS code should be set according to other answered questions, but to be honest how and which class in the CSS code takes precedence is still not clear to me and my navbar is just not centering. I took the code from a bootstrap site, and am simply reverse engineering. It could be that what is already written contains some redundant code (for example, there may be too many divs) and so may need to be cleared up.
change :
<div class="nav_container">
<nav class="navbar navbar-default navbar-fixed-top top-nav-collapse" role="navigation">
<div class="container">
To :
<div class="container">
<div class="nav_container">
<nav class="navbar navbar-default navbar-fixed-top top-nav-collapse" role="navigation">
Demo
Note : For See Result increment Result Page.