I'm a newbie posting a solution for future reference for others.
A while back, on my website I was having an issue with the navbar. If the page was less than 768px wide, the navbar text wrapped but the wrapped text and collapsed icon was overlapping the page headers. At that time I saw that the navbar height was getting reduced to 2px for some reason. So, I set a min-height to the navbar of 55px, which seemed to do the trick.
Until I realized a few days ago that the navbar text was disappearing offscreen when it wrapped.
Going back to BSS, I saw that body height was being 'constrained' to match to the html height of whatever the set page format was. Both sections had "height" set to "100%". In another post in this forum, I found that by setting the body height parameter to "auto" rather than 100%, than all the heights of the page components are properly summed, including the navbar. So the navbar is no longer squeezed to a height of 2px, and it collapses properly without wrapping text disappearing or overlapping page headers.
I removed the min-height 55px navbar setting, and set the body "height:auto" parameter in styles.css, so it affects all the pages, rather than editing the body element of each page.
It took me a few days to figure all this out, so I'm posting this for other newbies, in case someone has similar issues.
I can't really envision what it is you're describing here. I've never had an issue with having to set the body height to auto to get the navbar to work correctly.
By setting "body" to "100%", "body" was then adopting whatever height "html" was set at, and this was causing the navbar to be set at a height of 2 px (or some randon height less than what it had to be to wrap properly), because the height of all the other page components was adding up to be more than the height in "html".
With "body" set to "auto", the height of body adds up to whatever the height of components need to be, so the navbar is no longer restricted, or set to a height of 2 px.
the <html> tag simply tells the browser that this is an HTML document. It does not need a height declaration.
By default, the <body> element takes on whatever height the content within it adds up to. However, if those elements don't have any height, the body will similarly have no height.
If you want to force the body to take up the height of the browser window, you can try some of the suggestions offered here, however there seems to be a great deal of dispute over which works best, and on which browser.
https://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height
Personally, I've never run into this problem. I'd be interesting seeing your .bsdesign file to see why you're having this problem.
Many thanks for your reply! In my case if body is 100%, the Navbar gets forced to a height of 2 px. But if I set the body height to auto, then the Navbar height is what it needs to be.
This is my bsdesign file. It's a super simple website, so perhaps there's a mistake somewhere:
I have personally never set the HTML nor the body tag to anything at all for the height. There's no need for it because everything you need for that site to grow vertically and horizontally is already set up when you create your project. I think maybe you're overthinking the situation? My guess is it's not the HTML or Body that is giving you issues, but the nav that is giving you issues. I would suggest looking there instead of trying to "patch" the situation.
All I can say is when I have body height set to 100%, the Navbar gets restricted to a height of 2 px, because other parts of the page total or exceed the 100% height, which seems to be inherited from html, which is 765 px or other, depending on the "device" selection in Bootstrap.
But when body is set to "auto", the Navbar works fine no matter the device or browser window size. And the height shown in Bootstrap for body reflects the total of the components on the page.
Since everything works fine with body set to auto and html set to 100% I'll leave it as is.
What you say about the html and body tags makes sense. I don't remember why I had set html height to 100%. It was a suggestion I had read somewhere months ago but don't remember the reason.
I don't think anyone asked so, are you using a default Nav from the main BSS Components, or is it something from the Online components or an externally gotten component? Just still sounds fishy like there's something within that setup that isn't default files. Maybe you have something overwriting the default CSS/JS is what I'm thinking.
I used the Navbar in Bootstrap, in the main components section. You can see my website in the link above. I haven't done any changes to the Javascript files (wouldn't know how), and I only made a few modest changes to styles.css for font sizes.
I was unable to reproduce the "2px" navbar height problem no matter what I did to your file. I deleted both the 100% height rule and the height:auto; rules you added, and neither made any difference to the navbar. The navbar stayed fixed at 56px in height. I disabled all your CSS files and deleted everything except for the navbar, and still wasn't able to reproduce the problem.
I am at a loss to explain what is causing your issue. Perhaps you should try reinstalling the program. Maybe the main bootstrap.css file that the program references somehow got corrupted on your computer. Or it could be some other aberrant file corruption somewhere.
In fact the problem occurs when body is set to 100%. If body is set to auto, all is fine. But if body is 100%, the Navbar is restricted to height of 2px. That's with html also at 100%.
What Printninja is saying is, take it all out, there's no need for it at all and see what happens then on your end. On his end, no setting was needed to adjust any of this, it's already done and he tried it in your file and it was just fine without any setting added to body. Remove it and see if that fixes your issue.
All I did was open your file and disable the CSS rule where you set the body height to auto and then did a screen capture which you can see below. The Navbar height did not change even though the HTML is still set at 100% height. I see no reason why you would need to apply a height rule to the HTML element in the first place. I've never heard of this being done before. All that <html> does is tell the browser that the file is an HTML document. The body by default assumes the height of whatever is placed within it.
Many thanks for your efforts. I guess I should have posted images. I forgot you could do that.
I understand what you are saying that html and body don't need to be set. My file and website are already fine with html at 100% and body height set to auto.
But Printninja specifically said "I was unable to reproduce the “2px” navbar height problem no matter what I did to your file. "
If you set html height and body height both to 100%, the Navbar gets restricted to 2px.
This is really what my initial post was about. That if someone is seeing their Navbar get forced to an absurd height, check that html and body aren't both set to 100%.
It seems if html height is turned off, or body height is turned off, the problem is also resolved.
I downloaded your file just now, I turned off both of those height additions in HTML and BODY tags. Nothing happened to the design, it didn't break, it didn't mess up when in mobile view, nothing. So ....
I think the next obvious thing to ask is ...
What version of the BSS app are you on, and is it Windows or Mac. I am on a Mac and all is fine without those settings. Not sure what Printninja is on. I can think of no other thing that would mess up like that, but you definitely have something either version wise or externally (other app) that is messing this up.
This is definitely not a typical issue and you might want to contact support on this for them to help you narrow it down. I know when contact Support they seem to already know what the issue is or find it pretty quickly.
Okay, I checked your file again and I can confirm that when you set the height of BOTH the <HTML> to 100% and the <body> to 100% it does result in some aberrant behavior where the Navbar is forced to take on a height of 2px. I'm not sure why this is, but you can resolve it by making the body's rule min-height: 100%; as opposed to just height: 100%;
Still, my question remains... WHY would you need do this??? I see no difference in your generated site when I disable both these height declarations.
It seems that when both html and body are at 100%, the body height gets constrained to the device page format (in Bootstrap the body height becomes 768 px or thereabouts). Why that forces the Navbar to a height 2px as opposed to the footer height or other body sections, that I have no idea.
I don't remember why I had set html and body to heights 100%. It may have been to force the footer to the bottom of the page in the browser window. I remember tinkering with the footer when I first tried BSS back in March to create the website page template.
But now that's moot as all my pages will have enough text that there won't be much white space.
Anyway, as per my first post, to anyone following this thread- if your Navbar gets forced to a height of 2px, check that html and body height aren't both set to 100%. And if so, turnoff one of these parameters (or both) to see if that resolves the problem.
