I am trying to create a responsive website: when resizing the window, you get the "mobile" view. So a button appears. By pushing on the button you can toggle the navigation bar (make it appear and disappear).
This website does this very well: https://blackrockdigital.github.io/startbootstrap-freelancer/
So I tried replicating this behaviour myself:
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/test.css">
</head>
<body>
<!--Navigation bar-->
<nav class="navbar navbar-custom navbar-fixed-top" id="myNavbar">
<div class="container">
<div class="navbar-brand">
<img src="images/testLogo.png">
</div>
<button class="navbar-toggler navbar-toggler-right text-uppercase bg-primary text-white rounded" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarResponsive" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right" id="ul">
<li class="active">Home</li>
<li>Services</li>
<li>Partners</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
CSS:
/**
* Navigation bar.
*/
#myNavbar
{
padding-top: 1.5rem;
padding-bottom: 2.5rem;
background-color: rgb(100, 100, 100);
}
#navbarResponsive
{
width: 65%;
}
.navbar-collapse
{
flex-basis: 100%;
flex-grow: 1;
}
.nav > li > a
{
font-size: 18px
}
.navbar-brand
{
font-size: 28px;
}
img
{
height: 70px;
width: 70px;
float: right;
margin-top:-20px;
margin-left: 20px;
}
.navbar > .container, .navbar > .container-fluid
{
display: flex;
justify-content: space-between;
}
#media (min-width: 900px)
{
.navbar-toggler
{
display:none;
}
}
.container
{
width: 100%;
}
button
{
background-color: transparent;
}
.bg-primary
{
background-color: transparent;
}
.navbar-toggler-icon
{
background-color: transparent;
display: inline-block;
width: 1.5em;
height: 1.5em;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
Everything seems ok, but when pushing the button the navigation bar (Home - Services - Partners - Contact) does not appear on the next line but rather on the same line and everything gets shifted to the left: https://imgur.com/a/8JU2oKT
Could someone tell me why the navigation bar is not displayed on the next line?
From a quick glance at your code the css seems not to be the problem, rather the placement of your div's. Try to replace the HTML to this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/test.css">
</head>
<body>
<!--Navigation bar-->
<nav class="navbar navbar-custom navbar-fixed-top" id="myNavbar">
<div class="container">
<div class="navbar-brand">
<img src="images/testLogo.png">
</div>
<button class="navbar-toggler navbar-toggler-right text-uppercase bg-primary text-white rounded" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div id="navbarResponsive" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right" id="ul">
<li class="active">Home</li>
<li>Services</li>
<li>Partners</li>
<li>Contact</li>
</ul>
</div>
</nav>
</body>
</html>
I replaced the div with the actual menu inside, outside of the container div but still inside the nav.
Try this code;
HTML
<!-- .navbar -->
<nav class="navbar navbar-full navbar-dark bg-primary">
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#mainNavbarCollapse">
☰
</button>
<a class="navbar-brand" href="#">
<img class="img-rounded" src="images/testLogo.png">
</a>
<div class="collapse navbar-toggleable-md" id="mainNavbarCollapse">
<ul class="nav navbar-nav pull-lg-right">
<li class="nav-item">
<a class="nav-link" href="main.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="projects.html">Partners</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- /.navbar -->
CSS
#media (max-width: 62em) {
.navbar-nav {
padding-top: .425rem;
padding-left: 0.75rem;
}
.navbar-nav .nav-item {
float: none;
}
.navbar-brand {
float: right;
}
.navbar-brand,
.navbar-nav .nav-item {
display: block;
}
.navbar-nav .nav-item + .nav-item {
margin-left: 0;
}
.dropdown-menu {
position: relative;
float: none;
}
}
Related
I am making a system to view the db on the web but
db columns are buried to the right because of the empty space on the left How to solve this
All css is applied.
I know it's a css problem, and I think it's a problem in the lower menu of _Layout, but I don't know exactly what the problem is.
this project is made blazor server
but i use only razor page
this current page cshtml
#page "/MyPage/Leader"
#model WebApplication1.Pages.Mypage.LeaderModel
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#{
Layout = "_Layout";
}
<tbody>
#foreach (var item in Model.borad_tbl)
........
this is layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - WebRP</title>
<link href="~/css/site.css" rel="stylesheet" />
<link href="~/css/bootstrap/bootstrap.min.css" rel="stylesheet" />
</head>
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
#*<a class="navbar-brand" asp-page="">MyPage</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>*#
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-page="Mypage/MyPage">Mypage</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-page="/Login/LoginPage">Login</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
css
site css
#import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
html, body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
a, .btn-link {
color: #0366d6;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.content {
padding-top: 1.1rem;
}
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}
.invalid {
outline: 1px solid red;
}
.validation-message {
color: red;
}
#blazor-error-ui {
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
If you want to remove the empty space on the left,Try to add the following code to your layout:
<style>
.container {
margin-left:0px;
}
</style>
Update:
You need to make sure you add the css into layout:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - WebRP</title>
<link href="~/css/site.css" rel="stylesheet" />
<link href="~/css/bootstrap/bootstrap.min.css" rel="stylesheet" />
</head>
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
#*<a class="navbar-brand" asp-page="">MyPage</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>*#
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-page="Mypage/MyPage">Mypage</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-page="/Login/LoginPage">Login</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
</body>
</html>
<style>
.container {
margin-left:0px;
}
</style>
With the css:
I'm having difficulty moving items on my Navbar to either end. At the moment I have this:
I would like to move the flag image next to the toggler button, it is only there when the breakpoint reaches the Navbar button size, 992px.
I'm sure the Bootstrap Stylesheet is aligning it using justify-content: space-between; I have tried using align-self: flex-end !important; on both flag and button as well as using justify-content-end
Codepen - https://codepen.io/jvern22/pen/gZjJBN
My Nav code;
<div class="container container-navbar">
<a class="navbar-brand" href="index.php">Website title</a>
<a class="navbar-brand justify-content-end" href="#"><img src="assets/img/spain.png" class="navbar-flag"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#top-navbar-1" aria-controls="top-navbar-1" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="top-navbar-1">
<ul class="navbar-nav justify-content-end">
<li class="nav-item"><a class="nav-link" href="?page=taketour"><?php echo $lang['nav_takeatour']; ?></a></li>
<li class="nav-item"><a class="nav-link" href="?page=websites"><?php echo $lang['nav_websites']; ?></a></li>
</ul>
</div>
</div>
</nav>
You can either wrap the flag and the navbar button within a div as shown in this CodePen or in the Code Snippet below:
html {
height:100%;
box-sizing: border-box;
}
body {
min-height:100%;
padding:0;
margin:0;
position:relative;
font: 400 15px "Open Sans", sans-serif;
line-height: 30px;
text-align: center;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
.bg-dark {
background: #000 !important;
color: #fff;
}
.bg-dark a {
color: #aaa;
}
.bg-dark a:hover, .bg-dark a:focus {
color: #fff;
}
.navbar-nav>li>a {
line-height: 20px;
padding-right: 12px!important;
padding-left: 12px!important;
padding-top: 10px!important;
padding-bottom: 10px!important;
}
.navbar-flag {
height: 20px;
}
#media (min-width: 992px) and (max-width: 2200px){
.navbar-flag {
display: none;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark navbar-no-bg" role="navigation">
<div class="container container-navbar">
<a class="navbar-brand" href="index.php">Website title</a>
<div>
<a class="navbar-brand justify-content-end" href="#"><img src="
https://i.imgur.com/TXhhmGb.png" class="navbar-flag"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#top-navbar-1" aria-controls="top-navbar-1" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="top-navbar-1">
<ul class="navbar-nav justify-content-end">
<li class="nav-item"><a class="nav-link" href="?page=taketour"><?php echo $lang['nav_takeatour']; ?></a></li>
<li class="nav-item"><a class="nav-link" href="?page=websites"><?php echo $lang['nav_websites']; ?></a></li>
<li class="nav-item"><a class="nav-link" href="?page=rates"><?php echo $lang['nav_rates']; ?></a></li>
<li class="nav-item"><a class="nav-link" href="?page=contactus"><?php echo $lang['nav_contact']; ?></a></li>
</ul>
</div>
</div>
</nav>
Or you can just change the justify-content property of the parent div from space-between to flex-end and add a margin-right: auto to the first navbar-brand as shown in this CodePen or in the Code Snippet below:
html {
height:100%;
box-sizing: border-box;
}
body {
min-height:100%;
padding:0;
margin:0;
position:relative;
font: 400 15px "Open Sans", sans-serif;
line-height: 30px;
text-align: center;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
a.navbar-brand:first-child {
margin-right: auto;
}
.bg-dark {
background: #000 !important;
color: #fff;
}
.bg-dark a {
color: #aaa;
}
.bg-dark a:hover, .bg-dark a:focus {
color: #fff;
}
.navbar-nav>li>a {
line-height: 20px;
padding-right: 12px!important;
padding-left: 12px!important;
padding-top: 10px!important;
padding-bottom: 10px!important;
}
.navbar-flag {
height: 20px;
}
#media (min-width: 992px) and (max-width: 2200px){
.navbar-flag {
display: none;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<!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.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark navbar-no-bg" role="navigation">
<div class="container container-navbar">
<a class="navbar-brand" href="index.php">Website title</a>
<a class="navbar-brand justify-content-end" href="#"><img src="
https://i.imgur.com/TXhhmGb.png" class="navbar-flag"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#top-navbar-1" aria-controls="top-navbar-1" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="top-navbar-1">
<ul class="navbar-nav justify-content-end">
<li class="nav-item"><a class="nav-link" href="?page=taketour"><?php echo $lang['nav_takeatour']; ?></a></li>
<li class="nav-item"><a class="nav-link" href="?page=websites"><?php echo $lang['nav_websites']; ?></a></li>
<li class="nav-item"><a class="nav-link" href="?page=rates"><?php echo $lang['nav_rates']; ?></a></li>
<li class="nav-item"><a class="nav-link" href="?page=contactus"><?php echo $lang['nav_contact']; ?></a></li>
</ul>
</div>
</div>
</nav>
<!-- 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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
The easiest solution here is to just expand the first flex item so that it pushes all the other items to the right. This can be easily done by adding the following to your css:
.navbar-brand:first {
flex-grow: 1;
}
I am trying to get a full screen navigation overlay to work on iPad sizes etc. I'm using bootstrap 3, and what I want is when the user gets the burger menu, and they click it, it will cause a full screen overlay such as this example:
Here Link
I for some reason cant get it to work on my code and I am wondering if its because of my bootstrap classes or what?
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/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-default navbar-fixed-top " id="section1">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target="#myNavbar" data-toggle="collapse" type="button">
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand"><img alt="" src="Images/logo.png" class="img-responsive"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
About Me
</li>
<li>
Skills
</li>
<li>
Me
</li>
<li>
Hobbies
</li>
<li>
Contact Me
</li>
</ul>
</div>
</div>
</nav>
I was wondering if anyone can help me get this to work when it goes to iPad sizes on 768 screens.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<link href="css/style.css" rel="stylesheet">
<style>
.overlay {
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top " id="section1">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target="#myNavbar" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">
<img alt="" src="Images/logo.png" class="img-responsive">
</a>
</div>
<div class="collapse navbar-collapse overlay" id="myNavbar">
×
<ul class="nav navbar-nav navbar-right overlay-content">
<li>
Home
</li>
<li>
About Me
</li>
<li>
Skills
</li>
<li>
Me
</li>
<li>
Hobbies
</li>
<li>
Contact Me
</li>
</ul>
</div>
</div>
</nav>
<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/bootstrap.js"></script>
<script>
$("button").on("click", function () {
$("#myNavbar").css("height", "100%");
});
$("#myNavbar a").on("click", function () {
$("#myNavbar").css("height", "0%");
})
</script>
</body>
</html>
Try this saving as a HTML File and link bootstrap files properly. The thing you were missing was overlays. I used the same overlays from your link.
I'm trying to get my hands onto some web designing and I was not able to figure out how to make the navigation buttons in my project centered. I would like the buttons from Home to Page 3 centered and was wondering if there was a simple way to do that in the HTML file alone without needing a separate CSS class.
<!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>Bootstrap 101 Template</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.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">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Website Name</a>
</div>
<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>
</div>
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Make some changes in Bootstrap.CSS
May be like this...
.nav navbar-nav
{
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin: auto;
}
Check here => bootply
The only way you can accomplish this is by adjusting some CSS properties. Basically remove the float from navbar-nav and center the text. But if you really want them to be centered, you have to account for the navbar-brand class by assigning it a width and adding a negative margin equal to half that width to the navbar-nav.
See working Example Snippets.
#media (min-width: 768px) {
.navbar.navbar-default {
height: 50px;
}
.navbar.navbar-default .container-fluid,
.navbar.navbar-default .container {
text-align: center;
}
.navbar.navbar-default .navbar-nav {
display: inline-block;
float: none;
margin-left: -75px;
}
.navbar.navbar-default .navbar-brand {
width: 150px;
}
}
<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" />
<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="#bs-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> <a class="navbar-brand" href="#">Website Name</a>
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Page 1
</li>
<li>Page 2
</li>
<li>Page 3
</li>
</ul>
</div>
</div>
</nav>
Mobile Center
.navbar.navbar-default .container-fluid,
.navbar.navbar-default .container {
text-align: center;
}
#media (min-width: 768px) {
.navbar.navbar-default {
height: 50px;
}
.navbar.navbar-default .navbar-nav {
display: inline-block;
float: none;
margin-left: -75px;
}
.navbar.navbar-default .navbar-brand {
width: 150px;
}
}
#media (max-width: 767px) {
.navbar-default .navbar-brand.navbar-brand-centered {
position: absolute;
left: 50%;
display: block;
width: 150px;
text-align: center;
top: 0;
}
.navbar.navbar-default > .container .navbar-brand.navbar-brand-centered,
.navbar.navbar-default > .container-fluid .navbar-brand.navbar-brand-centered {
margin-left: -75px;
margin-top: 0;
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" />
<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="#bs-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> <a class="navbar-brand navbar-brand-centered" href="#">Website Name</a>
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Page 1
</li>
<li>Page 2
</li>
<li>Page 3
</li>
</ul>
</div>
</div>
</nav>
Using this css will get your navigation button in center position.
navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}
DEMO
I have changed the default bootstrap style by adding the margin and padding in my style.css but i want that the navigation would be at the left corner and not in the middle header side when i resize my browser screen to mobile size. How can i do it?
Here is my index.html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Responsive Project (Prototype)</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<header class="mainHeader">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!--HEADER-->
<div class="navbar-header">
<a class="navbar-brand">A.M.®</a>
<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>
</div>
<!--BODY-->
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Contact Us</li>
<li>About Us</li>
<li>Work Positions</li>
<li>Contacts</li>
</ul>
<!--USER OPTIONS-->
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"> Sign Up</span></li>
<li><span class="glyphicon glyphicon-log-in"> Register</span></li>
</ul>
</div>
</div>
</nav>
</header>
</body>
</html>
style.css:
body {
background-color: #f2f2f2;
}
.navbar-default {
background-color: #fff;
padding-top: 20px;
padding-bottom: 20px;
}
.navbar-nav {
margin-left: 150px;
font-weight: 600;
}
.navbar-header {
padding-left: 150px;
}
You can use media queries to only apply your styles to larger screens, like so:
body {
background-color: #f2f2f2;
}
.navbar-default {
background-color: #fff;
padding-top: 20px;
padding-bottom: 20px;
}
.navbar-nav {
font-weight: 600;
}
#media (min-width: 768px) {
.navbar-nav {
margin-left: 150px;
}
.navbar-header {
padding-left: 150px;
}
}