I'm playing around in Bootstrap 3 trying to duplicate the vertical navigation bar used on the getbootstrap site. I'm running into a couple issues though and I'm not finding a lot of documentation to work from.
Here's a bootply link to show you where I'm coming from: http://bootply.com/77832
Issue number 1 is that if I change the screen size from large to small, my navigation is now under my text. But on the bootstrap site the navigation moves to the top of the screen and the text falls under that. How can I fix the responsiveness of this so that resizing or viewing this on a small screen doesn't wreck the layout?
Issue number 2 is cosmetic. I'd like for the pretty pink background on my navigation to fill the entire container rather than just the width of the text. So I thought, hey throw a width:100% on that bad boy and you're all set. I thought that it would fill 100% of the col-md-3 that contains it, but it actually fills 100% of the screen width. Why would it extend out of the col-md-3 that it is in and how can I achieve the desired look?
For #2, the issue is that the UL has a position:fixed, so it sort of "removes" itself from knowing about its parent's width. Basically, it treats the body as the parent, so width: 100% will make it as wide as the page.
For #1, You may want to look at, when the page becomes small, make the nav "not affixed" to the side of the page.
Related
So I have a site with four main sections. The div for each section has a background image. All four backgrounds are the same size. There are also important elements in the images that I always want to show. In the original version of the page the image would resize depending upon the browser window size but much of the height of the background image was hidden in most cases. So I worked with a guy cleaning up the css and in the process we set the background images to always display 100% height. I was OK with some black background showing through on the sides a bit when necessary as long as I kept the height.
Anyway it worked well. The images expanded and shrank with the browser width, but they always showed the full height of the image. I signed off on the job and it looked good. Until I changed the browser window height (which is something I rarely think to do). Then the elements all spilled out to the right and left of the 4 main divs. I realize now that nothing in the document specifies the width of any section, just the height at 100vh. Only the fact that all four background images have the same dimensions makes it look like there are defined margins.
Is there a simple solution to this? I need to define a right and left border to the page to contain all of the inner divs and buttons, but I want to keep the 4 main divs showing 100% vertical height.
We are using
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
min-height: 100vh;
to define each of the four divs.
Basically I need a container surrounding the 4 main sections that expands to the width of the images, while still allowing the images to resize with the window, yet it keeps all of the other buttons and divs contained.
The page can be seen here: view-source:http://liquidpropane.io/hold/
It works right now exactly like I want except the buttons spill out the sides if the browser window is too short.
Thanks for the help Justin. In the end I did have to rethink the design. I wanted to keep the idea of using the background collages, but keep the responsive design. I moved the homepage logo out of the background image and into the banner section. Then I moved the important parts of the collage into the center part of the main image, and the less important parts to the sides. That way cropping at the sides will not matter. Finally I decided to remove the rounded text boxes out of sections 1 and 3. I will just use a small bit of landing page text (quite big in a thin font) on those pages and put the bulk of the content in sections 2 and 4. I have not added that text in yet, but the cleaned up version of the background and banner can be seen at http://liquidpropane.io/newhold
I guess the takeaway that is not specific to just my case is that if information in the background image is important and you want a responsive site, then the important part of the image needs to be centered because there is always the likelihood of cropping on the edges.
Here's what I'm trying to do. I want to have the navbar-brand image overlapping the navbar without altering it's height (navbar has fixed height of 80px).
It kinda works, however I cannot get the image to fully expose, it's being cut at the top. I tried vertical-align: top but it just slightly changes the position, the image is still being cut off. I want it to start exactly at the top of the screen, without any padding.
On devices with screens smaller than md the overlapping image is being hidden and another one is show, which should now be img-fluid and adjust it's size to the size of the navbar. However when resizing the screen so the navbar collapses, the navbar size remains 80px but the image starts overlapping it and the collapse-toggler button gets also messed up.
How can I get both of these things to work?
Here's a codepen: https://codepen.io/anon/pen/QYmMyg
Edit: Also, I noticed that setting the navbar to a fixed height actually prevents the collapse from working, because the height is limited. Is there any way I could increase the navbar height and keep the overlapping image and also keep the collapse working?
.navbar-brand {
transform: translateY(calc(50% - 40px));
padding-top: 0;
}
... will fix your problem (where 40px is half the height of .navbar).
Working example: https://codepen.io/andrei-gheorghiu/pen/pGLrOZ
The problem is rooted in .navbar>.container { align-items: center;}, which you don't want to mess with.
Ref: "Edit", it's a different question altogether. Answering it here would be detrimental to anyone having a similar problem, as it decreases the chances of them finding the answer.
Avoid asking multiple questions at once. Your questions need to remain helpful for anyone with a similar problem, so you need to ask them separately.
I'm working on this wordpress site http://10meilleurs.net and between 480px and 740px width the navigation bar goes into 2 lines instead of only one. I've been trying to figure it out for 2 hours and I don't know how to troubleshoot this anymore.
The text is more than likely too long for the content area at the font size specified; there's simply too many pixels. When this happens, it automatically wraps. You can use CSS to choose the overflow behavior but if the space isn't big enough, it won't work as expected.
You will need to shorten the text or adjust the font-size so that it fits. You can also make the width of the element wider to accommodate.
EDIT after looking at site: You can also make it so that the menu "hamburger" icon appears at a different breakpoint in your CSS.
http://www.eco1furniture.ca/
When resizing the page down the main-menu goes to a 2nd line. I know this is supposed to happen with the site being fluid. But is there a way of keeping it fixed (on one line)?
Thanks,
Ken
You can make a few changes to ensure the menu doesn't wrap onto two lines under "normal" conditions, but I don't think you can ever be certain it won't happen. For instance, the menu width will depend on the browser zoom level, font and font-size.
Using my browser defaults, your menu is 865px wide. Taking the gutters into consideration, the max-width of the small-screen stylesheet should be 972px, so the drop down menu appears before the menu goes onto two lines. 975px would be a reasonable value to account for some of the idiosyncrasies of different browsers, but it still assumes the user is at 100% zoom, and using the font and font-size you've specified.
responsive.css - line 51
#media only screen and (max-width: 975px) {
Setting a min-width on the menu itself suffers the same problems and as you discovered causes the menu to extend out of the main wrapper.
Dear Overflowing Stackers,
My page is proving to be a real pain the behind. I was experiencing this problem:
background is only as wide as viewport
and I tried to remedy it by putting a min-width on the body. That works just fine; everything displays properly, but only if my min-width has a value high enough to encompass my #navwrapper div (it's the one with the green swirly vector art background).
With such a high value (1265px) many users will be given a horizontal scrollbar, which I don't want. I have a really wide skyline image in the footer (3,000px) and it doesn't cause a scrollbar, so I'm wondering why my navwrapper does. Ideally, I want the page to have a min-width of 960px, so the navwrapper will stay centered, and the edges will get clipped if the edges extend past the viewport.
An early version of my page is here: http://jezenthomas.co.uk/poison2/
Hope someone can figure it out!
Your navwrapper has content in it. Your skyline is just a background image. Browsers treat content with priority and allow backgrounds to just fall outside of the viewport. If you want to prevent scrollbars, you can add
body {
overflow-x:hidden;
}
which will hide any horizontal scrollbars.