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;
}
Related
I am using the bootstrap navbar and am adding custom CSS to it. I am making a button that should fill the navbar for the first 220px. So I want this to ignore the padding for the navbar (or is there a better way), and fill the space with a max/min width of 20px.
This is what I currently have (I want the green box to shift all the way to the lift and fill the top and bottom):
Here is my code for the above image:
.navbar-brand {
min-width: 220px;
max-width: 220px;
background-color: #256545;
float: left;
}
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Test</a>
</nav>
If you want to unset the navbar padding, just set the property to it:
padding: 0;
If the padding is applied to navbar-brand then set the padding to Zero.
.navbar-brand{
padding:0;
}
else assign the padding to the parent class
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'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
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">.