Navbar stacked under one another and also not aligned as desired - html

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>

Related

CSS - header spacing from right not equal to spacing from left

This is my first attempt at actually trying to do some CSS outside of www.codeacademy.com and I am having some trouble.
When I run my code, I find that the text in the header is not aligning and the 'logout' is being pushed up against the right as opposed to having the same distance from the edge as 'My Inventory'.
What am I doing wrong?
Also feel free to tell me if I am structuring things badly or anything else, so I can learn. I hope this is the correct place for something like this!
HTML code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Blank</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<header>
<ul>
<li> <a class="active" href="#home">My Inventory</a></li>
<li><a class="browse" href="#browse">Browse Papers</a></li>
<li><a class="build" href="#build">Build A Paper</a></li>
<li><a class="data" href="#data">View Data</a></li>
<li style="float:right"><a class="admin" href="#admin">Settings</a></li>
<li style="float:right"><a class="logout" href="#logout">Log Out</a></li>
</ul>
</header>
</div>
</div>
</body>
</html>
CSS
html {
font-family: "PT Sans", sans-serif;
}
body {
margin: 0;
padding: 0;
}
.container {
min-height:100%;
min-width:100%;
display: grid;
}
a {
text-decoration: none;
}
.header{
font-size: 18px;
line-height: 1.25pt;
background-color: #00AFB5;
width: 100%;
height: 50px;
top: 0;
margin: 0;
padding-top: 20px;
padding-bottom:20px;
padding-left: 10px;
padding-right: 10px;
list-style-type: none;
}
.header li {
display: inline-block;
}
.header a {
display: block;
color: #fff;
}

Use bootstrap, it gives you plenty of options for resizing the viewport and keeping your look and feel of the style. Here is a default example of bootstrap using your link settings. View it in full page mode in the snipit.
https://getbootstrap.com/
https://getbootstrap.com/docs/4.0/components/navbar/
NOTE: I am using the CDN for the example, if you wish to change the styles
Download the bootstrap file.
Search For bootstrap css file.
Open the (bootstrap. css) file and search for 'primary'.
Change it to the color you desire.
You can change any of the theme colors there.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link active" href="#home">My Inventory</a>
</li>
<li class="nav-item">
<a class="nav-link browse" href="#browse">Browse Papers</a>
</li>
<li class="nav-item">
<a class="nav-link build" href="#build">Build A Paper</a>
</li>
<li class="nav-item">
<a class="nav-link data" href="#data">View Data</a>
</li>
</ul>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link admin" href="#admin">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link logout" href="#logout">Log Out</a>
</li>
</ul>
</div>
</nav>
Run the snipit in full page mode.

How to divide menus to left and right in bootstrap

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.

Can't make Navigation Bar horizontal HTML/CSS

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

How can I put content to the right of my bootstrap nav

So I just recently started using bootstrap, and I created navigation buttons. But for some reason I can't put any content to the right of the buttons. I would like to have a section for content to the right of the buttons with a black background.
body{
overflow: hidden;
background-color: #1C213D;
}
ul li{
position: relative;
text-align: center;
list-style: none;
display: block;
color: lightsteelblue;
font-size: 20px;
padding-top: 12px;
padding-bottom: 12px;
margin-top: 200px;
}
.nav{
width: 200px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Home</title>
</head>
<body>
<div class="container-fluid">
<ul class="nav nav-pills nav-stacked" role="tablist">
<li class="active">Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>

This is a continuation to the above question. If you want to make any bottstrap design responsive i.e if you want it to look same in all screen size you should use these classes col-md-4 col-lg-4 col-sm-4 col-xs-4 together. Also I have used col-lg-offset-1 offset classes as it will create a automatic margin(margin of 1 column in this case) between your elements and the design will look good.
body{
overflow: hidden;
background-color: #1C213D;
}
ul li{
position: relative;
text-align: center;
list-style: none;
display: block;
color: lightsteelblue;
font-size: 20px;
padding-top: 12px;
padding-bottom: 12px;
margin-top: 50px;
}
.nav{
width: 200px;
}
.main{
margin-top:50px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Home</title>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4">
<ul class="nav nav-pills nav-stacked" role="tablist">
<li class="active">Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
<div class="col-md-7 col-lg-7 col-xs-7 col-sm-7 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 main">
Main content goes here
</div>
</div>
</body>
</html>
Hope this helps!

You can use col-* classes of bootstrap, assign certain columns width to your nav and certain column width to your main content.
Check the result in expanded window.
body{
overflow: hidden;
background-color: #1C213D;
}
ul li{
position: relative;
text-align: center;
list-style: none;
display: block;
color: lightsteelblue;
font-size: 20px;
padding-top: 12px;
padding-bottom: 12px;
margin-top: 50px;
}
.nav{
width: 200px;
}
.main{
margin-top:50px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Home</title>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="col-md-4">
<ul class="nav nav-pills nav-stacked" role="tablist">
<li class="active">Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
<div class="col-md-8 main">
Main content goes here
</div>
</div>
</body>
</html>

Bootstrap nav pill left and right padding are not equal

I am trying to create a container with 2 tabs using nav-pills in bootstrap. However the gap (white space on the left hand side of the button) is not equal to the gap on the right hand side of the button. I have not added any special padding either.
<meta name="viewport" content="width=device-width, initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0">
<div class="container">
<ul class="nav nav-pills" style="width:96%;">
<li class="active" style="width:48%; text-align: center;">Home</li>
<li style="width:48%; text-align: center;">Menu</li>
</ul>
</div>

Give margin:0 auto; to the .nav-pills element. The .nav-pills has width:96%; so it is aligned to the left side of .container. By using margin:0 auto;, the .nav-pills is centered horizontally.
Jsfiddle
<meta name="viewport" content="width=device-width, initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0">
<div class="container">
//Add margin:0 auto;
<ul class="nav nav-pills" style="width:96%;margin:0 auto;">
<li class="active" style="width:48%; text-align: center;">Home</li>
<li style="width:48%; text-align: center;">Menu</li>
</ul>

You can use nav-justified for this and then just adjust the display rule for under 768px in case you don't want them to stack.
See working Example Snippet.
/**BORDER FOR DEMO ONLY*/
.nav.nav-justified {
border: 1px solid #f00;
border-radius: 4px;
}
/**BORDER FOR DEMO ONLY*/
#media (max-width: 767px) {
.nav-justified.nav-pills-nav > li {
display: table-cell;
width: 1%;
}
.nav-justified.nav-pills-nav > li > a {
margin-bottom: 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.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">
<h3>Won't stack on Mobile</h3>
<ul class="nav nav-pills nav-justified nav-pills-nav">
<li class="active">Home
</li>
<li>Menu
</li>
</ul>
</div>
<hr>
<div class="container">
<h3>Default: Will stack on Mobile</h3>
<ul class="nav nav-pills nav-justified">
<li class="active">Home
</li>
<li>Menu
</li>
</ul>
</div>