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
Related
The size of navigation bar in app component keeps changing when different components are loaded. I want to make this constant.
.navbar{
min-height: 50px;
background-color: #e8e8e8;
}
h3{
padding-left: 43%
}
**app.component.html**
<nav class="navbar navbar-default">
<h3>MY Heading</h3>
<a class="active" href="#"><i class="fa fa-home"></i></a>
</nav>
<router-outlet></router-outlet>
On Router change based on the component loaded navigation bar adjusts its size and the "My Heading" shrinks in size and appears in two different lines instead of a single line.
I tried using fixed property in the Css of Nav Class , it did not work.
What am I missing?
You should be setting max-height style as constant
.navbar{
max-height: 50px;
background-color: #e8e8e8;
}
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.
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:
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">.