I want to vertically align the Brand in a Bootstrap Navbar with the other links, such that bottom of each element is aligned vertically.
The current alignment is either center aligned or just unaligned. The HTML is something like:
<nav class="navbar navbar-inverse navbar-fixed-top">
<ul class="nav navbar-nav">
<li>Brand
<li>Link1
<li>Link2
</ul>
What I see is the bottom of Link1 and Link2 are somewhat higher than the bottom of Brand. Based on another question, I tried something like this.
.navbar .nav > li > a {
padding-top: 20px;
line-height: 10px;
vertical-align: bottom;
}
This didn't help. Even when I increased the line-heigh, everything was displaced down, including the brand.
I just want the bottoms of these elements are aligned, like they are all sitting on a shelf.
Set a negative margin-top value. In your case -1.1px seems perfect.
.navbar-inverse .navbar-brand {
margin-top: -1.1px;
}
Output:
Related
The problem is that when I narrow the screen, the bar breaks into two rows.
See image
So my question is how can I collapse them instead of breaking the row?
Update:
This is an example I tried:
https://getbootstrap.com/examples/navbar-fixed-top/
The problem appears if I make the font size and nav header a bit larger:
.navbar-brand, .navbar-nav li a {
line-height: 80px;
height: 80px;
padding-top: 0;
font-size: 16px;
}
Should be fine in a full width container. https://codepen.io/anon/pen/RVVLLe
In a normal use case you wouldn't have it in a column like in the bootstrap docs.
<div class="col-12 col-md-9 pull-md-3 bd-content">
<nav class="navbar navbar-inverse bg-inverse">
<!-- Navbar content -->
</nav>
</div>
If you did you would need to change the break point to collapse the content when it breaks.
This question already has answers here:
Float:right reverses order of spans
(16 answers)
Closed 6 years ago.
So I've run into this problem a few times, how come my navigation menu is reversed?
.navigation li a {
display: inline-block;
text-decoration: none;
float: right;
margin-right: 10px;
}
ul {
list-style-type: none;
}
<div class="container-fluid">
<nav class="navigation">
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</div>
When put into action, the menu order is reversed, why is this happening?
You let the elements float to the right. Try to picture that..
The first element enters the document and floats all the way to the right, bumping into the side of the screen. The second enters and floats to the right as well, but bumps into the left side of the first, and stays there. And so on, and so on.
A better solution would be to use display: inline-block for the elements, and float-right for the parent (the ul).
But personally I'm not a big fan of floating at all, so I would use text-align on the ul. text-align keeps it a normal line of text, which can also include images or other inline and inline-block elements. By right-aligning the text, the order of the words is not changed, but any remaining white space is just added to the left instead of to the right of the line:
.navigation li a {
display: inline-block;
text-decoration: none;
float: right;
margin-right: 10px;
}
.navigation li {
display: inline-block;
}
.navigation ul {
text-align: right;
}
<div class="container-fluid">
<nav class="navigation">
<ul>
<li>About
</li>
<li>Portfolio
</li>
<li>Contact
</li>
</ul>
</nav>
This is happening because that's how float was designed. It will "float" the elements in the direction specified, in the order specified. If order is important, you can fix this in three ways:
Use the built-in Bootstrap alignment tools.
Apply float: right to the parent <ul> rather than each link.
Reverse the order of the elements.
In this case, you are floating elements to the right, in the order About > Portfolio > Contact. This is what happens:
About is floated right with no previous elements, so it sits against the farthest right wall of the parent container, <ul>.
Portfolio is floated right, but About is there already, so it gets as far right as it can, which puts it to the left of the previous element.
Contact is last to the party, so it ends up at the end of the line, farthest left.
I'm currently in the process of learning Bootstrap, and decided to make myself a simple personal website. At the very top left, in the navbar, I want to put my name. On the right I want to have three menu options (about, projects & Contact). However, upon resizing the text for my name (up to 60px using CSS), the website looks okay on a computer (after some modifications to the navbar size), however when I open the site on my phone, the text overlaps. My first name and my last name are written on top of each other, with the navbar items from the right underneath it.
I'm not sure if I'm missing something simple (like using a different Bootstrap class), but I've looked extensively for a solution with no results. Below is the relevant HTML/CSS files.
HTML:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Name -->
<div class="navbar-header">
My Name Goes Here
</div>
<!-- Menu Items -->
<div>
<ul class="nav navbar-nav navbar-right" id="right_menu_items">
<li>About</li>
<li class="active">Projects</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
CSS:
.navbar>ul>li>a {
padding-top: 5px;
padding-bottom: 5px
}
.navbar {
min-height: 80px;
}
#myNameHeader {
font-size: 60px;
padding-top:20px;
padding-bottom: 40px;
position: relative;
}
#right_menu_items {
padding-right: 10px;
padding-top: 14px;
}
To correct this you need to set line-height of your text. This will prohibit your text overwrites on himself.
#myNameHeader {
font-size:60px;
line-height:60px;
padding-top:10px;
padding-bottom:10px;
}
But there is another problem, when you do that, your text overwrite the navbar menu. The reason is because twitter boostrap navbar-brand has a fixed height equals to 50px. To fix, just change navbar-brand to "auto".
.navbar-brand {
height:auto;
}
Check my code on copen: http://codepen.io/eMineiro/pen/reEYXY
Try changing the nav class to navbar-static-top as per bootstrap navbar menu overlaps text
I have a task that I initially thought would be easy, but turned out to be quite difficult. I want to be able to detect the height of the current visible window, center some text in that section of visible window, and place a navigation bar at just the end of the window, so a graphic of what it would look the following:
I have tried various ways of doing this, including setting the height of a div to a certain vh level and centering text inside that dif, though that was quite problematic, as vh is not supported in ie 8 and in order to center the text inside the div, many sources told me to do position: absolute, which tended to shift the text to a corner, which I did not want.
Is there a way in which I can create such a display? If I worded anything incorrectly or posted in the wrong place, please let me know. Thanks in advance for any help.
edit: here is the code I am using: http://pastelink.me/dl/b3cb50
Also some snippets of code for clarification:
what I do is I have a div with height of 100vh and width of 100% and an h1 with an id of myTitle (the css for id myTitle just sets the text-align to center)
<div style="height: 100vh; width: 100%"><h1 id="myTitle"> This is a large title!</h1></div>
and a nav bar directly below it, using foundation's nav bar code:
<nav class="top-bar" id="myNav" data-topbar>
<ul class="title-area">
<li class="name"><h1>My Site</h1></li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section"> <!-- Right Nav Section -->
<ul class="right">
<li class="active">Right Button Active</li>
<li class="has-dropdown">Right Button Dropdown
<ul class="dropdown">
<li>First link in dropdown</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Left Nav Button</li>
</ul>
</section>
</nav>
EDIT: Many answers were said regarding setting the position of the nav bar to the bottom, and I thank you for that, though I forgot to clarify one thing. I would like for the nav bar to only be at the bottom initially, and when someone scrolls down it moves up, and does not stay fixed to the bottom.
find
<div class="navbar navbar-fixed-top">
...
</div>
and change it to
<div class="navbar navbar-fixed-bottom">
...
</div>
bootstrap has a fixed top and bottom selectors :)
JSBIN
Is this what you need? A table is the most supported method for vertical align in CSS.
.table {
display: table;
min-height: 100vh; width: 100%;
}
.table div {
display: table-row;
}
.header {
height: 90px;
background: #ddd;
}
.header h1 {
text-align: center;
}
.content p {
padding: 0 1em;
display: table-cell;
vertical-align: middle;
}
.footer {
height: 220px;
background: #ddd;
}
How can we create a navbar similar to the one on Twitter Boostrap's website? The navbar is black, and more importantly is centered in the middle of the page. The alignment of the links seem to be too high too.
The navbar created using the code below is aligned to the left. How do you get it to be centered with a max width like on Twitter Bootstrap's website.
Target navbar
Attempt
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<a class="brand" href="#">Bootstrap</a>
<ul class="nav">
<li class="active">Home</li>
<li>Get Started</li>
<li>Scaffolding</li>
</ul>
</div>
</div>
one nice technique i like for aligning the links always to the center is to use line-height:
.navbar-inner { height: 60px; }
.nav { line-height: 60px; }
make it the same as the height of the container div, whether this is placed on .navbar-inner or .nav is your call. but it will make the text of the links always vertically aligned in the middle.
Using the bootstrap framework, .navbar-inner should have the same css applied to it as .container or .container-fluid (depending on if you are using the fluid layout or not). For non-fluid layouts this means the following rules:
.navbar-inner {
margin: 0 auto;
width: 1140px; /* or whatever width you choose for your .container */
}
fluid layouts this means:
.navbar-inner {
padding: 0 20px;
}
You need to put everything inside the navbar-inner inside a <div class="container">.