I created a navbar in Bootstrap and I want to make it a little bit smaller.
I somehow did that, but my content of the navbar is bigger then it should be.
I don't know how to make it smaller to fit in the navbar or should it fit auto?
Code:
<nav class="navbar-default">
<div class="container-fluid" style="padding-left:55px; height:45px;">
<div class="navbar-header">
<a class="navbar-brand" style="margin-bottom: 2px;"><i class="fa fa-facebook-square" aria-hidden="true" style="font-size:23px;" id="fb"></i></a>
</div>
<ul class="nav navbar-nav">
<li><input type="text" class="input-sm" id="usr" style="margin-top: 9px;" placeholder="Pronadjite prijatelje"></li>
<li id="nameprofile"><img src="fb%20profile%20image.jpg" width="25px" height="25px" style="margin-right: 9px;">Ime</li>
<li>Pocetna stranica<span class="badge">2</span></li>
<li id="liprijatelji"><i class="fa fa-users" aria-hidden="true" style="font-size:20px; color:#1d2129;" id="findfriends"></i></li>
<li id="liporuke"><i class="fa fa-comments" aria-hidden="true" style="font-size:20px; color:#1d2129;" id="poruke"></i></li>
</ul>
</div>
</nav>
Text in code is not in English because I don't speak English.
Sorry if I made a mistake.
Ok, guiding myself from the bootstrap tutorials, you would need to have <nav class="navbar navbar-default"> instead of <nav class="navbar-default">. One of the reasons of the unexpected behaviour might be because you´re not adding this class.
Since you are using the .navbar class, then all you need to do is add the following css that overrides the default values of navbar.
.navbar{
min-height: 50px;
height: 50px;
}
If you look at bootstrap defaul CSS the .navbar default values are:
.navbar {
position: relative;
min-height: 50px; //This line is the one that defines the min height, which we overrid in the code above
margin-bottom: 20px;
border: 1px solid transparent;
}
You might also need to add max-height to your css, since the container might grow if your content is bigger than your container.
Here is a working example
Related
This is my first work with css and Bootstrap. As shown in attached image, I want the green color of text TEST to be green to be applied to that all yellow highlighted rectangle. how can I do that? Also, I want to toggle the active color whenever I click on test1 and test2.
My code is as below
<nav class="navbar navbar-dark">
<div class="container-fluid">
<div class="row-fluid">
<nav class="col-md-11">
<span class="navbar-header">
<a href="/test/" class="navbar-item">
<img class="some-class"
src="<myUrl>">
</a>
<a tooltip-placement="bottom" uib-tooltip="${some-text}" class="navbar-brand-test" href="<myUrl>">TEST</a>
</span>
<ul class="nav navbar-nav">
<li class="test1"><a href="<myUrl>" >Test1</a></li>
<li class="test1"><a href='<myUrl>' >Test2</a></li>
</ul>
</nav>
</div>
</div>
</nav>
css for navbar-brand-test, I just updated the existing code:
.navbar-brand-test,
.navbar-brand-test:hover,
.navbar-brand-test:focus {
height: 50px;
line-height: 50px;
font-size: 1.4em;
letter-spacing: 0.05em;
padding: auto;
margin: auto;
color: #fff;
background-color: #5fc17c;
white-space: nowrap;
}
When I did as suggested by TKD21 in the answer below, It worked but as you see in second image, the BG collor filled the logo (yellow part in second image) as well. I want the logo to be separate than that BG color
Finally, below code did a trick. Slightly modified version of the answer by TKD21. Moved logo url below col-md-11 and added div instead of span
<nav class="navbar navbar-dark">
<div class="container-fluid">
<div class="row-fluid">
<nav class="col-md-11">
<a href="/test/" class="navbar-item"><img class="some-class"src="<myUrl>">
</a>
<div class="col-md-1 navbar-header" style="background-color: #5fc17c;">
<a tooltip-placement="bottom" uib-tooltip="${some-text}" class="navbar-brand-test" href="<myUrl>">TEST</a>
</div>
<ul class="nav navbar-nav">
<li class="test1"><a href="<myUrl>" >Test1</a></li>
<li class="test1"><a href='<myUrl>' >Test2</a></li>
</ul>
</nav>
</div>
</div>
</nav>
Now only issue I have is each tab should be active with green color when I click on Test1 or Test2. Will update here when I resolve it
If I understood your question correctly, you want the green background of the text "TEST" to be applied to ALL of the yellow triangle,yes?
If that is indeed the case, consider doing the following:
Change your <span class='navbar-header'> to <span class='col-md-1 navbar-header'> and add a color class or style rule of your choosing
Change your <span class='navbar-header'></span> to <div class='col-md-1 navbar-header'></div> and add a color class or style rule of your choosing
Though the two solutions seem identical, the second is less prone to breaking on window resize.
If you need a bigger green background size, just play around with the col-md-<number> Bootstrap classes.
The results from my testing can be seen here
So i've been working on a little project, and noticed that i have to do more media queries than i would like to?
From my understanding, bootstrap should be taking care of the responsiveness for me, so i'm sure i have done something wrong. Describing the problem in words is hard, so you can take a look at this image:
Here is how it looks, desktop size:
http://gyazo.com/be1c1d6f7af31adf6cf2c21fe1697f67
Here is how it looks, when scaled down to mobile:
http://gyazo.com/27bb7da880fd7a789e8b57c88e0b9759
As you can see, the content moves OUT of the white box, and doesn't go down to the next line, which i think it should do by default, or am i overestimating Bootstrap?
Here is some of the code that makes the box:
.overview {
height: 500px;
background: white;
margin-top: 40px;
box-shadow: 5px 5px 5px #f2f2f2;
border-left: 2px #f2f2f2 solid;
border-top: 2px #f2f2f2 solid;
border-radius: 7px;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 velkommen">
<i class="glyphicon glyphicon-cog topglyph"></i>
<h1>Kontrolpanel</h1>
<br>
</div>
</div>
<div class="row">
<div class="col-lg-4 brugeroplysninger">
<h1><span class="glyphicon glyphicon-user orange"></span> Oplysninger</h1>
<div class="brugeroplysninger-divider"></div>
<ul>
<li><span class="glyphicon glyphicon-envelope orange brugeroplysninger-glyph-padding"></span> <span class="brugeroplysninger-current">mail#mail.com</span>Skift
</li>
<li><span class="glyphicon glyphicon-tag orange brugeroplysninger-glyph-padding"></span> <span class="brugeroplysninger-current"> Alexander</span>Skift
</li>
<li><span class="glyphicon glyphicon-tags orange brugeroplysninger-glyph-padding"></span> <span class="brugeroplysninger-current"> Alexander</span>Skift
</li>
<li><span class="glyphicon glyphicon-asterisk orange brugeroplysninger-glyph-padding"></span> <span class="brugeroplysninger-current">******</span>Skift
</li>
<li><span class="glyphicon glyphicon-picture orange brugeroplysninger-glyph-padding"></span> <span class="brugeroplysninger-current">Billede</span>Skift
</li>
</ul>
</div>
<div class="col-lg-6">
<div class="overview">
fdsfsdfdsfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf
</div>
</div>
</div>
</div>
</div>
What am i doing wrong? Please tell me if i need to show more code, i'm sure i'm doing something wrong.
Or do i just have to keep doing media queries?
Note:
I tried assigning a width to the class overview, no result. THat includes an auto width, a max-width and a fixed width.
Thanks for your time!
It hasn't got to do with Bootstrap. By default browsers don't break words into two parts when they don't fit on a line anymore. In order to be able to do hyphenation properly they would need to have knowledge about the language and how to split words into syllables. Browser support isn't there yet but
hyphens: auto;
should do it in the future. If you don't care where the word is split simply add
word-break: break-all;
to the overview class. And if you simply don't want to show the part of the word that overflows add
overflow: hidden;
to the overview class.
You may also look into the wbr tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr
represents a position within text where the browser may optionally break a line
Working with an angular and bootstrap navbar. When the screen is resized horizontally below 768px the search field at the right falls down to the line below. I am trying to keep it in the top line and just let the navbar overflow to the right.
Here's a plunker! http://plnkr.co/edit/krAGXP6JEVZpLFNvRlsw?p=preview
I am using Chrome 32 to test this widget.
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="http://upload.wikimedia.org/wikipedia/commons/5/57/Umbrella_Corporation_logo.png" style="width: 31px;height:35px;"/>
</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li>
Foo
</li>
<li>
Bar
</li>
<li>
Baz
</li>
<li>
Bop
</li>
</ul>
<div class="pull-right">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term" />
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Why does this silly search field insist upon dropping down a line on smaller screens?
Corrected: The input-group-btn seemed to be the cause of the problems for me.
Adding this:
.navbar-form .input-group-btn {
display: block;
}
.navbar-form .input-group {
margin-right: 30px;
}
Ensured the search never jumped down.
Plunker here
Looks like it was a combination of a few items. First being the min-width width media query for a few items floating only when the screen size is above 767px. ( you could put these inside a max-width instead of leave them default, however you want to set it up )
.navbar-nav,
.navbar-nav > li,
.navbar-header {
float: left;
}
And then this little bugger's width within a min-width query throwing a wrench into the flow set on another media query
.input-group-btn {
width: 1%;
...
...
}
Again, I set a few items without the query, which you could stuff into a max-width query or just have them default.
http://jsfiddle.net/evanbriggs/9xtLtrr4/
Evan and mccannf helped me to identify that my width styles were being updated but their values weren't being accurately reflected within the chrome dev tools. Building from their recommendations I found that the following addition to my css was the best solution.
.pull-right .navbar-form .input-group .input-group-btn {
width: auto;
}
I'm designing a website using Twitter's Bootstrap, and I'm having difficulty with the responsive navbar. In bootstrap, the navbar allows a mobile user to click an icon to extend the navbar and display navigation links. I'm unable to find how to adjust the maximum height... when I try and use one of the drop down bars, the navbar doesn't change size accordingly, and the user is unable to see any of the links.
Thanks for any help you can provide.
-A
EDIT: here's the code that I'm using for the navbar (html) the css that I'm using is the standard bootstrap.css and bootrstrap-responsive.css:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="http://example.com">organization</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Home</li>
<li class="active">Contact</li>
<li>Now Playing</li>
<li class="dropdown">
Public Resources <b class="caret"></b>
<ul class="dropdown-menu">
<li>Observatory</li>
<li>Planetarium</li>
<li class="divider"></li>
<li class="nav-header">For Teachers and Schools</li>
<li>Programs</li>
<li>Host an Event</li>
<li>Educational Initiatives</li>
</ul>
</li>
<li class="dropdown">
Undergraduate Resources <b class="caret"></b>
<ul class="dropdown-menu">
<li>Observatory</li>
<li>Planetarium</li>
<li class="divider"></li>
<li class="nav-header">Physics</li>
<li>Physics Homepage</li>
<li>Physics and Astronomy</li>
</ul>
</li>
<li>Volunteer</li>
<li>FAQ</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
The default navbar html code is the following:
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
And if you inspect the navbar element you will find that the inside div (navbar-inner) has the class:
.navbar-inner {
min-height: 40px;
}
You can remove this value and find that the navbar remains the same height, that's normal, because the height of the navbar is set to "auto". Therefore if you remove the min-height the height will depend of the link tags padding, inside the <ul></ul>, and the <a class="brand"></a> padding as well.
.navbar .nav > li > a {
float: none;
**padding: 10px 15px 10px;**
color: #777;
text-decoration: none;
text-shadow: 0 1px 0 #FFF;
}
.navbar .brand {
display: block;
float: left;
**padding: 10px 20px 10px;**
margin-left: -20px;
font-size: 20px;
font-weight: 200;
color: #777;
text-shadow: 0 1px 0 #FFF;
}
If you change it, you will find that the height of the "navbar" parent will automatically change. You can also maintain the min-height property and just change its value, adjusting the padding of the elements I've mentioned above.
For the responsive part, you can edit all the styles in the bootstrap-responsive.css, inside the specific media query for the resolution that you want to edit.
EDIT: Just saw your HTML, check the padding of your link tags inside the navbar, reduce it, change the .navbar-inner min-height too, and play with the values.
Ok, the way I fixed the first part (having a header that didn't resize when I wanted to) was by changing the min width value in the bootstrap-responsive.css like so:
#media (min-width: 1200px) {
.nav-collapse.collapse {
height: auto !important;
overflow: visible !important;
}
}
where 1200px was changed to 1200 from 980. Tricky tricky... for the record, it's on line 1104.
Having some trouble achieving the style I would like for my responsive bootstrap navbar.
I'm pretty new to bootstrap/css and jsfiddle http://jsfiddle.net/YfmwV/ is what i've hacked together so far.
<div class="navbar">
<div class="navbar-inner"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home
</li>
<li>Showtime
</li>
<li>Motivation
</li>
<li>About
</li>
<li>Testimonials
</li>
<li>Gallery
</li>
<li>Merchandise
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</div>
The problem is related to the following code which achieves what I am after in the large screen view however completely ruins the menu in responsive mode.
.navbar .nav>li {
width: 12.5%;
}
I am trying to get the navbar items to take up the whole space of the navbar as opposed to being aligned either left or right, the only way I could think to do this was to set the width to a percentage, this is not ideal.
If someone could point me in the right direction that'd be amazing.
You could use a #media query so that your width:12.5% is only applied for desktop mode..
CSS
#media (min-width: 979px) {
.navbar .nav>li {
width: 12.5%;
}
}
Demo: https://www.bootply.com/wauacskYQj
I'm not totally understanding what you mean, but for as far as I can understand, you want to have the hover and active effect to not have any padding/margin on either sides.
Navbar-inner has a padding left and right of 20px, if you set those on 0, the bar is taking the full width of your menu.
.navbar-inner {
padding-right: 0;
padding-left: 0;
}
Is this what you mean?