Trying to put the span class in the class="dropdown-toggle" so the icon shows more to left and becomes bigger.
Hos it looks now:
Code:
<span class="glyphicon glyphicon-ok"></span> Vakt <b class="caret"></b>
You can try this:
Demo
.dropdown-toggle
{
background:#eee;
color:#000;
text-decoration:none;
padding:15px 10px 15px 40px;
display:inline-block;
}
.glyphicon-ok{display:inline-block; padding-right:10px;}
You can add padding to the right of the span:
.dropdown-toggle .glyphicon.glyphicon-ok {
padding-right:30px;
}
I'm not sure how to make it larger.
Here is another post about making the glyphs bigger Bigger Glyphicons
To make it bigger can't you just increase height and width?
<span class="glyphicon glyphicon-ok" style="width:150%; height:150%"></span>
Related
A few weeks ago I was asked by my church to create a new website for them which I happily obliged to. I've already created a mockup in PS and I'm coding it right now. I created the navigation bar and it is working properly as I had intended.
However I'm running into a glaring problem concerning the spaces in between the menu items. It seems like it may be an easy fix, but I cannot seem to figure it out. The menu bar is set up as unordered and ordered lists. I have them evenly spread out, but in between the empty spaces, the mouse cursor changes from a pointer into an "I" bar, as if there is invisible text.
For me, this is not ideal, and I'd much prefer that when hovering over this empty space between the menu items that it would stay as a pointer for the cursor instead of this "I" bar. Also, if you highlight the entire menue, the spaces also highlight as well and connect with the menu items. That is also not ideal for me, and it makes me confused why the empty spaces are sort of acting like invisible text.
Here is my menu bar CSS code:
<style type="text/css">
nav {
position: relative;
width:960px;
z-index:9999;
margin-left:auto;
margin-right:auto;
padding:0;
background-color:transparent;
text-align:justify;
}
#bar1 {
background-color:transparent;
padding:0;
text-align: justify;
overflow: hidden;
height:39px;
border-top: 1px solid #222222; border-bottom: 1px solid #90908e;
background-color:transparent;
}
#bar1>li {
display:inline-block;
margin-top:8px;
height:100%;
background-color:transparent;
}
#bar1>li>a {
font-family:'Oswald',Verdana, Geneva, sans-serif;
font-size:15px;
color:#464748;
text-decoration:none;
}
#bar1>li>a:hover,#bar1>li>a:active,#bar1>li:hover>a {
font-family:'Oswald',Verdana, Geneva, sans-serif;
font-size:15px;
color:#2b77a0;
text-decoration:none;
}
#bar1>li>ul>li {
border-top: none;
height:33px;
margin-top:8px;
left: 0;
position: absolute;
width: 100%;
text-decoration:none;
background-color:transparent;
padding-top:7px;
}
#bar1>li:hover>ul>li{
display:block;
}
#bar1>li>ul>li{
display:none;
text-decoration:none;
}
#bar1>li>ul>li>a
{
font-family:'Antenna Thin', Arial, Helvetica, sans-serif;
font-size:15px;
color:#222222;
text-decoration:none;
}
#bar1>li>ul>li>a:hover, #bar1>li>ul>li>a:active, #bar1>li>ul>li:hover>a,
{
font-family:'Antenna Thin', Arial, Helvetica, sans-serif;
color:#222222;
}
li {
list-style-type:none;
}
.filler
{
width:100%;
display: inline-block;
height:0px;
cursor:pointer;
}
</style>
And here is my HTML coding (Ignore the comments, I use them so I don't get lost when I take breaks):
<nav>
<ul id="bar1">
<!--Begin About Us-->
<li>ABOUT US
<!--Begin drop down menu items-->
<ul>
<li>
<font color="#2b77a0">•</font> New to Nederland First Assembly
<span style="margin-left:10px;"><font color="#2b77a0">•</font> Our History</span>
<span style="margin-left:10px;"><font color="#2b77a0">•</font> Our Beliefs</span>
</li>
</ul>
<!--End drop down menu items-->
</li>
<!--End About Us-->
<!--Begin Ministries-->
<li>MINISTRIES
<!--Begin drop down menu items-->
<ul>
<li>
<font color="#2b77a0">•</font> Kids
<span style="margin-left:10px;"><font color="#2b77a0">•</font> Youth</span>
<span style="margin-left:10px;"><font color="#2b77a0">•</font> Women</span>
<span style="margin-left:10px;"><font color="#2b77a0">•</font> Men</span>
</li>
</ul>
<!--End drop down menu items-->
</li>
<!--End Ministries-->
<!--Begin Events-->
<li>EVENTS
<!--Begin drop down menu items-->
<ul>
<li>
<font color="#2b77a0">•</font> Latest News
<span style="margin-left:10px;"><font color="#2b77a0">•</font> Monthly Calendar</span>
</li>
</ul>
<!--End drop down menu items-->
</li>
<!--End Events-->
<!--Begin Listen Online-->
<li>LISTEN ONLINE
<!--Begin drop down menu items-->
<ul style="background-color:red;">
<li>
<font color="#2b77a0">•</font> Sermons
<span style="margin-left:10px;"><font color="#2b77a0">•</font> Teachings</span>
<span style="margin-left:10px;"><font color="#2b77a0">•</font> Archive</span>
</li>
</ul>
<!--End drop down menu items-->
</li>
<!--End Listen Online-->
<li>CONTACT US</li>
<li class="filler"></li>
</ul>
And here is hopefully a working JS Fiddle:
http://jsfiddle.net/Broli/yemze0je/1/
Inline block assigns a font size based on the default, what you want is the hand icon on a link, and the arrow when it's not a link:
DEMO: http://jsfiddle.net/yemze0je/3/
nav {
position: relative;
width:960px;
z-index:9999;
margin-left:auto;
margin-right:auto;
padding:0;
background-color:transparent;
text-align:justify;
font-size:0px; /* due to inline-block on children */
}
Because your font size is specified in the children, this does just that.
First off, comments are good for you! :-)
My immediate thought looking at your HTML is that you should be wrapping each anchor within its own list item.
Change this and the markup will probably behave in the way that you would like it to.
http://www.w3schools.com/html/html_lists.asp
Alternatively, if you would like to keep the same markup, you could mask the issue by setting the cursor with CSS, like this;
ul, li{cursor: default;}
I am presuming that the li or ul will need the curser set (I'm on my smartphone!)
I have two separate divs, why is the background color the same lime color for both? I want the first div white.
Here's the HTML:
<div id="head1">
<ul>
<li><a class="menu" href="#">Link one</a></li>
<li><a class="menu" href="#">Link two</a></li>
<li><a class="menu" href="#">Link three</a></li>
<li><a class="menu" href="#">Link four</a></li>
</ul>
</div>
<div id="title1">
<h1>some title</h1>
</div>
Heres the CSS:
#head1 {
}
#title1 {
height:100px;
background-color:lime;
}
ul {
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
border-bottom:2px aqua dashed;
}
li {
display:inline;
}
a.menu {
float:left;
width:6em;
text-decoration:none;
color:#666666;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a.menu:hover {
background-color:#ff3300;
}
h1 {
font-family: Gautami;
font-size:300%;
color: #FFFFFF;
}
When you float the list, the #title div essentially appears as if it's behind it. To correct this, add overflow:auto to your #head1 element
#head1 {
overflow:auto;
}
jsFiddle example
It's actually white. You just can't see it.
Because the ul (and other elements) are floated left, those elemente are taken out of the DOM's normal flow. What this basically means is that the parent div, #head1 no longer "sees" the ul. Because of this, the height of the div becomes 0px tall.
Here's a fiddle demonstrating this: http://jsfiddle.net/w858z/
As you can see, #head1 has a red border, but the height is 0px. If we remove the floats, the ul is now in the normal flow.
Here's an updated fiddle with the floats removed: http://jsfiddle.net/48Ahm/
The fix for this is to use either a clearfix or simply overflow:auto.
overflow example: http://jsfiddle.net/w858z/1/
clearfix example: http://jsfiddle.net/w858z/2/
Here's a stackoverflow discussing additional css properties that will result in an element being taken out of dom flow: What are the CSS properties that get elements out of the normal flow?
You just need to clear the second div clear: both;
I made a jsfiddle :
http://jsfiddle.net/5gwZ6/
I'm trying to change the submenu background color of a menu in its hover state. I've tried using firebug to find the relevant css classes but have only been partially successful.
If you visit the site (http://www.yogaacademy.com.au/new/) you'll see that there is both a grey and black background on hover. I want it to be completely black.
It's a wordpress site using the woothemes canvas theme with some customizations. The html (below) is pretty standard, but the I haven't been able to figure out exactly where the relevant css is coming from: styles.css and css/ and custom.css in the canvas-child theme.
Your help will be much appreciated.
Thanks.
change background color to black in layout.css line 211
#navigation ul.nav ul {
background: black; /*#e6e6e6 => black*/
left: -1px;
}
Try remove "float: left;" from #main-nav li in custom.css line 143
#main-nav li {
/* float: left; */
Change:
#navigation ul.nav ul {
background: #e6e6e6;
}
to
#navigation ul.nav ul {
background: #000000;
}
I think this CSS line is coming from: wp-content/themes/canvas/css/layout.css on line 211
Cheers
Go to that submenu class, then put this code: (Let's assume it's called child)
child:hover {
background-color:black}
**Try this code......**
Put in you style sheet.
#navigation ul.nav ul li:hover{
background: #000000;
}
HTML
<div class="collapse navbar-collapse" id="myNav">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Resource<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Financial</li>
<li>Real Estate</li>
</ul>
</li>
</ul>
</div>
CSS
#myNav ul.nav ul li a:hover{
background: #000000;
}
I have this HTML which renders a bootstrap dropdown under the object. It is possible to make it apear above the Title button?
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown">
Title
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a>Option 1</a></li>
<li class="dropdown-submenu"><a>Option 1</a></li>
(various number of <li>)
</ul>
</div>
I've tried with position:absolute; top:50px but doesn't work for any case.
Thanks!
This is by default part of what Bootstrap can do. It's in the docs under Button Dropdowns - Dropup menus
<div class="btn-group dropup">
As it's absolutely positioned, you will need to have some space above the button so you can see the drop up menu, so I wouldn't use it at the top of a page.
I've set up a fiddle here for you. If you remove the <br> at the top, you'll see that the menu options are hidden at the top of the output box.
you can rotate the container, and rotate the items inside to appear normal :)
its just a few lines of css.
css:
.dropdown {
left: 40px;
top: 150px;
transform: rotate(180deg);
}
.dropdown a, .dropdown button {
transform: rotate(180deg);
}
.dropdown a {
padding: 5px 35px 5px 5px;
}
.dropdown-menu {
margin-left: -18px !important;
}
fiddle
IMO its very simple and elegant solution, the only downside you will have to use transform or 'left' with important to override Bootstrap's direct styling on the element to adjust the opened menu
I have a div whose height span 2 rows. But I want to the following div fit into the bottom left and bottom right corner:
http://jsfiddle.net/netnet/NNH6V/
before browse, please drag the splitter to left and you will see the checkbox2 and "2222222222" could be fit into bottom left and bottom right perfectly.
I can use the relative position(.VerticalUp class). But the problem is it will leave a empty row underneath, which I don't want.
Any idea?
If you are trying to float the Hematology div, you have two of them that are causing conflict. If you change .Hematology { float: right; }, this will make the Prenatal content float right...making everything fit...
try float with position.
ps-i'm new here. don't have much experience. :)
Hey now change to your code as like this because your code is difficult i have created new code please check it. and implement your projects according design
Css Code
.top, .bottom{
list-style:none;
color:#fff;
}
.top li, .bottom li{
display:inline-block;
background:green;
width:33%;
vertical-align: top;
border-top:solid 10px red;
}
p{
display:inline-block;
vertical-align: top;
}
.bottom {
position:absolute;
left:0;
right:0;
bottom:0;
}
.bottom li:last-child{
float:right;
}
HTML code
<ul class="top">
<li>
<input type="checkbox">
<p>first Check box</p>
</li>
<li>
<input type="checkbox">
<p>Second Check box</p>
</li>
<li>
<p>finel box</p>
</li>
</ul>
<ul class="bottom">
<li>
<input type="checkbox">
<p>first Check box</p>
</li>
<li>
<p>finel box</p>
</li>
</ul>
Live demo http://jsfiddle.net/fAkY5/