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.
Related
I am new to bootstrap 4 and I have a question about the navbar. So I want to have my Company name and its logo next to it, but for some reason the image is way too big. What can I do to change the size of the image to fit inside of the navbar. Thank you!
<nav class="navbar navbar-expand-sm fixed-top">
<div class="container">
<a href="index.html" class="navbar-brand text-dark display-4">
<img id="ojLogo" src="img/ojicon.png"> OddJob
</a>
</div>
</nav>
You have to define height of logo image to reduce its image size. Also need to float image to left in order to have company name next to this. Also define width of navbar-brand if necessary. You can use following css:
.navbar-brand {
width:150px;
font-size: 24px;
}
.navbar-brand img {
height: 50px;
/* put value of image height as your need */
float: left;
margin-right: 7px;
}
I would like to remove the left padding from the navbar below:
and top padding in a narrow viewport:
Navbar code & JSFiddle:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">About</li>
<li>Events</li>
<li>News</li>
<li>Discuss</li>
</ul>
</div>
</nav>
https://jsfiddle.net/wx6bx3pr/
Already attempted solution - setting the padding of .container-fluid to zero gets the desired outcome in the wide viewport:
.container-fluid
{
padding: 0;
}
Except completely breaks it in a narrow viewport, with the active menu item protruding beyond the navbar, and no spacing between the container and the text of menu items:
How do I get the desired solution without breaking the narrow viewport?
Many thanks.
Try a negative margin on the navbar like this..
#media (min-width: 768px) {
.navbar-nav {
float: left;
margin: 0;
margin-left: -15px;
}
}
.navbar-nav {
margin: 0 -15px;
}
http://codeply.com/go/leAaYlOaYd
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 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:
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">.