I am using Bootstrap v3.
I have the navbar classes in place so that when I have my screen mobile-size the navigation collapses and the little grid-like toggle button appears - so this is working as expected.
what i would like, is for this to be the default action for all screen sizes. That is, even on a desktop I would like the navigation to be collapsed and the toggle button to be visible.
I've had a look through the css and there is a whole bunch of stuff that provides the functionality, though I don't know which parts to change.
I've tried commenting out the larger media-queries, though there are a lot of them and it seems to have a knock-on effect to other styling.
any ideas?
You can use override the default Bootstrap CSS like this...
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
Demo: http://www.bootply.com/114896
This will ensure that the collapsed navbar is always used by overriding the Bootstrap #media queries.
Update: For Bootstrap 4, you just need to remove the navbar-toggleable class:
http://www.codeply.com/go/LN6szcJO53
This is what worked for me.
Visit : http://getbootstrap.com/customize/
Locate : 'Less variables' --> 'Media queries breakpoints'
Change : #screen-lg value from 1200px to 1920px
Locate : "Grid system" --> #grid-float-breakpoint
Change : #screen-sm-min to #screen-lg
Scroll to end of page.
Click on "Compile and Download"
Extract and use these downloaded files.
This worked for me:
.navbar-collapse.collapse {
display: none!important;
}
If suppose you find problems with toggle too, then put the following:
.navbar-collapse.collapse.in{
display: block!important;
}
Easiest way i found is to change the variable.less file and change
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
#grid-float-breakpoint: #screen-sm-min;
to
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
#grid-float-breakpoint: ( your break point );
Only if you use LESS ofc.
Wanted to save time but it wasn't perfect. I got some issues with latest bootstrap, there is some unnecessary code and has a overflow problem in the drop-down menu. This code was the best solution for me:
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-collapse.collapse.in {
display: block!important;
}
.navbar-nav {
float: none!important;
}
.navbar-nav>li {
float: none;
}
Adding 100% value on #grid-float-breakpoint (Grid system -> #grid-float-breakpoint -> 100% instead of #screen-sm-min).
Related
Basic css question here.
Every time I press "Check all", the button populates with the names from a list (which is fine).
The issue is: The button width itself expands and gets bigger. I want to keep it fixed. Furthermore, how can I set a limit to the number of list items it can show? So for example, if there are a lot of items, after "test 5", a "..." should appear.
By the way: this is all in my custom.css, .btn-default is actually from bootstrap, but I wanted to change some things in my multi select-class. I changed caret margin because the caret was right beside the text, I wanted it to be to the VERY right, maybe that's what's messing everything up??
custom.css :
.sv-manage-multiselect-dropdown {
.btn-default {
background-image: none;
border: 1px solid #ADA9A9;
padding: 6px 8px 1px 8px ;
}
.btn .caret {
margin-left: 160px;
margin-bottom:5px;
}
}
Html:
<td class="col-xs-2">
<am-multiselect class="sv-manage-multiselect-dropdown"
ng-model="Mylist.names"
options="Names.name for link in Mylist"
multiple="true"
ms-selected="{{Mylist.names}}"
</am-multiselect>
</td>
Before:
After:
Have you tried using max-width in your css?
max-width: 40px;
For example.
Hope this helps!
I looked in angular-multiselect/src/multiselect.tmpl.html, adding this css should work, 10px is just for the example, put width and height of the checkmark, like this <i> will fill same place even if it's void:
.sv-manage-multiselect-dropdown {
ul.dropdown-menu > li > i{
display: inline-block;
min-width: 10px;
min-height: 10px;
}
}
Right now I have my navigation links centering themselves on a large display.
However, at the breakpoint and when the menu button comes up I'd like for the menu items to align themselves right. It just doesn't look right like this.
Also a way to remove that little white line right above the navigation links would be great, I'm not sure where it comes from. Thanks!
Check the issue out at https://willhay.io/masonry
To me the menu looks better as it is, centered.However here is the code for the way you like it:
#media only screen and (max-width : 780px) {
.noStyle li {
display:block;
text-align: right;
}
.noStyle {
float: right !important;
}
.navbar-collapse {
-webkit-box-shadow: inset 0 0px 0 rgba(255,255,255,.1);
box-shadow: inset 0 0px 0 rgba(255,255,255,.1);
}
}
Change the "780px" to your prefered width.
You have an extra-class, line 78 of your test.css, that displays inline li items in your menu. You need to remove that class from your menu items of from CSS. Then you can float your items. To do that you have to remove inline block from your UL declarations you've done on line 23 and set LI items to text-align: right;
I am trying to get my page to show 3 image links per line on mobile, instead of two, which is what currently shows. If you view this site in the developer tools as an iPhone 5, you'll see there are two square image links per line. I'd like to get 3 images per line, but am not sure what CSS rule to change to get three.
I tried modifying the width of various Divs, but it only made the image links smaller, and did not bring the third up to the line.
http://50.87.248.154/~thetinat/search/
Please let me know if I can clarify anything. Thanks!
You need to reduce width to: width: 29%; and turn off clear: both; on the odd class.
Like so:
.odd {
clear: none;
float: left;
}
.recipes-bottom .featuredpost .post {
width: 29%;
margin: 20px 5px 0px;
}
#media (max-width: 480px) {
.recipes-bottom article, .home-middle article {
float: none;
clear: none;
display: inline-block;
height: 150px;
vertical-align: middle;
}
}
I am trying to change size Page titles. But I am not able change it.
I have found CSS for nav bar in custom.css as below:
#navigation {
position: relative;
z-index: 3;
li {
border: solid #E2E3E3;
border-width: 0 1px;
display: none;
/* WIDTH:33.333%; */
&:first-child {
border-left-width: 0;
}
}
}
Although, width is commented or removed from li, I am seeing width of nav bar 33.333% only.
What is that I am missing? Can someone help me?
Thanks for your help!
Here is how my page's nav bar look alike:
Liferay's welcome theme come with sas compilation. Inside compiled CSS, you need to change properties of CSS and then those will be accepted as final values.
Question: What's the best way to create a horizontal menu with drop down capabilities that can be dynamically resized? (Or preferably, how can I edit my current menu to behave like that?)
Explanation: I'm using a thin, horizontal drop-down menu as the main navigation on my site. When the browser window is at full width, there are no problems, but when it is resized, the right-most link pushes down to the next line, as it is floated.
Horizontal menus are such a common thing, I know there have to be some common tricks and ways to create them so that they can be dynamically resized. So if trying to fix my current menu is too burdensome, I would be fine just to hear some tips or read some stuff on how to create better horizontal menus.
Here is what I think would be the main problem:
.menu2 li {
position: relative;
float: left;
width: 150px;
z-index: 1000
}
I've tried different combinations of making this inline and making other tweeks, such as making the 150px width into a percentage, but that would create all sorts of alignment issues with the text.
Here is a demo with all of the code now: http://jsfiddle.net/HSVdg/1/
Some notes on the above link:
I am using Tiny Drop Down 2 (http://sandbox.scriptiny.com/tinydropdown2/) for drop-down functionality (in the form of JS and CSS, which are noted in comments), though the drop down is not actually working in the jsfiddle. I'm pretty sure all of the JS is irrelevant to my main question.
Tiny Drop Down uses a lot of CSS, so it's been quite difficult for me to try and make little tweeks.
The buttons are not vertically lined up with the actual bar, but again this is not the main issue since this is not happening on my actual site.
The window size in the jsfiddle doesn't actually accomodate the entire length of buttons, so you immediately see the problem of the buttons moving to the next line.
Try my version, with display table/table-cell:
http://jsfiddle.net/HSVdg/10/
I've basically just replaced floats with display: table on .menu2 and display: table-cell on its children (li's)
This is how i see it
<nav>
<ul>
<li id="youarehere">Home
<li><a>Products</a>
<li><a>Services</a>
<li><a>Contact Us</a>
</ul>
</nav>
ul#navigation {
float: left;
margin: 0;
padding: 0;
width: 100%;
background-color: #039;
}
ul#navigation li { display: inline; }
ul#navigation li a {
text-decoration: none;
padding: .25em 1em;
border-bottom: solid 1px #39f;
border-top: solid 1px #39f;
border-right: solid 1px #39f;
}
a:link, a:visited { color: #fff; }
ul#navigation li a:hover {
background-color: #fff;
color: #000;
}
ul#navigation li#youarehere a { background-color: #09f; }