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;
Related
I'm trying to get the buttons in my mobile email to stop stacking on top of each other so closely. It looks good in desktop view, but mobile cuts out any space between the buttons.
I've tried adding padding-bottom and margin-bottoms, but they end up making the mobile buttons bigger but still touching.
.buttonstyles {
font-family:arial,helvetica,sans-serif !important;
font-size: 16px !important;
color: #FFFFFF !important;
padding: 10px !important;
}
This code is currently making the buttons touch.
The buttons currently
I think it will work or else plz share your code..
css
.buttonstyles {
display: inline-block
}
Please Try with this code.
.buttonstyles {
background:#000;
color: #FFFFFF;
padding: 10px ;
margin:10px;
float:left;
border:none;
}
<button class="buttonstyles">Demo1</button>
<button class="buttonstyles">Demo2</button>
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;
}
}
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).
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; }
I think I might be having a problem, not sure if it is a problem because I have been looking at it for sooooo long, I don't even know if its centered or not.
http://jamessuske.com/thornwood/gallery.php
What I am trying to do is center the entire gallery, to me it looks like its a bit to the right. If anyone can help me figure this out, that would be great. Thanks in advanced.
CSS CODE
.contentTextGallery{
padding:20px 0 0 0;
width:866px;
font-size:16px;
float:left;
}
.gallery{
width:912px;
margin-top:6px;
}
.gallery ul{
list-style-type:none;
text-align:center;
}
.gallery li{
display: inline-block;
}
* html .gallery li { /* IE6 */
display: inline;
}
*:first-child + html .gallery li { /* IE7 */
display: inline;
}
.gallery ul a {
display:block;
text-decoration: none;
color:#FFF;
padding:5px 0 0 5px;
}
It looks like you just need to remove the left padding on the element in your .gallery:
.gallery ul { padding-left: 0px; }
Depending on what web browser you're using, there is usually a default padding on lists.
Update: Oh, I see what you are trying to fix now, the stuff inside the container:
All you need is
.gallery ul {
padding: 0;
}
Original:
One thing you may want to do is pick up a tool like XScope: http://iconfactory.com/software/xscope. It's an application that has tools for designing (rulers, guides, browser size frames, etc.). The ruler could help you with this because it measures pixels on your screen. You can quickly measure how many pixels are on each side of your layout.
Also here is something similar but a little less elegant: http://www.arulerforwindows.com/
It's not centered. (There are now three people claiming that it's centered, but I have no idea what they are looking at...)
You are using a list for the images, and it has a padding on the left side by default.
You are using padding in the links to get a space between them, but you are only padding on the left and top sides, so that will also add extra space on the left.
Set the left padding to zero in the list:
.gallery ul{
list-style-type:none;
text-align:center;
padding-left: 0;
}
Make the left and right padding in the links more even:
.gallery ul a {
display:block;
text-decoration: none;
color:#FFF;
padding:5px 2px 0 3px;
}
You are right it is not centered.
I think, but am not sure, that it may be a padding issue, you set the padding left but not equally right on a couple elements in the container.
all left padding to 0px (or use equal padding left and right
like this - padding: 5px 5px;
or each image can have 0 padding and equal margin: 5px 5px;