I am trying to make it so my navbar at link
is not long in height. I have been searching for an answer to this without any real luck, although got close using this answer
Instead of
and add these 3 line of css
.navbar-xs { min-height:28px; height: 28px; }
.navbar-xs .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 28px; }
.navbar-xs .navbar-nav > li > a { padding-top: 0px; padding-bottom: 0px; line-height: 28px; }..
but it stripped out all of my styles. Is there a way to do this?
.nav > li > a {
padding-left: 5px;
padding-right: 5px;
}
In your case there is no need not use container inside bootstrap nav tag.
Getting rid of it has reduced the height of the navbar.
Related
I am learning web-designing. Trying to replicate a web for practice. Everything seem to be OK.However the space between the nav bar and the first div takes 20px margin space. I want the margin space to be 0px. The css file hold margin as 0px but there is always 20px when I inspect the page. how do i solve this? Thanks in Advance.
You can overwrite the css class that has the 20px margin by using
.className {
margin: 0px !importart;
}
As you suggested i tried the above soln.It didnt work.
I am sending an image and the code.. hope it helps.
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
}
.navbar-nav li a:hover {
color: #1abc9c !important;
}
the image is for the inspect of the nar bar...where the margin is not accepting 0px.
I have a navbar, which is pretty standard, and I want to make it a bit thinner.
So I tried this:
http://www.bootply.com/9VC5N55nJD
But the buttons remain too big. Click the drop down, and you'll see the issue. Is there a way to make the navbar thinner in one place? Or do you need to add css for the navbar and the buttons and what ever else may crop up?
Also, if I say it must be 30px in height - on a mobile, that might be too narrow, so do I need a media query for the different sizes?
Here is a working fork of your code.
Bootstrap by default uses a padding-top: 15px and padding-bottom: 15px for .navbar-nav > li > a. The following CSS will take care of this:
.navbar-nav > li > a {
padding-top:10px;
padding-bottom:10px;
}
After reducing the screen size (and for mobile devices as you've mentioned) running a media query that resets them and kind of makes the navbar a bit larger will do the trick. The following is a hacky way to do so:
#media (max-width: 768px) {
// enter css for mobile devices here
.topnav {
font-size: 14px;
}
.navbar {
min-height:50px;
max-height: 50px;
}
.navbar-nav > li > a {
padding-top:15px;
padding-bottom:15px;
}
}
Use the below css and let me know.
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-brand {
float: left;
height: 40px;
line-height: 20px;
padding: 10px 15px;
}
.navbar-toggle {
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
float: right;
margin-bottom: 0;
margin-right: 15px;
margin-top: 6px;
padding: 6px 5px;
position: relative;
}
You need to fix the CSS for the dropdown. Here's the CSS to add to your stylesheet:
ul.navbar-nav, ul.navbar-nav li {
max-height: 40px;
min-height: 40px;
}
Changing bootstraps formatting like the navbar has been difficult. They have so many styles that are set, that it's tough to find which one you need to change. Just add the above style to the css sheet and you should be gravy.
Edit
Also, why not use height: 40px if you're just going to set the min-height and max-height as the same value?
I am trying to make an "Inbox" in bootstrap similar to Gmail's look and feel.
I am having some issues with the Panel that the mail items are in however.
http://jsfiddle.net/64t872o1/
I am having trouble getting rid of this Margin or padding and I cant figure out what it is.
I have set the margins and padding of the panel body to zero but it still remains.
.panel-body{
padding: 0px;
padding-bottom: 0px;
margin-bottom: none;
}
Is there an easy way to figure out where this padding is coming from?
You are seeing the margin that is set on the .list-group element.
Updated Example
.tab-content .list-group {
margin-bottom: 0;
}
Here is the initial styling set in the main Bootstrap file:
.list-group {
padding-left: 0;
margin-bottom: 20px;
}
The best way:
.tab-content .list-group {
margin-bottom: 0;
}
Add this in your css :
.tab-content .list-group{margin-bottom:0;}
Use this:
.list-group { margin-bottom: 0px; }
EDITED::::: Have simplified trying to figure out what the problem is. Below is what I currently have:
Inspect element(portion with .navbar):
#media (min-width: 768px)
.navbar {
border-radius: 4px;
}
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
localhost/media="all"
.navbar {
border-radius: 0px;
font-size: 16px;
padding-left: 150px;
padding-right: 150px;
margin: 0px;
background-color: white;
}
Text editor, I have this both in my pages.css.scss & my application.css.scss
#import 'bootstrap';
.navbar {
padding-top: 50px;
}
The inspect element is not picking up this change in the in padding-top at all. Also my application.css.scss says CSS at the bottom right while my pages.css.scss says Sass in the bottom right may this be the problem?
That is not CSS you are editing but a file with a SCSS extension . i.e. Sass. But in the bottom right corner you are editing it as a CSS file...click this to change it to Sass. (If you have installed Sass in the package manager)
The question is though do you know this is a Sass file or where you just hoping to create a CSS file?
Alright, if you want to enforce your "striked through" styles, you can use the !important declaration. Such as:
.navbar {
border-radius: 0px !important;
font-size: 16px;
padding-left: 150px;
padding-right: 150px;
margin: 0px;
background-color: white !important;
}
Watch out for media queries that Boostrap uses all over the place though .. especially for important components like the navbar. It will affect the style for all screen width then.
I'm trying to enlarge a smaller picture. I have a small and a large version of the pictures. I've searched on the internet, the one i'm using is the best i've found.
I know this would be much easier with 'Lightbox2' or other javascript things, but the purpose is to only use html & css.
Here you can find the link (dropbox, .zip file) to the website' folder --> https://dl.dropboxusercontent.com/u/61634717/Website.zip
It would be nice if someone could find the problem why my smaller pictures aren't enlarged when hovering over. The website is only showing the small pictures when hovering over them.
Here is the html code (for one picture):
<div class="ienlarger"><a href="#nogo"><img src="Pictures/Artists/PeopleTalkTechnoSmall.png" alt="thumb" class="resize_thumb" /><span>
<img src="Pictures/Artists/PeopleTalkTechno-Large.png" alt="large" /><br />Some text can go here.</span></a>
</div>
Here is the css code:
.ienlarger {
float: left;
clear: none;
padding-bottom: 5px;
padding-right: 5px;
}
.ienlarger a {
display:block;
text-decoration: none;
cursor:default;
}
.ienlarger a:hover{
position:relative;
}
.ienlarger span img {
border: 0px solid #FFFFFF;
margin-bottom: 8px;
}
.ienlarger a span {
position: absolute;
display:none;
color: #FFCC00;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #2E2E2E;
font-weight: bold;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 13px;
padding-left: 10px;
}
.ienlarger img {
border-width: 0;
}
.ienlarger a:hover span {
display:inline-table;
top: 50px;
left: 90px;
z-index: 100;
}
.resize_thumb {
width: 170px;
height : auto;
}
NOTE: Do not pay attention to the background colors :D. I know they are weird, but it is just for me to see the different < div > (they will be changed when the website is closer to being completed).
Alright, I downloaded your code and messed around with it.
Removing max-width: 100%; from the img CSS seems to have fixed it (line 25). In the future, please post the code along with your question, or if there are a lot of parts to it, a JSFiddle is also acceptable.
Thanks.
In your css you have all images set to a max-width of 100% probably to make it responsive, which is good. But that is also your problem. The images can only be 100% of their container and no bigger. If you remove img {max-width: 100%} from your css that fixes your issue.
But is also makes it not repsonsive. :-(
So your solution is to add a class="larger" to the bigger image and add another line to your css. You would end up with something like this:
img {
max-width:100%;
height:auto;
}
img.larger {
max-width: 500px; /* the maximum size you would allow for larger images */
}