I'm new to web developing and I'm trying to create a navigation bar with Bootstrap 5.1.3.
I'm trying to perfectly center "Postal Office", but as you can see it seems to be pushing out to the right. I've tried doing something like mx-auto but it doesn't help. Thanks.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Post Office</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<!--Navigation-->
<div class="m-4">
<nav class="navbar navbar-expand-sm navbar-light" style="background-color: #e3f2fd;">
<div class="container-fluid">
<ul class="nav navbar-nav me-auto">
Home
Mail
Pricing
Contact Us
</ul>
Postal Office
<ul class="nav navbar-nav ms-auto">
<li class="nav-item dropdown">
Account Options
<div class="dropdown-menu dropdown-menu-end">
My Account
Database Access
Sign Out
</div>
</li>
</ul>
</div>
</nav>
</div>
</body>
Output: img
This is because your left data contain more data & space then right your left data contain 262.17 with 4 column and your right data contain 148.05 with 4 column
look like
40
40
40
262.17
110.08
148.05
This solution works because I am splitting the navbar into two navbars. I noticed that regardless of any <center></center> or other HTML/CSS trickery, if you place your text into the navbar with centering, it will be centered with relation to the navbar and not the actual html document.
You probably noticed that the text you desired to put into the center ("Post Office") was centered with respect to the elements already located in the navbar. This is why your text was always shifted slightly to the right — your text had equal spacing between itself and the leftside elements of the navbar and between itself and the rightside elements of the navbar. This is why when we break down the navbar into two navbars, then we can insert centered text that is globally centered to the webpage, as you desired.
The only downside I see to my method is scaling, which you may have to play around with more.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Post Office</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<style>
<!-- START CHANGE-->
<!-- Added CSS elements as suggested by https://stackoverflow.com/questions/45691242/centering-my-text-in-bootstrap-navbar but pretty sure it would work without this-->
.nav {
display: flex;
justify-content: center;
list-style: none;
}
<!-- END CHANGE-->
</style>
</head>
<body>
<!--Navigation-->
<div class="m-4">
<nav class="navbar navbar-expand-sm navbar-light" style="background-color: #e3f2fd;">
<div class="container-fluid">
<ul class="nav navbar-nav me-auto">
Home
Mail
Pricing
Contact Us
</ul>
</div>
<!-- START CHANGE -->
<!-- Split Navbar into two, so that centering is "global" and not relative to the navbar elements -->
<center>Postal Office</center>
<!-- END CHANGE -->
<div class="container-fluid">
<ul class="nav navbar-nav ms-auto">
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle"
data-bs-toggle="dropdown">Account Options</a>
<div class="dropdown-menu dropdown-menu-end">
My Account
<a href="database-access.php" class="dropdown-item">Database
Access</a>
Sign Out
</div>
</li>
</ul>
</div>
</nav>
Here is the result which the OP desired: Centered title in a Bootstrap navbar
Related
I've been trying out materialize and when working on the nav bar, depending on how long the logo is, it will overflow outside the div as shown in the snippet if you were to shrink the window. How would you fix this?
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Quiz Manager</title>
</head>
<body>
<header>
<nav>
<div class="nav-wrapper">
Test Brand Logo
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<li>Javascript</li>
<li>Mobile</li>
</ul>
</div>
</nav>
<ul class="sidenav" id="mobile-demo">
<li>Sass</li>
<li>Components</li>
<li>Javascript</li>
<li>Mobile</li>
</ul>
</header>
</body>
Add the following to your script:
$(document).ready(function () {
$('.sidenav').sidenav();
});
This question already exists:
Finding to position logo on bootstrap very difficult
Closed 5 years ago.
I am trying to position my logo at the top left, inside the navbar.
My logo will not respond when I try to position it to the far-left of the navbar using 'margin-right'.
When I position the logo to the left, it is pushing the menu out to the right to the middle of the navbar.
Could anyone give me advice?
Thank you.
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Arabella Hill</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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='#'><img src="img/arabella.png" class="img-responsive" img style="max-width:300px; margin-top:-80px; margin-right: 100px;"></a>
</div>
<div class="navbar-collapse collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li class="dropdown">
Themes<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-header">Admin & Dashboard</li>
<li>Admin 1</li>
<li>Admin 2</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Have you tried using "margin-left" with a negative value?
... margin-top:-80px; margin-left:-20px; ...
You may need to alter the value to suit the image dimensions.
There may be some other styling on the .navbar or .navbar- header classes that's pushing it right.
Have a look on the the browser inspection tool to check these DIVs for extra styling.
Get rid of the margin-right on your logo. That is pushing your nav to the right.
I would advise putting your styles in a CSS file but if you're going to do inline try something like this if you want it against the left side of the screen
<a class="navbar-brand" href='#'><img src="img/arabella.png" class="img-responsive" style="max-height:50px; margin-top:-80px; margin-left: -30px;"></a>
I would also advise using the developer inspector on your browser to see how padding and margin are affecting the logo.
I am new to bootstrap and am trying to figure out why my menu on the a smaller screen overlaps my picture instead of pushing it down.
I want to have a fixed menu on all screen sizes and it is fine on the desktop sizes, and is actually fixed on 768px. But it needs to push the content down vertically on smaller sizes and right now it is going over the top of my picture.
I have seen the post that said to change to a static header, which I tried, but lost the fixed header in the desktop and still did not push the picture down when expanding the menu on a smaller screen. Something must be off with my basic structure perhaps, as opposed to my css, as I have not really styled the small sized screens yet with css since it seems like a different type of problem. I want to keep the fixed header at all times, and push content down on smaller sizes using the sandwich menu, in what I would think is a more normal process.
Bootstrap is v3.3.7
Any insight would be greatly appreciated
<!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>Untitled Document</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/head-wrapper.css" rel="stylesheet" type="text/css">
<link href="css/navbar1.css" rel="stylesheet" type="text/css">
<link href="css/menu.css" rel="stylesheet" type="text/css">
<link href="css/first-picture.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="top-header"><div class="top-header">
<div id="header-wrapper">
<div class="telephone-icon"><span class="glyphicon glyphicon-phone-alt"></span></div>
<div class="tele-number">530-273-1343</div>
<div class="email-icon"><span class="glyphicon glyphicon-envelope"></span></div>
<div class="email-address">Email CBC</div>
</div>
</div></div>
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1" 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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="topFixedNavbar1">
<ul class="nav navbar-nav">
<li>I'm New</li>
<li>Beliefs</li>
<li>Ministries</li>
<div class="menu-picture"><span class="navbar-brand" href="#"><img src="images/GBCBC-LOGO2.jpg" alt="My Logo"></span></div>
<li>Missions</li>
<li>Sermons</li>
<li>News/Events</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<div class="container-fluid test">
<div class="first-picture"><img src="images/sermon.jpg" width="960" height="600" alt=""/></div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>
I'm just following a bootstrap tutorial, but I got stuck with some weird thing.
chrome and safari show mobile collapse differently with the same code.
I even tried 'copy and paste'!!
this is mobile nav-collapse on safari which it is a correct view.
but on chrome, it just doesn't work somehow.
this is the same one on chrome.
i got no error on console.
I used bower to download jquery and bootstrap.
this is the html code.
main.js and main.css are just empty files.
this is just a very basic bootstrap... but I don't know why..
how can I fix it?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Set the viewport so this responsive site displays correctly on mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 3 Responsive Design Tutorial | RevillWeb.com</title>
<!-- Include bootstrap CSS -->
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="/assets/main.css">
</head>
<body>
<!-- Site header and navigation -->
<header class="top" role="header">
<div class="container">
<a href="#" class="navbar-brand pull-left">
BS3 TUTORIAL
</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-align-justify"></span>
</button>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="navbar-nav nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<!-- Include jQuery and bootstrap JS plugins -->
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/assets/main.js"></script>
</body>
</html>
I have the following test code:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ti Productions</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Project name</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav">
<li>home</li>
<li>about</li>
<li>help</li>
</ul>
</div>
</div>
</div>
</div>
<script src="assets/js/bootstrap-collapse.js"></script>
</body>
</html>
I'm basically trying to test out the collapsable menu shown here:
http://twitter.github.io/bootstrap/components.html#navbar
I've downloaded the boostrap responsive css file as per the instructions, and also the collapse.js file.
The page loads file, with the menu showing. Then when I shrink the browser size, the menu collapses..and the button appears. But I can't open the menu. Whenever i click on the button to display the collapsed menu, I get the following error:
--
[19:08:40.348] TypeError: $ is undefined #
https://myserver/mysite/assets/js/bootstrap-collapse.js:126
line 126 of that file looks like this:
$.fn.collapse = function (option) {
I'm not sure what I'm doing wrong. Any guesstions would be appreciated.
EDIT 1
I've added in the missing jquery.js file but that hasn't resolved the issue.
The includes at the bottom of the page now looks like this:
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
The $ is a jQuery function and needs to be included before the bootstrap-collapse.js.
Try this sequence
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
check if jquery is properly loaded or not . IN Firebug or console try running "$". This type of errors comes , if jquery is not loaded before custom script or their is a conflict with other library using '$' like prototype.