For some reason my Navbar seems to have 0 top padding and be slightly off to the right.
The HTML is almost a directly copy & paste from the example, I cannot for the life of my figure out why it isn't working.
Messed up navbar
<%# Master Language="C#" AutoEventWireup="true"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="description" content="" />
<meta name="author" content="" />
<title>Main master</title>
</head>
<body>
<div class="container">
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Test Demo</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li>GitHub</li>
<li>NuGet</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Demos <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>demo</li>
<li>demo</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<asp:ContentPlaceHolder ID="ContentSection" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
You have 2 <div class="container"></div>, which both have an offset. Remove one of them and see if that solves your issue.
<%# Master Language="C#" AutoEventWireup="true"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="description" content="" />
<meta name="author" content="" />
<title>Main master</title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Test Demo</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li>GitHub</li>
<li>NuGet</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Demos <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>demo</li>
<li>demo</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<asp:ContentPlaceHolder ID="ContentSection" runat="server">
</asp:ContentPlaceHolder>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Bootstrap would appear to need custom .css files for some properties, in this case the navbar top handling was handled by "navbar.css"
body {
padding-top: 20px;
padding-bottom: 20px;
}
.navbar {
margin-bottom: 20px;
}
creating this file and linking it in the header seemed to fix the issue.
Related
I am using Bootstrap 4 to toggle the collapse of dropdown menu for small screens (sm) in my navbar. But the toggling doesn't work, nothing happens when I click on the toggle button.
I made sure to import all the assets/links in correct order. Can any one see what's wrong?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<environment include="Development">
<link href="~/lib/bootstrap/css/bootstrap.css" rel="stylesheet" />
<script src="~/lib/jquery/jquery.js"></script>
<script src="~/lib/bootstrap/js/bootstrap.js"></script>
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</environment>
<link href="~/css/site.css" rel="stylesheet" />
<title>#ViewBag.Title</title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" asp-action="index" asp-action="home">
<img src="~/images/leon.jpg" height="30" width="30" />
</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" datatarget="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a asp-action="index" asp-action="home" class="nav-link">List</a>
</li>
<li class="nav-item">
<a asp-action="create" asp-action="home" class="nav-link">Create</a>
</li>
</ul>
</div>
</nav>
<div>
#RenderBody()
</div>
</div>
#if (IsSectionDefined("Scripts"))
{
#RenderSection("Script", required: false)
}
</body>
</html>
You have a wrong syntax on datatarget, it should be data-target.
Change this:
datatarget="#collapsibleNavbar"
To this:
data-target="#collapsibleNavbar"
Example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
I am trying to figure out in boot strap how to have a left aligned link, and right aligned link, and then the collapsable links.
Link###############################Link#CollapableLink
I tried using but did not work
<div class=""nav navbar-nav navbar-right">
<ul class="nav navbar-nav ">
<li>Link</li>
</ul>
</div>
<!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 role="navigation" class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Company</a>
</div>
<div id="navbar" class="navbar-collapse collapse navbar-right">
<ul class="nav navbar-nav">
<li >Home</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false">
Menu <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>
I'm having a trouble with no scroll bar showing up on my page when I resized the web page. this page was built up with bootstrap and used CDN as an option to install, so i have nothing to do with the css, any help would be highly appreciated, thank you so much
the code--
<!DOCTYPE HTML>
<html lang="id">
<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>attor - Hukum lebih mudah dengan attor</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- logo -->
<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>
<a class="navbar-brand" href="#">attor</a>
</div>
<!-- menu items -->
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Direktori attor</li>
<li>Blog</li>
<!-- dropdown menus -->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">FAQ <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>For client</li>
<li>For attorney</li>
</ul>
</li>
<li>Cara kerja</li>
<li><span class="glyphicon glyphicon-user"></span> Sign in</li>
</ul>
</div>
</div>
</div>
<!-- jumbotron -->
<div class="jumbotron">
<div class="container">
<h1>Lorem ipsum dolor sit amet</h1>
<p>lorem ispsum dolor sit amet.</p>
<p a class="btn btn-primary btn-lg" href="#" role="button">Start now</p>
</div>
</div>
<div class="page-header">
<h1>Why<small>attor?</small></h1>
</div>
<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>
You had few mark-up error in your code--you forgot to close the nav and head tag.
now working fine
<!DOCTYPE HTML>
<html lang="id">
<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>attor - Hukum lebih mudah dengan attor</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style type="text/css">
.jumbotron {
height: 1000px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- logo -->
<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>
<a class="navbar-brand" href="#">attor</a>
</div>
<!-- menu items -->
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Direktori attor</li>
<li>Blog</li>
<!-- dropdown menus -->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">FAQ <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>For client</li>
<li>For attorney</li>
</ul>
</li>
<li>Cara kerja</li>
<li><span class="glyphicon glyphicon-user"></span> Sign in</li>
</ul>
</div>
</div>
</div>
</nav>
<!-- jumbotron -->
<div class="jumbotron">
<div class="container">
<h1>Lorem ipsum dolor sit amet</h1>
<p>lorem ispsum dolor sit amet.</p>
<p a class="btn btn-primary btn-lg" href="#" role="button">Start now</p>
</div>
</div>
<div class="page-header">
<h1>Why<small>attor?</small></h1>
</div>
</body>
</html>
How to create following nav/brand logo responsive behavior based on the standard bootstrap nav code, please?
Illustration: Responsive nav behavior
Code: http://www.bootply.com/8suUu6W5ZB#
Thanks for any help!
I have not used bootply before, So I don't know whether tags for html, body is included by bootply automatically. But I could not see those tags in your html, but could see styles for those. Basic structure of the html with bootstrap would like this. I have included a nav bar for you. So use this as a template to work on your project.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 user-scalable=none">
<title>Trying out bootstrap </title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">A WV Gates Corporation</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Profile</li>
<li>About</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Make sure to include the files of bootstrap and jquery in the appropriate paths!
I found the menu bar will overwrite some content of first line. When I click the dropdown 'first', it will locate to the first list item, but it was overwritten by menu bar. I've try apply one solution Posted in jsbin, but failed.
original html is here.
<!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">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">Bootstrap theme</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>first</li>
<li>end</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<ul>
<li id="first">first</li>
<li>a2</li><li>a3</li><li>a4</li><li>a5</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li>
<li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li>
<li id="end">end</li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
SOLUTION demo (as answer)
Try this:
DEMO
Use padding top in the <li>
<li id="first" style="padding-top: 50px;">first</li>
Protip: Read the docs!
Body padding required
The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
body { padding-top: 70px; }
Make sure to include this after the core Bootstrap CSS.