I'm new to Bootstrap Studio and CSS generally. I understand HTML a bit though. CSS is a bit too complicated for me, and I'm not web designer by trade. I've been using Bootstrap sporadically this year to build a simple website. However today I have run into an issue with the Navbar height. Everything looks ok in Firefox preview, but in Bootstrap Studio 4.3.2 environment I see this for my index page, where the navbar height is a bit tight:
I see this for my page with an image gallery, where the nav bar is almost hidden:
and these for my other two pages, where the nav bar is 'normal' height:
when I edit text on my index page, I see this happen, where the nav bar height gets higher when I eliminate a shift-carriage return in the paragraph.:
I suspect there are several things happening. But first, I'd like to know how to set a minimum height to the navbar component. I've seen instructions elsewhere that say I need to edit all the nav bar components to do this. Is that correct?
Also, I suspect that the 'body' or 'div' or 'section' element must have a built in 'height' parameter that is causing the text to squeeze the nav bar height, and in the case of the gallery page, the lightbox 'block' is causing the squashing of the navbar.
But, in Firefox preview, all seems fine. I'm not sure though if other browsers might be more sensitive.
First, I would highly suggest you get some tutorials under your belt for both HTML and CSS because you will need them for this app. One thing I can say is that we're here to help as a community, but not to do your work for you just because you don't know how (no offense meant at all, just a generalization).
Bootstrap Studio, while having good drag and drop capabilities, is not a 100% visual editor for websites, you will need to know how to edit things, how to change the CSS by adding new and overwriting classes etc. It's really not a suggestion, it's a must if you intend to use this app to really build a website.
Second, you're going to need to upload your site so that people can see the code and inspect it to know what might be wrong. Screenshots are good if the problem may be obvious, but in this case it's not so if you can upload it, that will help the community be able to help you better. :)
Many thanks for the reply! My website will be super simple; it will be basically pages with lists of links to documents. The fanciest thing is the image gallery I've shown, but everything else will be basically links and text.
You're right that I should take a look at CSS. When BS exports to html, I can more or less understand what's going when I look at the html files with a text editor. But what 'system variables' are set/hard-coded by CSS I haven't figured out yet well enough. I would have done everything in HTML to begin with, but since the intent is to have a 'reference' website, I imagine many will look via their phones and so having that 'flex design' is probably a must.
All that said, I was able to figure out that adding "min-height" variable at 55 px in the navbar section under styles solved the problem. (And today I discovered linked components which makes editing that much easier!) I'm still curious as to why the navbar was getting vertically 'crushed' by the text on the index page and the image gallery on the gallery page; I suspect there are 'height' parameters in CSS, and maybe in Javascript, that have competing precedence. But at this point, all seems good for now.
