I'm using a centered navbar-brand in Bootstrap 3, and when viewed on a phone sized screen, the text wraps, but the top line has a leading space, whereas the bottom does not, leading to their being misaligned.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html" id="title-card">Testing Testing</a>
</div>
</div>
</nav>
In this example, "title-card" sets the font-size to 2em; and navbar-brand along with navbar-header were modified to be:
.navbar-header {
float: left;
padding: 15px;
text-align: center;
width: 100%;
}
.navbar-brand {
float: none;
}
This produces the following output:
How would one go about aligning them?
Give a margin:0 and padding:0 to your #title-card.
#title-card {
margin: 0;
padding: 0;
}
Related
I'm using Bootstrap and I want to center an image but I don't know how to do it :/
Here's the HTML
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="./img/logo.png" /></a>
</div>
So I have on my navbar an image and I want to center it I tried in CSS
.navbar-brand img{
width: 83px;
height: 57px;
margin-left : 50%;
}
The image doesn't move at all
There are loads of ways to do this, you can use
text-align:center;
to center elements or
margin-left:auto;
margin-right:auto;
This is really basic CSS, you should definitely check the documentation before.
Try this:
.navbar-brand img{
width: 83px;
height: 57px;
margin: 0 auto;
}
"margin-left:50%" centers the left boundary of your image. "margin: 0 auto;" says put and equal and maximum margin on both the right and left side of my element. if you need actual margins on the top/bottom you can use the 4-property method which might look like this:
margin: 10px auto 20px auto;
I have a fairly simple header on my site:
<header>
<nav class="navbar navbar-inverse" style="">
<div class="navContainer">
<div id="navbar">
<div id="leftNavSection">
<img alt="My Logo" width="300" src="/assets/main_logo-791a416e4f99d38a339debb8dcebd7361d4172919425ace42ba2ce90336218e2.png">
</div>
<div id="rightNavSection">
Logged in as Dave A
Edit
<a rel="nofollow" data-method="delete" href="/logout">Log Out</a>
</div>
</div>
</div>
</nav>
</header>
I align the logo to the left and the Logout links to the right:
#leftNavSection {
float: left;
}
#rightNavSection {
float: right;
}
What I would like, however, is if the screen size is small (mobile browsers), for the Log Out links to appear aligned to the left beneath the logo.
However, when I change the “float:right” to “float:left” this doesn’t happen. Here is my Fiddle — https://jsfiddle.net/kje3q74k/. How do I pull this off?
So here's one way to do it:
Add min-width: 50% to the leftNavSection and rightNavSection.
This allows the rightNavSection to wrap to the second line on
smaller displays when the content widths forces it down.
Remove the default margin of body using to adjust for the 100% width of the navbar:
body {
margin: 0;
}
Now the wrapping will occur exactly below 600px!
Float the rightNavSection to the left and align it to the right using text-align: right
Below 600px use text-align: left using media query:
#media only screen and (max-width: 600px) {
#rightNavSection {
text-align: left;
}
}
snippet below:
body {
margin: 0;
}
header {
overflow: hidden;
}
#navbar {
width: 100%;
font-family: Arial;
vertical-align: top;
display: inline-block;
}
#leftNavSection {
float: left;
min-width: 50%;
}
#rightNavSection {
float: left;
min-width: 50%;
text-align: right;
}
#media only screen and (max-width: 600px) {
#rightNavSection {
text-align: left;
}
}
<header>
<nav class="navbar navbar-inverse" style="">
<div class="navContainer">
<div id="navbar">
<div id="leftNavSection">
<img alt="My Logo" width="300" src="http://placehold.it/300x300">
</div>
<div id="rightNavSection">
Logged in as Dave A
Edit
<a rel="nofollow" data-method="delete" href="/logout">Log Out</a>
</div>
</div>
</div>
</nav>
</header>
Hope you can take it forward from the above example. Let me know your feedback on this. Thanks!
I am trying to create a navigation bar that has the "brand" (LOGO) on the left side, and the actual navigation items in the center of the entire bar. I am using the default Bootstrap navbar as I just started to learn web development a week ago. This is what it looks like so far:
However, you can see the navigation items are slightly shifted to the right of the actual center of the page (The heading "This is the HOME page." is exactly centered within the page).
Here are parts of my code that I believe may be relevant:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.container-fluid {
background-color: white;
border: none;
box-shadow: none;
}
.content {
padding-top: 65px;
width: 100%;
height: 100%;
}
.navbar .navbar-collapse {
text-align: center;
background-color: cyan;
}
.navbar .navbar-nav {
margin: 1%;
display: inline-block;
float: none;
vertical-align: center;
text-decoration: bold;
text-align: center;
}
.navbar-default {
background-color: white;
box-shadow: none;
text-align: center;
}
.navbar-header {
margin: 1%;
}
<!-- Navigation bar -->
<nav class="navbar navbar-default navbar-fixed-top">
<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="#bs-example-navbar-collapse-1" 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="index.html" id="logo">LOGO</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
I am suspicious of the "navbar-brand" as it seems to interfere somehow when I try to change the text-align for ".navbar .navbar-collapse," (colored cyan just for ease of formatting) which I have set to "center" as other answers on StackOverflow have suggested.
For example, when I change the text-align to "left":
.navbar .navbar-collapse {
text-align: left;
background-color: cyan;
}
the navigation bar looks like this:
Changing the text-align to "right" pushes the navigation items all the way over to the right side of the cyan bar, as expected.
Thus, it appears that the navigation items are being centered between the "navbar-brand" and the right side of the bar rather than between the actual left and right sides of the entire bar.
Does anyone have any suggestions on how to make my navigation items accurately centered within the entire bar, so that they are in line with the heading "This is the HOME page." and not shifted to the right?
There are a few different ways to do this, and I guess it depends on what you are going to do further down the track, but the easiest thing is probably to take the .navbar-brand out of the document flow, so that the .navbar-nav ignores it when centering.
You can do this quite easily by adding something like this:
.navbar-brand {
position: absolute;
}
You can check it out over here: http://codepen.io/anon/pen/PNMBQx
Hope that helps, and good luck!
I am setting a responsive layout for my personal website, which has worked in a simple example. However I am not getting the same results. It may have something to do with including the Bootstrap files in my html. Below is the html and css code for the responsive layout:
HTML:
<header>
<a href="/" id="logo">
<h1>Brian Weber</h1>
<h2>Engineer | Python Programmer</h2>
</a>
<!-- Navigation bar -->
<nav class="navbar navbar-default" role="navigation">
<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>
<!-- <a class="navbar-brand" href="#">Brian Weber</a>
<p>Engineer</p> -->
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Portfolio</li>
<li>About</li>
<li>Resume</li>
<li>Contact</li>
</ul>
</div>
</div>
</header>
CSS:
#media screen and (min-width: 660px) {
/*********************************
HEADER
*********************************/
.navbar .navbar-default {
float: right;
background: none;
font-size: 1.125em;
margin-right: 5%;
text-align: right;
width: 45%;
}
#logo {
float: left;
margin-left: 5%;
text-align: left;
width: 45%;
}
#logo h1 {
font-size: 2.5em;
}
#logo h2 {
font-size: 1.7em;
margin-bottom: 20px;
}
header {
border-bottom: 5px solid #599a68;
margin-bottom: 60px;
}
}
When I check the code in a browser, the h1 and h2 text do not appear. However when I inspect the element there are placeholders for where the text should be. The text color is already set to black in the main.css. My question is how would I fix this problem so that the layout looks like the picture below? I am thinking maybe there is an issue with the bootstrap files where they are overriding the CSS code.
Correct format for header and navbar
h1 and h2 text disappearing
Add this in your style
#logo
{
z-index:1;
position:relative;
}
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order. and in your style navbar-default hide the h1 and h2 that's why it's not looking
Make .navbar-default float right when in the larger views. It was covering up the left floating div that contained your name etc.
Add position:relative; and z-index for logo.
#logo {
float: left;
margin-left: 5%;
text-align: left;
width: 45%;
position: relative;
z-index: 1;
}
I have a page using boostrap layout.
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
//All menu stuff occuping all the width of the top.
</div>
//Jumbotron rendering body of views.
<div class="jumbotron">
#RenderBody()
</div>
</body>
The jumbotron CSS:
.jumbotron {
height: 100%;
padding-top: 80px;
padding: 40px;
margin-bottom: 0px;
font-size: 15px;
font-weight: 100;
line-height: 2.1428571435;
color: inherit;
}
I have a view with a telerik grid, and when it is displayed on the screen it fits behind the Menu. Becouse the jumbotron is taking 100% i think. So, how can i fit the jumbotron below the menu, separating them?
Remove the navbar-fixed class from your nav like so:
<div class="navbar navbar-default" role="navigation">
If you want a fixed navbar, add a padding top: 30px (equal to the height of your navbar) to body
body {
padding: 30px 0 0;
}