I'm quite new to CSS and bootstrap here.
I am trying to align a list on the navbar horizontally but I can't figure out what's wrong.
Instead of aligning them side by side, it seems to align one below the other, which is not what I'm looking for.
HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" contents="IE=edge">
<meta name="viewport" content="width=device-width, initial scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/terms.css">
<link rel="shortcut icon" type="image/png" href="images/favicon.png"/>
<title>Terms of Service</title>
</head>
<body>
<!--Header-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle">
<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="images/logo.png" alt="Bet Coins">
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">
<b>Terms of Service<b>
</li>
<li>
<b>Legal Guidelines</b>
</li>
<li>
Privacy Policy
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
CSS code:
.navbar{height:95px;}
.body{background-color: #000000;color: #FFFFFF;}
.navbar-nav li a{line-height: 64px;}
Image:
This is a really small thing, but you need to be careful to close all your tags properly; if you close the <b> tags in your <li> then it works. Apart from that your markup is correct. It should look like this:
<li class="active">
<b>Terms of Service</b>
</li>
<li>
<b>Legal Guidelines</b>
</li>
<li>
Privacy Policy
</li>
I also added a closing slash to the <img> tag here:
<img src="images/logo.png" alt="Bet Coins" />
but I think that's less crucial than closing the <b> tags properly.
Demo here:
http://jsfiddle.net/6804py5w/1/
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>David Chu's China Bistro'</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oxygen:wght# S300;400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght#0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<!--here container is used and not container-fluid because there is little info on this homepage thus we don't want the width to stretch to the full width of the screen-->
<div class="navbar-header">
<a href="index.html" class="pull-left visible-md visible-lg">
<div id="logo-img" alt="Logo image"></div><!--the id #logo-img is responsible to print the logo-->
</a>
<div class="navbar-brand">
<h1>David Chu's China Bistro</h1>
<p>
<img src="images/K-star-logo.jpg" id="K-logo" alt="Kosher certification" />
<span>Kosher certified</span>
</p>
</div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" 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>
<div id="collapsable-nav" class="collapse navbar-collapse">
<ul id="nav-list" class="nav navbar-nav navbar-right">
<!--used to display our menu items(use unordered list)-->
<li>
<a href="menu-categories.html">
<span class="glyphicon glyphicon-cutlery"<!--glyphicon is used to import the image of the cutlery and let it behave as a font--></span><br class="hidden-xs" /><!--break tag is used here to remove the Menu word when we reach the breakpoint-->Menu
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-info-sign"></span><br class="hidden-xs" />About
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-certificate"></span>
<br class="hidden-xs" />Awards
</a>
</li>
<li id="phone" class="hidden-xs">
<a href="tel:410-602-5008">
<span>410-602-5008</span>
</a><div>*We Deliver</div>
</li>
</ul>
</div>
</div>
</nav>
</header>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
My code is responsible for displaying the navbar of a website. When my screen is at full-page i am getting next to the restaurant's name "menu", "awards" and "About".
When the page is squeezed (or website used on a phone), I need the "menu", "awards" and "About" buttons to disappear and display in their place a toggle navigation button that when clicked will display those 3 buttons, which is not happening.
I cannot figure out how to get my button for my collapsible navbar not to appear all the time. I have followed various online tutorials with almost the exact same code as mine however I am not achieving the same result.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pentakill - About</title>
<link rel="icon" href="images/pentakilllogo.ico">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/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.0/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Metal Mania' rel='stylesheet'>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<nav class="navbar navbar-expand-sm sticky-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#myCollapsibleNavbar">
<span class="icon-bar metal">Options</span>
</button>
<a class="navbar-brand pentaicon"><img src="images/pentakilllogo.ico"></a>
<span class="navbar-brand metal">Pentakill</span>
</div>
<div class="collapse navbar-collapse" id="myCollapsibleNavbar">
<ul class="nav navbar-nav">
<li>
<a class="metal" href="index.php">Home</a>
</li>
<li>
<a class="metal" href="about.php">About</a>
</li>
<li>
<a class="metal" href="music.php">Music</a>
</li>
<li class="active">
<a class="metal" href="tour.php">Tour</a>
</li>
<li class="nav-item">
<a class="metal" href="members.php">Members</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a class="metal" href="login.php"><span class="glyphicon glyphicon-user"></span>Login/Sign Up</a></li>
</ul>
</div>
</div>
</nav>
I have tried adding and removing various divs but nothing seems to make a difference.
I also tried removing the word "Options" in case that was the culprit, but with no luck.
Are you intentionally using the Bootstrap 3.4 CDN instead of the most recent version? Following along on a tutorial such as https://getbootstrap.com/docs/4.0/components/navbar/ may cause issues. I placed your code into a codepen linked to the latest version and don't see the button, just spacing issues then.
I'm trying to hide the contents' titles inside navbar (because they're already showed in the page's body) and they can only be showed in the collapse button when scale down the screen. In other words, except the brand, there'll be no content in the navbar, and the content can only be showed in the navbar when scale down the screen and open the collapse button. I don't know any class that can hide contents. I tried to use hidden-... but it didn't work. Could you suggest me some ways?
Here are my codes:
HTML:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css" />
<title>Module 3 Assignment</title>
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-brand">
<h1>Food, LLC</h1>
</div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-nav" 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 id="collapse-nav" class="collapse navbar-collapse">
<ul id="#nav-list" class="nav navbar-nav">
<li class="hidden-md hidden-sm">
<br class="hidden-xs"/>Chicken
</li>
<li class="hidden-md hidden-sm">
<br class="hidden-xs"/>Beef
</li>
<li class="hidden-md hidden-sm">
<br class="hidden-xs" />Sushi
</li>
</ul>
</div>
</div>
</nav>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I am trying to make a collapsable navbar with bootstrap, the nav does collapse but when I click on it it does not dropdown here is all the code I have in my index html page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Honk</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="public/stylesheets/styles.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="public/stylesheets/custom.css">
</head>
<body>
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img class="logo" src="public/images/honklogoo.png" alt="">
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a class="discrip" href="#">About</a></li>
<li>Commuters</li>
<li>Travelers</li>
<li>On Demand</li>
<li>Safety</li>
<li>Download</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
you dont have the the bootstrap js script in your html (you just have the css)
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
its working here: http://jsfiddle.net/swm53ran/26/
btw, make sure you put it after your jquery script since bootstrap is dependent on jquery
i'm updating my site to bootstrap 3 and i have a problem i have added my navbar and header but when i try to add a jumbotron it appears under the bs-header dono why it does that i check every thing if my div are closed and they are sow if some one can tel me what i'm doing wrong ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="HyperGainZ">
<title> My Mod Pack ยท MMP </title>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap-simplex.css" rel="stylesheet">
<link href="assets/css/bootstrap-simplex.min.css" rel="stylesheet">
<!-- Documentation extras -->
<link href="assets/css/docs-index.css" rel="stylesheet">
<link href="assets/css/pygments-manni.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
<!-- Favicons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
MMP
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="download">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="download">
<li><a tabindex="-1" href="#">1</a></li>
<li><a tabindex="-1" href="#">2</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">3</a></li>
<li><a tabindex="-1" href="#">4</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Sign Up</li>
<li class="divider"></li>
<li>Sign In</li>
</ul>
</div>
</div>
<div class="bs-header" id="content">
<div class="container">
<br />
<img src="assets/img/index.jpeg" class="img-circle" width="125px" height="125px"alt="Sevadus" align="left">
<h1>MMP</h1>
<p class="lead">My Mod Pack</p></img>
<div id="carbonads-container">
<div class="carbonad">
<div id="azcarbon">
<h4>Site Version : <span class="badge badge-success">Alpha</span></h4>
<h4>Head Of Project : <span class="badge badge-info">HyperGainZ</span></h4>
<h4>acepting Beta's : <span class="badge badge-success">Yes</span></h4>
<h4>Public Launcher : <span class="badge badge-primary">Not Yet</span></h4>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 jumbotron">
<h1>Pack Assembler</h1>
<p>Managing Mods, Packs, and Servers easily and efficiently.</p>
<p>
Get Started <i class="icon-double-angle-right"></i>
</p>
</div>
</div>
</div>
<!-- Placed at the end of the document so the pages load faster -->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</body>
Because you're containing .bs-header within .navbar-fixed-top you'll need to use top padding equal to the static height of your navbar, on the body.
From the bootstrap documentation:
The fixed navbar will overlay your other content, unless you add
padding to the top of the . Tip: By default, the navbar is 50px
high.