This question already has answers here:
Center content in responsive bootstrap navbar
(12 answers)
Closed 6 years ago.
Here is my code, I have tried many things, help me Obiwan! I tried to do a container tag, ro response to css.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- This sets up bootstrap 3-->
<meta charset="utf-8">
<meta name="veiwport" content="width-device-width, initial-scale-1">
<!-- this sets initial zoom when page is loaded -->
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- links css -->
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Lauren Neely</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Gallery
</li>
<li>Sketchbook + Misc
</li>
<li>Contact
</li>
</ul>
</div>
</nav>
</div>
</body>
</html>
You can add in your css:
#media (min-width: 768px){
.navbar-nav{
text-align:center;
float:none;
}
.navbar-nav li{
float:none;
display:inline-block;
}
}
with float: none you set central align to your .navbar-nav
and setting #media (min-width: 768px) you can apply these rules only for desktop and tablet views. For mobile bootstrap handle navbar in responsive way, so is not necessary.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- This sets up bootstrap 3-->
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale-1">
<!-- this sets initial zoom when page is loaded -->
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- links css -->
<style>
#media (min-width: 768px)
.navbar-nav{
text-align:center;
float:none;
}
.navbar-nav li{
float:none;
display:inline-block;
}
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Lauren Neely</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Gallery
</li>
<li>Sketchbook + Misc
</li>
<li>Contact
</li>
</ul>
</div>
</nav>
</div>
</body>
</html>
Related
This question already has answers here:
Change color of bootstrap navbar on hover link?
(16 answers)
Closed 2 years ago.
I want to change the links color in the navbar when the mouse hovers at each one of them.
This is my code :
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html"></a>
</div>
<ul class="nav navbar-nav">
<li>Home</li>
<li>Product</li>
<li>About us</li>
<li>Contact us</li>
<li class="your_account">Your Account</li>
</ul>
<!-- Search form -->
<form class="form-inline d-flex justify-content-center md-form form-sm">
<input class="form-control form-control-sm mr-3 w-75" type="text" placeholder="Inspire yourself" aria-label="Search">
<i class="fas fa-search"></i>
</form>
</div>
</nav>
</header>
I tried to change it with this code, but didn't work!
nav ul li:hover {
color: red;
}
Any suggestions?
The colors of the links are overridden by the a tags' default styles, so you should apply it to the a tag, not the li tag:
nav ul li:hover a {
color: red;
}
<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Product</li>
<li>About us</li>
<li>Contact us</li>
<li class="your_account">Your Account</li>
</ul>
</nav>
You need to give the hover effect on the anchor tags and not on the <li>
nav ul li a:hover {
color: red;
}
nav ul li a:hover {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>JS Bin</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html"></a>
</div>
<ul class="nav navbar-nav">
<li>Home</li>
<li>Product</li>
<li>About us</li>
<li>Contact us</li>
<li class="your_account">Your Account</li>
</ul>
<!-- Search form -->
<form
class="form-inline d-flex justify-content-center md-form form-sm"
>
<input
class="form-control form-control-sm mr-3 w-75"
type="text"
placeholder="Inspire yourself"
aria-label="Search"
/>
<i class="fas fa-search"></i>
</form>
</div>
</nav>
</header>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"
></script>
</body>
</html>
</body>
</html>
nav ul li a:hover {
color: red;
}
or
.navbar-nav a:hover{
color: red;
}
Hi I am trying to develop navigation bar in CSS. I am very new to CSS but I tried some way in my react/type script application. Below is my expectation.
In the above image, left side project name and right side company logo. In between I need dropdown which has two options. I tried as below.
public render() {
return (
<div id="header">
<div style={{ overflow: "hidden", backgroundColor: "#f1f1f1", padding:"20px 10px" }}>
</div>
</div >
);
}
Which simply display small image with grey color. I am really trying hard to get this done. Can someone help me how can I write CSS and HTML for this. Thanks
If you need CSS + HTML implementation you can have a look at bootstrap Navbar for this. Bootstrap Navbar
<!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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Project Name</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Your Logo</li>
</ul>
</div>
</nav>
</body>
</html>
I've got a screenshot and code of my current site:
CODE
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>
title
</title>
<style>
body{
background-color: #235a59;
}
a: class.navbar-brand{
font-family: sans-serif;
}
</style>
</head>
<body>
<ul>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">title</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><b>Dashboard</b></li>
<li>Donate</li>
<li>Protect</li>
<li>About</li>
</ul>
</div>
</nav>
</ul>
</body>
</html>
SCREENSHOT
Website Navbar
I would like the whole navbar to stretch across the top.
Any help would be appreciated!
Hey there is so many mistakes in your code copy paste this code its working fine
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>
title
</title>
<style>
body{
background-color: #235a59;
}
navbar-brand{
font-family: sans-serif;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">title</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><b>Dashboard</b></li>
<li>Donate</li>
<li>Protect</li>
<li>About</li>
</ul>
</div>
</nav>
</body>
</html>
Use position: absolute, top: 0px and left: 0px to put the navbar in the top-left corner of the page.
Then use width: 100% to make it "stretching" accross the top.
So basically you'll add this to the <style>:
.navbar {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
}
Here is your full code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>
title
</title>
<style>
body{
background-color: #235a59;
}
a: class.navbar-brand{
font-family: sans-serif;
}
.navbar { /*This will do the trick.*/
position: absolute;
top: 0px;
left: 0px;
width: 100%;
}
</style>
</head>
<body>
<ul>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">title</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><b>Dashboard</b></li>
<li>Donate</li>
<li>Protect</li>
<li>About</li>
</ul>
</div>
</nav>
</ul>
</body>
</html>
A living demo here: https://codepen.io/marchmello/pen/bGVGzWW?editors=1000
My Nav bar is not displaying properly.the menus are stacking over another.Could anyone please help me to rule out the issue.i'm attaching the codes i used and also the current display of navbar in browser
<!DOCTYPE html>
<html lang="en">
<head>
<title>New Website</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="bootstrap-4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="bootstrap-4.1.3/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="index.html">New WebSite</a>
</div>
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li>Education</li>
<li>Contact</li>
</ul>
</div>
</nav>
</body>
</html>
I am a complete noob when it comes to using bootstrap, or any HTML. I made a simple banner using photoshop and a simple nav-bar for my high school robotics team, but I am having trouble comprehending bootstrap's grid system. For some reason, my navbar is cutting off my banner. I want the banner below the navbar, how would I do this using bootstrap?
<!DOCTYPE html>
<html>
<head>
<title>Robotics Team 3774 Home</title>
<!-- Link to stylesheet -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/index1.css">
<!-- Mobile Scaling -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- Navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Team 3774</a>
</div>
<div class="navbar-collapse collapse" style="height: 0.866667px;">
<ul class="nav navbar-nav">
<li>Team Bio</li>
<li>Our Robot</li>
<li>Our Coach</li>
<li>Gallery</li>
<li>Outreach</li>
<li>Youtube</li>
</ul>
</div>
</div>
</div>
<!-- Banner -->
<div class="banner">
<img src="Banner.png" class="img-responsive" alt="Responsive image">
</div>
</body>
Bootstrap doesn't really have a banner element, and the grid system isn't necessarily related to placing an item like that into your page. If you want a banner that spans the page like the navbar does, then you probably want to look at their Jumbotron element. All you really have to do is replace your "banner" class with a "jumbotron" like so:
<!-- Banner -->
<div class="jumbotron">
<img src="Banner.png" class="img-responsive" alt="Reponsive image" />
</div>
Then you just need to add a little custom styling to hide the gray background and have your banner image take up the width of the screen:
.jumbotron {
padding-left:0;
padding-right:0;
padding-bottom:0;
}
That should do it. I had to edit my answer once I saw that you had posted the link to your website.
Demo Here
include your banner inside the container tag
<head>
<title>Robotics Team 3774 Home</title>
<!-- Link to stylesheet -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/index1.css">
<!-- Mobile Scaling -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- Navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Team 3774</a>
</div>
<div class="navbar-collapse collapse" style="height: 0.866667px;">
<ul class="nav navbar-nav">
<li>Team Bio</li>
<li>Our Robot</li>
<li>Our Coach</li>
<li>Gallery</li>
<li>Outreach</li>
<li>Youtube</li>
</ul>
</div>
</div>
<!-- Banner -->
<div class="banner">
<img src="Banner.png" class="img-responsive" alt="Responsive image">
</div>
</div>
Just add the following line to your CSS:
body
{
padding-top:50px;
}
And you should be good to go.
This is generally done in Bootstrap when navbar-fixed-top is used.