I'm working with a template that uses Font Awesome for social media icons. Since one of the icons I need is not included in Font Awesome I found a CSS trick to overwrite a certain icon by a custom image. This works fine (fa-toggle-on can be replaced with any random icon):
.home i.fa.fa-toggle-on {
content:url(\http://www.url.com/image1.png);
margin-top: 10px;
}
However, when hovering this image I need to show a different PNG (different color). Let's say "image2.png". I've been puzzling with this for an hour or so and can't seem to fix it. Commands like ".home i.fa.fa-toggle-on a:hover" don't seem to do the trick. Any ideas? Everything will be highly appreciated!
The CSS for the "normal" Social Media icons with Font Awesome is as follows:
/**
* SOCIAL ICONS
*/
#social-icons {
padding: 0;
margin: 0;
}
#social-icons li {
display: inline;
float: left;
margin-right: 1px;
line-height: 32px;
}
#social-icons li a {
display: inline-block;
width: 40px;
height: 40px;
text-align: center;
margin: 20px 0 0 0;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
#social-icons li a:hover {
height: 80px;
margin-top: 0;
background: #fff;
}
#social-icons li a i:before {
position: relative;
top: 5px;
font-size: 18px;
color: #fff;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
#social-icons li a:hover i:before { top: 25px; }
Based on this line in the CSS
#social-icons li a:hover i:before
You need
#social-icons li a:hover i.fa.fa-toggle-on {
content:url(\http://www.url.com/image2.png);
}
Related
So right now I have a working setup so that when the nav is bigger than the screen then a picture slider down works out. However, the problem is that the nav does not minisize soon enough as it goes over the logo. I want it to be more sensitive to take the logo size into account as well.
Right now this is how I'm achieving this.
HERE IS THE https://jsfiddle.net/q2ozq1q2/3/
/* primary navigation
--------------------------------------------------------------------- */
#nav-wrap ul, #nav-wrap li, #nav-wrap a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
/* nav-wrap */
#nav-wrap {
position: relative;
font: 22px raleway-bold, sans-serif;
float: right;
margin-top: 36px;
margin-right: 20px;
z-index: 99999;
}
/* hide toggle button */
#nav-wrap > a.mobile-btn {
display: none;
border-radius: 3px;
}
ul#nav {
min-height: 48px;
width: auto;
/* left align the menu */
text-align: left;
}
ul#nav li {
position: relative;
list-style: none;
height: 48px;
display: inline-block;
}
/* Links */
ul#nav li a {
/* 8px padding top + 8px padding bottom + 32px line-height = 48px */
display: inline-block;
padding: 8px 11px;
line-height: 32px;
text-decoration: none;
text-align: left;
color: #14C9CF;
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
ul#nav li a:active { background-color: transparent !important; }
ul#nav li:hover > a,
ul#nav li.current a { color: #fff; }
/* adds down arrow */
ul#nav span:after {
width: 0;
height: 0px;
border: 4px solid transparent;
border-bottom: none;
border-top-color: #8a8383;
content: '';
vertical-align: middle;
display: inline-block;
position: relative;
right: 5px;
}
/* Sub Menu
----------------------------------------------------- */
ul#nav ul {
position: absolute;
top: 100%;
left: 0;
background: #1f2024;
min-width: 100%;
border-radius: 0 0 3px 3px;
/* for transition effects */
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
/* Third level sub menu
ul#nav ul ul {
position: absolute;
top: 0;
left: 100%;
border-radius: 0 3px 3px 3px;
}
*/
ul#nav ul li {
padding: 0;
display: block;
text-align: left;
/* for transition effects */
height: 0;
overflow: hidden;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
/*On Hover */
ul#nav li:hover > ul { opacity: 1; filter: alpha(opacity=100); }
ul#nav li:hover > ul li {
height: 42px;
overflow: visible;
border-bottom: 1px solid #26272C;
}
ul#nav li:hover > ul li:last-child { border: none; }
/* Sub Menu Anchor links */
ul#nav ul li a {
padding: 6px 15px;
margin: 0;
white-space: nowrap;
font-size: 13px;
}
You can see that it achieves it by this:
/* hide toggle button */
#nav-wrap > a.mobile-btn {
display: none;
border-radius: 3px;
}
But it does not use the the logo to know exactly when it starts or stops. So the nav will overlay onto the logo. Is there a way to account for the logo?
EDIT
https://jsfiddle.net/q2ozq1q2/3/
If I understand you correctly, you can change the width on the media-query to around 990px like so: (on line 289 in the fiddle)
#media only screen and (max-width: 990px) {
Hey u can resize both image and navigation bar when viewed on smaller screen :
Use following css as example:
img {
max-width:250px;
max-height:250px;
}
#nav-wrap ul#nav {
position:absolute;
width:100%;
}
ul#nav ul li a{
word-break:break-all;
width:100%;
}
You should add a class for img tag -
header .logo a {
display: block;
margin: 0;
padding: 0;
border: none;
outline: none;
}
header .logo a img{
width: 210px;
height: 34px;
}
I'm working in Dot Net Nuke on a website that has been previously setup. I want to add a css button I found on the internet. I put the html in the html fields and css in the stylesheet editor.
when a link is created it automatically adds ">>" after the link text. In other buttons css buttons I used I managed to remove that, but with this button I can't remove it. Also I want the button to link to another page using "a href". How would i make this possible?
Button HTML:
<div class="btn-container">
<input type="submit" value="button" id="button-blue"/>
<div class="ease"></div>
</div>
Button CSS:
#button-blue {
float: left;
width: 100%;
max-width: 500px;
border: white solid 4px;
cursor: pointer;
background-color: #0493bd;
margin-top: -4px;
color: white;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
letter-spacing: .1em;
padding-top: 22px;
padding-bottom: 22px;
font-weight: 500;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
}
/* Change text color & background opacity on hover*/
#button-blue:hover {
background-color: rgba(0,0,0,0);
color: #0493bd;
}
/* The white hover effect */
.ease {
width: 0px;
height: 70px;
background-color: white;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
-ms-transition: .3s ease;
transition: .3s ease;
}
/* Make visable when hover */
.btn-container:hover .ease {
width: 100%;
max-width: 500px;
background-color: white;
border: 0;
}
.btn-container:after {
display: none !important;
}
well you want the button to link to another page, to do that you can simply style your href to look as a button like this (Run the following snippet) -
Submit
<style>
#submit-btn{
display :inline-block;
text-decoration:none;
background-color:blue;
border-radius:4px;
padding:5px 10px;
color:white;
}
</style>
Well for the issue of >> after every link it may be some css that is adding it, which you haven't posted in your question so try adding following code which may remove it..
a:after {
content: none !important;
}
OR this one -
a:after {
display: none !important;
}
or just for the link like button I posted above try this -
#submit-btn:after {
content: none !important;
}
OR
#submit-btn:after {
display: none !important;
}
NOTE - Since you are overwriting CSS don't forget to add !important..
Change to button to href
<div class="btn-container">
Button
<div class="ease"></div>
</div>
CSS
#button-blue{
float:left;
width: 100%;
max-width:500px;
border: white solid 4px;
cursor: pointer;
background-color: #0493bd;
margin-top: -4px;
color: white;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
letter-spacing: .1em;
padding-top: 22px;
padding-bottom: 22px;
font-weight: 500;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
text-align:center;
}
/* Change text color & background opacity on hover*/
#button-blue:hover{
background-color: rgba(0,0,0,0);
color: #0493bd;
}
#button-blue:after{content:">>"}
/* The white hover effect */
.ease {
width: 0px;
height: 70px;
background-color: white;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
-ms-transition: .3s ease;
transition: .3s ease;
}
/* Make visable when hover */
.btn-container:hover .ease{
width: 100%;
max-width: 500px;
background-color: white;
border: 0;
}
.btn-container:after {
display: none !important;
}
demo link
https://jsfiddle.net/0zctLenb/
any ide what is it? The white box between two menu item.(circled with red)
CSS:
#navigation {
list-style-type: none;
margin: 0;
padding: 0;
vertical-align: middle;
line-height: 50px;
}
#navigation a {
text-decoration: none;
display: inline-block;
padding-bottom: 15px;
color: #383838;
webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s;
}
#navigation a:hover {
color: #6A98DD;
}
#navigation li {
display: inline-block;
padding-left: 9px;
padding-right: 10px;
color: #383838;
background: #EEE;
webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.6s;
webkit-transition: background 0.4s;
-moz-transition: background 0.4s;
-ms-transition: background 0.4s;
-o-transition: background 0.4s;
transition: background 0.4s;
}
#navigation li:hover {
padding-left: 8px;
color: #6A98DD;
display: inline-block;
background: #EEE;
border-left: 1px solid #AAA;
}
It is because your li are set todisplay: inline-block; - inline elements are effectively treated like textual nodes, so if each li is on a newline in your HTML this is interpreted as a space.
There are a number of ways to prevent this- one is to set font-size:0; on your ul then font-size:14px; on your li
Alternatively, you can float:left your li and set overflow:hidden on your ul
Or, you can remove the newline in your HTML- putting all your li on a single line.
See here for some other techniques and information, and here
Inline block display mode is the culprit.
#navigation li {
display: inline-block;
...
}
Instead, you can make this way, with the above code, add this in the end:
#navigation {
overflow: hidden;
}
#navigation li {
float: left;
}
Float your li's left like so;
#navigation li {
float: left;
}
the solution is:
Set float left on elements. Or...
Set font-size: 0 on parent and reset font size on children font-size: 1.
That happens becouse of white space between elements. another solution is to use some syntax that prevents spaces, like so:
<div id="navigation">
<li>Item 01</li><li>
Item 02</li><li>
Item 03</li><li>
Item 04</li><li>
Item 05</li>
</div>
Here an example:
1) set float left on childern: http://jsfiddle.net/27t5ogsj/2/
2) font-size method (simply css): http://jsfiddle.net/27t5ogsj/
3) html pre-format method: http://jsfiddle.net/27t5ogsj/1/
Personally i like the second method becouse then i can center horizontally the menu with an simple text-align: center on parent! http://jsfiddle.net/27t5ogsj/3/
JSFIDDLE
When you hover over one of the first links (products,technology, etc), a dropdown menu appears and the link turns orange. It continues to stay orange as you hover over the dropdown menu. I remember doing something for it to behave this way, and I want to get rid of it now, but I cannot for the life of me remember how I did this, and cannot undo it. Anyone see how I can undo this?
Here's the css:
#navbar{
list-style: none;
float: right;
margin-top: 54px;
position: relative;
}
.firstnavmenu{
margin-top: 10px;
}
/*first level*/
#navbar li{
float:left;
width: 140px;
text-align: center;
-webkit-transition: background 0.3s ease;
-moz-transition: background 0.3s ease;
-o-transition: background 0.3s ease;
transition: background 0.3s ease;
}
#navbar li a{
text-decoration: none;
font-family: "Open Sans", sans-serif;
font-size: 11px;
letter-spacing: 1px;
color: #524F4F;
font-weight: 600;
-webkit-transition: color 0.3s ease;
-moz-transition: color 0.3s ease;
-o-transition: color 0.3s ease;
transition: color 0.3s ease;
}
#navbar li:hover > a{
color: #f3a82e;
}
#navbar li:hover > ul{
height: 250px;
}
/* second level */
#navbar li ul{
list-style: none;
position: absolute;
top: 100%;
height:0px;
overflow: hidden;
-o-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
transition: all .3s ease-in;
}
#navbar li ul li:last-child{
padding-bottom: 10px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-bottom-right-radius: 8px;
-moz-border-bottom-left-radius: 8px;
}
#navbar li ul li{
float: none;
position: relative;
width: 140px;
height: auto;
background-color:rgba(255,255,255,0.7);
color:rgba(255,255,255,0.7);
padding-top:5px;
padding-bottom: 5px;
}
#navbar li ul li a{
padding-left: 10px;
text-align: left;
padding-top: 6px;
width: 90%;
height: 100%;
display: block;
}
than use
#navbar li a:hover{
color: #f3a82e;
}
instead of this
#navbar li:hover > a{
color: #f3a82e;
}
http://jsfiddle.net/fp5TM/1/
I have a site consisting of three articles. I have a couple media queries set up for responsive design, but as I resize, it seems the ul and li elements of the article overflow the article (tested on an iphone5). I can hack around this by setting a height on the article to, say 200%, but would like to avoid this if I can. The CSS behind the article and ul:
#about {
background-color: #ebebeb;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#about h1 {
text-align: center;
margin: 0;
padding-top: 3em;
}
#about ul {
display: block;
width: 100%;
margin: 5em auto;
list-style: none;
padding: 0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#about ul li {
width: 20%;
float: left;
vertical-align: top;
margin:0 6.6666665%;
font-size: .8em;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#about ul li img {
display: block;
margin-left: 2em;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
And here is a jsFiddle => http://jsfiddle.net/sKvqF/
It's hard to recreate the effect it's giving without all the necessary code but I'm hoping someone can spot an error in my code somewhere.
I'm not 100% sure, what you are referring to by 'overflow' but if you are floating the list-items, you highly probable want to include a clearfix on your ul, such as:
#about ul:before, #about ul:after { content: ""; display: table; }
#about ul:after { clear: both; }
#about ul { zoom: 1; }
See https://stackoverflow.com/a/6539954/1696030
But be also aware of the high specifity of your CSS selectors, see f.e. http://csswizardry.com/2011/09/when-using-ids-can-be-a-pain-in-the-class/