The default height of navbar in Twitter-Bootstrap is too small. When height is increased, it encroaches the divs below.
How can I increase the height of the navbar that slides the entire page down? If this is possible, how to place navbar links to top / bottom of the navbar.
I'm pretty sure I don't love this solution but it works for the amount of time I have to spend on this.
.navbar .container { height: 2em; }
I had to also add some padding-top in the same selector to get things inside the navbar to vertically align nicely.
edit: I just re-read your question and saw you're having trouble with the "divs below". In doing this you need to adjust padding on the body tag as well, e.g.
body { padding-top: 6em; }
per the Twitter Bootstrap docs on Navbar:
When you affix the navbar, remember to account for the hidden area
underneath. Add 40px or more of apdding to the <body>. Be sure to add
this after the core Bootstrap CSS and before the optional responsive
CSS.
Adding a padding like that is not enough if you're using responsive
bootstrap. In this case when you resize your window you'll get a gap
between top of the page and navbar. A proper solution looks like this:
body {
padding-top: 60px;
}
#media (max-width: 979px) {
body {
padding-top: 0px;
}
}
Source:
Twitter Bootstrap - top nav bar blocking top content of the page
you can try this one. it works in any size of display.
.navbar .container { min-height: 83px; }
.navbar-fixed-top {
position:static;
margin-bottom:20px;
}
</script>
$(".dropdown-toggle").click(function () {
$(".nav-collapse").css('height', 'auto')
});
</script>
This solved a similar problem of mine, (The sub menus was not appearing because of the small parent ul height, on the first click) maybe it works for you as well.
Related
Here is my JSFiddle for full code example.
Notice how you can hover over that orange road glyphicon and it correctly displays my popover? Well, when I shrink the width of the Result section down to the point that the menus stack vertically, and then I hover over the popover, it doesn't render. To me, this means it won't render when a user is viewing my app from a mobile browser.
I tried:
#fieldMode .popover {
min-width: 300px
}
#fieldMode .popover-title {
color: rgb(255,102,0);
background: rgb(176,205,249);
}
#fieldMode .popover-content {
color: rgb(12,66,144)
}
...but that doesn't seem to work. What's the fix?
On mobile, your a tag is given display: block by the bootstrap styles, causing to to be 100% width. This won't work if you're trying to position the popover to the right of it. Adding display: inline-block will cause it to only take up the space it needs instead of the full screen width. Updated fiddle: https://jsfiddle.net/mgup49hv/1/
#fieldModePopover {
display: inline-block;
}
This wordpress website http://www.sulu13.net/14 has a responsive logo and menu that I wanted centered in order to line up with the edges of the content below in the posts. So I added:
.tc-header .brand a { /* Logo */
position: relative;
left: 200px; }
.navbar .navbar-inner { /* Navbar */
position: relative;
top: 130px;
left: 380px; }
Upon adding this CSS, the screen gets a horizontal scroll bar and has white space (equal to the left: 380px) on the right side of the screen. Something tells me it has to do with the responsive menu button sharing the same classes, .navbar .navbar-inner as the non-responsive menu. I would change this, but my knowledge of PHP is limited so I wouldn't know where to start.
I've tried removing the JQuery menu itself, but this had no effect, (my guess is..) because I didn't actually remove the responsive menu button/menu.
Here's the main CSS file - http://www.sulu13.net/14/wp-content/themes/customizr/inc/css/green.css?ver=3.1.6
Any ideas would be appreciated, thanks in advance for your time.
Ian
width:100% (default width) + 380px (left value) = 100% + 380px
You would need to resize the navigation to compensate for the moving over if you want it to leave it the way it is, meaning something like width:calc(100% - 380px);
However, I'd recommend not using absolute position to be more responsive and not require the manipulation of values.
Remove the left:380px
Apply this:
#menu-my-menu {
float:right;
}
This approach also allows more list elements to be added and they will automatically be positioned correctly
Use this:
.navbar .navbar-inner { /* Navbar */
position: relative;
top: 130px;
}
So, remove the left:380px. I don't understand what you mean by centering the menu and aligning with the text below, as the container of the text is wider than the one of menu and logo together and if you align the menu with the post below it will not be centered anymore. But removing left property should give you what you want.
Thanks for the help guys!
I went back and gave it a closer look, turns out I was able to solve the issue with a wrapper and a few media queries for width adjustments.
I am currently struggling with the CSS of my mobile-view pages (handehlds, for example iphone in portrait view). Strangely, there is an approximate margin of 90 pixels to the right of the body/content container. I simply do not get the reason for that - any idea?
See it here:
http://quirktools.com/screenfly/#u=http%3A//bigbertha.golfanatics.de/testsite/&w=320&h=480&a=33&s=1
URL: http://bigbertha.golfanatics.de/testsite/index.php
Thank you in advance for any hints! best regards, Ralph
What you can do, is this.
body {
overflow-x:hidden;
}
This will remove the scroll bars on mobile. (from left to right)
Edit: I took another look at your site, and noticed that you have this on your html element
html {
overflow-y:scroll;
}
Remove that line, and voila :)
You have explicit width to #roksearch_results and you just apply opacity: 0;. You have to display: none; to this div ( or change the width to 100%).
#roksearch_result {
display: none;
}
And you also give scew transform to socialmedia navigation which goes beyond your width. You could overflow: hidden the navigation but this would hide the corners of the scewed socials so I would suggest to overflow-x:hidden to the body.
#body {
overflow-x: hidden;
}
I'm trying to create a sticky footer in bootstrap, and am using the default template provided here: http://twitter.github.io/bootstrap/examples/sticky-footer-navbar.html
It appears the example provided has a problem; when the page is viewed through a smaller resolution, the navbar collapses (as it should), but then the 60px padding that originally kept the content from hiding under the navbar creates a large gap between the navbar and the content.
Any ideas?
Thanks
One easy way to change this behaviour is to remove the 60px padding when the navbar collapses. Something like this should do the trick:
#media (max-width: 979px) {
#wrap > .container {
padding-top: 0;
}
}
You might have to change the div names to match your naming.
Good luck!
it should maybe be
#push, #footer {
min-height: 60px;
}
instead of just height
I'm using Twitter bootstrap with a template I purchased. I had to do a bit of work to get the footer to appear and look acceptable, but now it is always too low.
What I mean is, white space will always be added so that the footer is below the bottom of the screen - you always have to scroll down to see it.
Here's a link to the site. You only need to look at the homepage to see the problem.
If you want to remove the extra white spacing that is causing your page to grow more then it should, just remove:
body {
padding-bottom: 40px;
padding-top: 60px;
}
#wrap {
min-height: 100%;
}
html, body {
height: 100%;
}
If what you are trying to achiev with the footer, is to allways stick it on the bottom of the page you should follow a technique called sticky footer something like this
The problem seems to be that you have the #wrap element set to 'min-height: 100%;'. If you are ok with the footer just being at the bottom of the content rather than the bottom of the page then removing that should be an easy fix.