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;
}
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 am using the w3-top tag to fix the navbar to the top of the page, even if the user is scrolling down. Some links in the navbar link to sections of the current page. However, if the user is linked to such a section, the fixed navbar overlays the section title (since both are displayed at the top of the screen).
In essence I want the link to go a few px above the section title or some other way, so that the title is visible.
The navbar in question:
<div class="w3-top">
<div class="w3-bar navbar">
ThinkCorner
<img src="img/logo-sm.png" class="w3-left" style="max-width:50px">
Kontakt
Team
Erfahrungen
Kompetenzen
☰
</div>
The .css property for the navbar:
.navbar {
color:#grey;
background-color:white;
opacity:0.9;
font-size: 20px;
font-weight: bold;
border-bottom: 2px solid #600;
padding: 12px; }
Thanks in advance!
Give the section title a padding-top of some pixels. For eg,
<h1 id="sectionTitle">This is some title</h1>
If h1 has a padding-top of say 50px, you will get some spacing above the title. Hence the navbar won't overlap the title.
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'm trying to make this template have a fixed navbar: here
I'm a beginner at CSS, so sorry about the silly question. When I try to make .masthead have position:fixed, the "Home About Contact" part disappears.
Thanks in advance!
The problem:
When you set position:fixed, the width of the masthead becomes the size of the elements inside by default. Usually you would be able to declare width:100% on the masthead so it stretches the entire width of the parent div, but in this case, setting percentage width on the fixed element makes it calculate based on the width of the viewport: see here for more details:
Percentage width for fixed elements?
Since the rest of the content has a max-width of 700px, we can set the width of the masthead to also be 700px but the issue is when you shrink the viewport, the rest of the page will shrink but the masthead won't. Setting max-width on the masthead doesn't work because its original width is less than 700px.
.masthead {
position: fixed;
width: 700px;
top: 0;
background-color: white;
border-bottom: 2px solid rgb(220,220,220);
}
Note that we set the background to white otherwise the bar will by default have a transparent background and the elements underneath will just intersect -- very ugly. We set the top property to 0 so it is now attached to the top of the page and doesn't leave a gap when we scroll.
(The border I added was just for looks, you can remove that if you'd like.)
Since we set the masthead to fixed positioning, it is now removed from the page flow, so everything else in the page acts like the masthead wasn't there. That leads to an issue: everything in the page shifts up, and one of the <hr />s on the top becomes hidden. To solve this, we add a margin-top: 50px; to the top <hr />, and everything is shifted downwards.
Due to the default margin styling (margin-bottom: 20px;
margin-left: 0;) on .navs in bootstrap the "Home About Contact" section ends up looking a bit awkward. We fix this by setting the margins to something more appropriate: margin: 14px 0;
Quick Note: I applied all these styles as inline in the chrome web inspector, so that they would override any other properties
Edit: Actually, it works nicely too if you just delete the HR from the document with the web inspector
First, you need to add some CSS to the header so it can be used as a fixed header. It needs a background color, and a given width:
.masthead {
width: 700px;
background: white;
}
Then, because the header is not aligned with the top of the page, you'll need some javascript to make it stick to the top:
<script>
$(document).ready(function() {
var div = $('.masthead');
var start = $(div).offset().top;
$.event.add(window, "scroll", function() {
var p = $(window).scrollTop();
$(div).css('position',((p)>start) ? 'fixed' : 'static');
$(div).css('top',((p)>start) ? '0px' : '');
});
});
</script>
Look at the boostrap navbar docs
Here is an example of a fixed navbar using bootstrap:
<div class="navbar navbar-fixed-top" style="position: absolute;">
<div class="navbar-inner">
<div class="container" style="width: auto; padding: 0 20px;">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</div>
This is a navbar that works with position: fixed:
<div class='container'>
<div class='navbar'>
<div align='right'> <a class='menu1 menu-item'>Home</a>
<a class='menu2 menu-item'>About</a>
<a class='menu3 menu-item'>Contact</a>
</div>
</div>
</div>
http://jsfiddle.net/H9mMk/3/
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">.