Preventing navbar from resizing on Bootstrap - css

I've been stuck for like 2h trying to prevent my navbar from resizing, as I built a webapp which I don't want to be responsive designed.
The navbar started stacking components and shrinking whenever the browser window was resized, so I tried different solutions I found with some googling and also here in stackoverflow. None of them worked for me:
https://stackoverflow.com/a/28415865/3736964
Temporarily Disable Responsiveness Bootstrap
https://stackoverflow.com/a/14151865/3736964
I even went to http://getbootstrap.com/customize and created my own bootstrap version by unchecking the "responsive utilities" and changing two LESS variables:
#grid-float-breakpoint = 0
#grid-float-breakpoint-max = 0
(I also tried 99999 and stuff for that breakpoint max value)
I downloaded it and tested with no luck.
I still wasn't able to prevent the navbar from resizing whenever the window was resized

So this isn't the way it should be done, for sure, but I couldn't figure out a cleaner and non-intrusive way of preventing the navbar from shrink.
I just added an inline style (you can do it also by overriding it on your .css files) for my nav element:
<nav class="class="navbar navbar-default" style="min-width: 1300px !important;">
...
</nav>
The !important aims for that style rule not being overriden. I've set the min-width according to my needs, so if anyone finds this useful, should change it for his particular needs.

<nav class="class="navbar navbar-default" style="min-width: 1300px!important;"></nav>
If you want to fix is and if you want to fix is at the top
use css
body {
min-height: 2000px;
padding-top: 70px;
}
and class navbar navbar-default navbar-fixed-top plus also if you want to fix it use min-width: 1300px !important; in the style tag
Thanks With Regards

Related

Navmenu bar disappears when I active Bootstrap css

After I active Bootstrap to my theme I am developing in Wordpress - my nevmenu disappeared. It is there when I scale the website down (max widt 980px) and is visible as a collapse menu. Maybe there is some .nav styling from Bootstrap that are conflicting with my theme.
Can you please help me finding out what it is?
Here is a link to the website: http://list.thorsteinnhelgason.is/index.php/2018/02/15/prufupostur/
Best B
Saw your site, you messed up the content within navbar, your nav is there but it's not displaying at a block level.
I would suggest you use this one instead, I'm using the same. wp-bootstrap-navwalker. The developer has explained a great deal of using it. Try it.
The navbar you are using is Bootstrap v4, but your stylesheet is using v2.3.2: http://list.thorsteinnhelgason.is/wp-content/themes/listin/bootstrap/css/bootstrap.css
If you are unable to upgrade WordPress for some reason, you can add this style:
.navbar-toggleable-md .collapse {
display: flex !important;
}
And change your HTML to this:
<div class="navbar navbar-toggleable-md navbar-inverse navbar-fixed-top">...
Good luck!

RTL bulma css navbar

I am trying to add the option for RTL users in my site. I am using bulma (V 0.5.2), most of it (the rtl) is working out of the box with a simple "style=direction:rtl" on the body tag. However, the navbar is acting funny. How can I make it work correctly with RTL?
This is what it looks like on desktop with rtl:
And on mobile it's like this:
Well, i have solved it by digging a bit in the code and understanding what should be changed in oreder for it to work properly as RTL navbar.
We have three main sections in the navbar, and i recommend making a class for it in you app.css or whatever name you have for your css called rtl-navbar and apply it on navbar-burger, navbar-end. on top of this, you should apply direction:rtl on the main navbar container.
.navbar-rtl{
margin-right: auto;
margin-left: 0;
}

How to override element.style in Wordpress navigation bar (menu)?

First of all, a link to my site: http://jakubplech.pl/.
You can see a grey, centered horizontal menu in there. If you look at it, you'll get:
<nav id="site-navigation" class="main-navigation position-default fixed" role="navigation" style="width: 1349px;">
I want nothing more that to change that width to auto, but it is an element.style of the theme and I have no idea how to refer to it (every change in custom CSS I did so far started with a dot). I read that i could use an !important trick, but since I don't know how to refer to it, it is impossible for me.
I'm dying to know the answer for this - if anyone could help me it would save me hours of frustration. Thanks in advance!
You should be able to use its class like so:
.main-navigation {
width: auto !important;
}

Angular UI bootstrap progressbar minimum width

I am trying to set the minimum width of the angular UI bootstrap progressbar. I checked the docs and they do not mention how to do this. I know for the 'regular' bootstrap you can use something like style="min-width: 10em;". However this only works if you wrap it in the standard progress bootstrap divs like so:
<div class="progress">
<uib-progressbar class="progress-striped active progress-bar" value="value" style="min-width: 10em;">
<span> text </span></uib-progressbar>
</div>
But this displays a progressbar bar without the 'active' animation since regular bootstrap does not support this. When I try it like so it does not set the min-width property
<uib-progressbar class="progress-striped active progress-bar"value="value" style="min-width: 10em;">
<span> text </span>
</uib-progressbar>
edit: I overlooked the animation section in the 'regular' bootstrap docs. I would however like to use the UI bootstrap progressbar if possible.
Regular Bootstrap supports animated progress bars.
Are you sure that you correctly imported Boostrap files? I think you might have included only the CSS file but not the JS. Take a look at the basic template to see which files you should include.
Take also a look at the uib-progressbar documentation. The code snippet you wrote seems to be correct. As I said, I think the reason for this problem is that you didn't include the JS file for Bootstrap.
EDIT: Oh, ui-bootstrap apparently doesn't need Bootstrap's JS, you're right.
Regarding the min-width part of your question: I noticed that you added the progress-bar class to the <uib-progressbar> element. According to the documentation, the progress-bar class should not be used (it will be added by ui-bootstrap to the <div> element that will be rendered inside <uib-progressbar>, and you can easily verify this by inspecting the progress bar width devtools).
Thus, the min-width property is to be applied to the internal <div>. However, since the rendering is managed by angular, the only way to change it is to add a CSS rule like this:
.setminwidth .progress-bar {
min-width: 20em;
}
And then add the new setminwidth class to the external <uib-element> like this:
<uib-progressbar class="progress-striped setminwidth" value="22" type="warning">22%</uib-progressbar>
I tested this but it doesn't seem to work. I think it's because min-width: 0; is hardcoded in the template, and it gets reset everytime ui-bootstrap re-renders the element.
I tried adding !important to the CSS rule, to avoid being overridden, but it doesn't work either.
I guess at this point you should consider why you need to add this min-width property, since ui-bootstrap likes to override it. Could it be because you don't want the progress bar to be "too empty" when the % is low? If that's the case, I think you should look up the changes recently introduced by Bootstrap: it seems that now they add a special min-width for 0%, 1% and 2%.
UPD: The Bootstrap folks apparently changed their mind and reverted the special min-width value. At this point, I think that ui-bootstrap should follow along and remove the hardcoded min-width: 0; as it's not needed anymore. I just sent a pull-request to them. If they merge it, you will be able to use the CSS I posted above.

Bootstrap 3 responsive classes change display property

When upgrading my project from Bootstrap 2.3 to Bootstrap 3.0 I noticed that adding a responsive class, e.g. hidden-sm to an element, changes its CSS display property to block.
To make things worse, the new display property is set as !important, making it difficult (or at least ugly) to overwrite by custom CSS rules.
For example, the code (view result here: http://jsfiddle.net/RZ95F/)
<h1>
Heading
<small>sub-Heading</small>
</h1>
gives a different result than the code (view result here: http://jsfiddle.net/vTuW8/)
<h1>
Heading
<small class="hidden-sm">sub-Heading</small>
</h1>
namely adding a line-break between the heading and the sub-heading.
Of course, this strange behavior also applies to much more complicated cases, making it very hard for me to upgrade my project without major markup and CSS changes just to compensate for this new Bootstrap behavior.
What did the Bootstrap team try to accomplish by changing the display behavior of those elements? And is there an easy workaround to restore the behavior known from Bootstrap 2.3 and earlier?
This is tracked on GitHub as #8869. A simple workaround shown there is to add a separate inline helper class:
.hidden-inline-xs {
display: inline !important;
}
#media (max-width: 767px) {
.hidden-inline-xs {
display: none !important;
}
}
Then you can just use
<h1>
Heading
<small class="hidden-inline-xs">sub-Heading</small>
</h1>

Resources