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?
Related
I'm having two issues with Bootstrap's navbar dropdown. First, the dropdown from the navbar is not working on each page. The look of the Navbar is shown below.
The Calendar is a Google calendar that is being embedded into the page. Whenever I click on the calendar link itself, the dropdown does not work. If I attempt to navigate to another page after clicking on the calendar page, the dropdown also does not work. However, if I navigate to another page and then reload the page, the dropdown works again. Any idea what may be causing this issue?
The second problem revolves around collapsing the navbar when the window size changes. The way I have it set, the entire navbar should collapse when the screensize is less than 1200 pixels, and clicking the collapsible should extend the navbar to a height of 85vh. While the navbar does collapse at 1200px, the collapsible does not extend to a height of 85vh until hitting the default of 767px. My code for this is shown below:
#media screen and (max-width: 1200px) {
.navbar-collapse .nav > .divider-vertical {
display: none;
}
#nav-portallinks {
li a {
color: white;
}
li a:hover {
color: black;
}
.divider {
width: 25vw;
margin-left: 0;
}
font: {
family: $font-text;
size: 2vw;
}
max-height: 85vh;
overflow: auto;
background-color: $cardinal;
width: 25vw;
margin-left: 50vw;
}
}
Any ideas?
In regards to unresponsive dropdown you are probably having some conflict between the calendar and bootstrap's behavior, maybe isolating the issue in a fiddle or sharing some of the code would help to identify it.
For bootstrap 3.3.x here is the CSS you need to toggle collapse on 1200px:
#media (max-width: 1200px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
See working example
Another alternative would be to change the variable $grid-float-breakpoint: to $screen-lg-min !default; (which is 1200px) and recompile via SASS, default is 768px.
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.
I'm styling a website and have some h3 headers and paragraphs that are wrapped in a div class named "featured-info".
Also i have a footer element that is in the main wrapper in the body.
The paragraphs are put in italic:
.featured-info p {
font-style: italic;
}
and the footer has a border:
footer {
border-top: 1px solid rgb(128, 128, 128);
}
Also the footer text is a h4 uppercased:
footer h4 {
text-transform: uppercase;
}
The main problem is that i have a setting:
#media screen and (min-width: 750px) that makes some navigation buttons inline and resizes some text but...
when the page size is smaller than 750px the footer styling and the italic font dissapears... and i don't understand why. i will provide more info if is needed. thx!
LE: found it. a damn semi-colon. THANK YOU ALL! didn't expect to get so many responses in such a short time.
now i got another problem
under the menu which changes when the resolution is min 750px i have a h1 header that is usually on center
h1 {
font-size: 2.4213em; /*3.3684em*/
line-height: 1.2656em;
margin-top: 0.4219em;
margin-bottom: 0;
color: rgb(172, 140, 71);
text-align: center;
}
the problem is it gets to to the right when the window is from 750px to 950px. I have these settings:
#media screen and (min-width: 750px){
.main-navigation {
min-height: 90px;
border-bottom: 1px solid rgb(36,36,36);
border-top: 1px solid rgb(36,36,36);
/*overflow: hidden; dubiosssss */
}
.main-navigation ul {
max-width: 950px;
margin: 0 auto;
}
.main-navigation li {
float:left;
margin-left: 20px;
width: 20%;
}
.main-navigation a {
background: none;
}
}
/* media query for 750*/
}
#media screen and (min-width: 950px){
.main-navigation ul {
position: relative;
right: -15px;
}
}
any advice would be great, thanks again!
min-width in a #media parameter means that any size from the size you specified and larger will get the styles that you set.
It sounds like you have some of your styles are put in the wrong place. It is usually better to start small and go large in your CSS. This means specify global styles (styles that won't change) first and then work your way up to large viewports.
You are probably overwriting some styles that you would like to keep.
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 */
}