I'm trying to rotate an arrow 90 degrees when I hover over a menu item on my navbar.
The navbar menu when hovered over currently displays a list of sub menus, but I'd like for the arrow to rotate facing down when the submenu is displayed. Submenu hover works as I'd like to right now, but I can only get the arrow to rotate if I hover directly over it. I would like tie the arrow rotation and the submenu display together.
Here's my HTML:
<li>
<a>
<i class="fa fa-columns" aria-hidden="true"></i>
Admin
<i class="fa fa-arrow-right" aria-hidden="true"></i>
</a>
<ul>
<li><i class="fa fa-globe" aria-hidden="true"></i> Source Admin</li>
<li><i class="fa fa-inbox" aria-hidden="true"></i> Service Admin</li>
<li><i class="fa fa-clipboard" aria-hidden="true"></i> Bulk Services</li>
</ul>
</li>
Here is my CSS:
nav li:hover > ul
{
display: block;
}
nav i:hover
{
transform: rotate(90deg);
}
I should also note, that the way I have it right now rotates every other menu icon at the moment.
Any help is appreciated, thank you!
Related
So, I got my Dopdown for Languages, I want to make a href if I press on "English", how can I do that?
<div class="nav-wrapper">
<div class="sl-nav">
Sprache:
<ul>
<li><b>Deutsch</b> <i class="fa fa-angle-down" aria-hidden="true"></i>
<div class="triangle"></div>
<ul>
<li><i class="sl-flag flag-de"><div id="germany"></div></i> <span class="active">Deutsch</span></li>
<li><i class="sl-flag flag-usa"><div id="germany"></div></i> <span>English</span></li>
<li><i class="sl-flag flag-cz"><div id="germany"></div></i> <span>Česky</span></li>
</ul>
</li>
</ul>
</div>
</div>
Im pretty new, to HTML and don't know where to put my href
You could put the a anchor in the whole li element, so it works by clicking on the text and also the flag:
<li><i class="sl-flag flag-usa"><div id="germany"></div></i> <span>English</span></li>
also, remember to change your ids, they're all germany now
You can add an anchor tag <a> on the elements:
<li><i class="sl-flag flag-usa"><div id="germany"></div></i>English</li>
My code is given below,
<ul style="list-style:none">
<li><i class="fa fa-hospital-o first" aria-hidden="true"></i>arrows</li>
<li><i class="fa fa-cogs" aria-hidden="true"></i>battery</li>
<li><i class="fa fa-university" aria-hidden="true"></i>bell</li>
<li><i class="fa fa-industry" aria-hidden="true"></i>bicycle</li>
<li><i class="fa fa-music" aria-hidden="true"></i>circle</li>
<li><i class="fa fa-users" aria-hidden="true"></i>deaf</li>
</ul>
So, onclick of a link I need to change the color of content & icon in the link.
css:
ul li:active {
color:green;
}
It is not working. When selecting a particular list item, I need to change the color. Can anyone please help me with this?
Check this solution hope it will help :
$(document).ready(function(){
$("ul > li").click(function(){
$("ul > li").removeClass("active");
$(this).addClass("active");
});
});
ul{
list-style:none;
}
ul li {
position: relative;
}
li a {
text-decoration: none;
}
li a i {
position: absolute;
left: 0px;
}
li a {
padding-left: 32px;
}
li.active a {
color: green !important;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="active"><i class="fas fa-hospital first" aria-hidden="true"></i>arrows</li>
<li><i class="fas fa-cogs" aria-hidden="true"></i>battery</li>
<li><i class="fas fa-university" aria-hidden="true"></i>bell</li>
<li><i class="fas fa-industry" aria-hidden="true"></i>bicycle</li>
<li><i class="fas fa-music" aria-hidden="true"></i>circle</li>
<li><i class="fas fa-users" aria-hidden="true"></i>deaf</li>
</ul>
You got i as item ? thats weird but w/e i also dont get what you want a list but w/e
<ul>
<li><a class="something" href="#">arrows</a></li>
</ul>
.something:active {
background-color: white;
}
again i dont get the question, or what your asking it seems your marking way to much on html, you need to clean your code
How come when someone mouses over the Google Icon, Instagram and Facebook Icon they appear faded afterwards.
This also is happening in mobile responsive menu where text fades and doesn't return to its original color state.
Website is hopkinslawokc.com
Hi you have not opacity set, But if you hover over the icons than got he a opacity. If you give the li > id give a opacity. so li id="menu-item-40 opacity: 0.35;
// Social Hover
jQuery(".social-icon").hover(function(){
jQuery(this).animate({ opacity: 0.35 }, 150);
}, function(){
jQuery(this).animate({ opacity: 1 }, 150);
});
/* this bit of code was found in
http://hopkinslawokc.com/wp-content/themes/goodspace-v1-11/javascript/gdl-scripts.js
*/
ul {
list-style: none;
font-size: 36px;
}
ul li {
float: left;
margin-right: 20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="social-icon">
<i class="fa fa-facebook"></i>
</li>
<li class="social-icon">
<i class="fa fa-twitter"></i>
</li>
<li class="social-icon">
<i class="fa fa-google"></i>
</li>
</ul>
It is working just as expected except what the first answer said...if you want it to appear faded from the get go then you need to add it in the css.
this is the css only solution.
ul {
list-style: none;
font-size: 36px;
}
ul li {
float: left;
margin-right: 20px;
opacity:.35;
transition: all 150ms linear;
}
ul li:hover{opacity:1;}
.fa-facebook{color:blue;}
.fa-twitter{color:#2b2626;}
.fa-google{color:#ff0000;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="social-icon">
<i class="fa fa-facebook"></i>
</li>
<li class="social-icon">
<i class="fa fa-twitter"></i>
</li>
<li class="social-icon">
<i class="fa fa-google"></i>
</li>
</ul>
I am building a responsive website using Bootstrap and Less.
I have put in some social Icons using font awesome which have worked fine.
However, my logo in meant to be in the center and was before I put the social icons in but now I have added them they are pushing my logo to the left.
Here is the html
<header>
<div id="social">
<ul class="pull-right">
<li><i class="fa fa-facebook-official fa-2x"></i></li>
<li><i class="fa fa-twitter fa-2x"></i></li>
<li><i class="fa fa-linkedin-square fa-2x"></i></li>
<li><i class="fa fa-google-plus-square fa-2x"></i></li>
</ul>
</div>
<div class = "logomove">
<div id="logo" class="text-center">
<img src="assets/images/logo.png" alt="Logo" />
</div>
</div>
</header>
And the CSS:
#social {
li {list-style: none; display: inline-block; padding:3px; float:right; color:#brand-primary; }
}
I have also tried positioning the logo 250px across the page to try and center it but it will not work.
Any suggestions much appreciated, I'm really new to this so sorry if I am missing something.
The static positioning of your #social element is pushing the logo away. You have to make either of them absolute to make it not effect the other element.
Try like this:
header{
position:relative;
}
#social {
li {
list-style: none;
display: inline-block;
padding:3px;
float:right;
color:#brand-primary;
position:absolute;
right:0px;
top:0px;
}
}
You might need to adjust the top and right values.
I've attempted to replace fa icons on blogger with custom icons using
.fa-facebook{content:url("")}
The images work on Chrome but not FF or IE.
What's going on/Is there a workaround?
Jsfiddle
According to W3school:
Definition and Usage
The content property is used with the :before and :after
pseudo-elements, to insert generated content.
So instead of .fa-facebook{content:url("")} use .fa-facebook:before{content:url("")}
Jsfiddle
According to the official rules, the content property only works for ::before and ::after pseudo-elements. So in this case, Chrome breaks the rules!
Solution: add ::before to the selectors for the icons, then it will work in all browsers.
.fa-facebook::before {
content: url("https://lh3.googleusercontent.com/-VPr8buUo47w/VjMsRPIzr-I/AAAAAAAAAL4/AYBtvlNCQiw/s64-Ic42/clouds_social_media_icons_set_64x64_0000_facebook.png");
}
.fa-twitter::before {
content: url("https://lh3.googleusercontent.com/-yDH1FuHcQ5s/VjMsQ2lXvxI/AAAAAAAAAMg/i8JHsTh6aU8/s64-Ic42/clouds_social_media_icons_set_64x64_0002_twitter.png");
}
.fa-instagram::before {
content: url("https://lh3.googleusercontent.com/-VIveL13ocQc/VjMw7JU6dGI/AAAAAAAAAOo/AGxBey6rtC0/s64-Ic42/clouds_social_media_icons_set_64x64_0001_instagram.png")
}
.fa-pinterest::before {
content: url("https://lh3.googleusercontent.com/-Or5qfrW2PFI/VjMsQziUH5I/AAAAAAAAAL8/bOIkRNtMSbo/s64-Ic42/clouds_social_media_icons_set_64x64_0001_pinterest.png");
}
.fa-google-plus::before {
content: url("https://lh3.googleusercontent.com/-xIroPQ5PdBk/VjMsRhd-1VI/AAAAAAAAAMM/rcruNIarpPU/s64-Ic42/clouds_social_media_icons_set_64x64_0003_google%25252B.png");
}
.fa-heart::before {
content: url("https://lh3.googleusercontent.com/-ymc-N9bHkpo/VjNAMkaZnpI/AAAAAAAAAPY/Yv1qLXXuG7E/s64-Ic42/clouds_social_media_icons_set_64x64_0001_bloglovin.png");
}
<ul class="site-social-networks secondary-2-primary style-default show-title">
<li><i class="fa fa-facebook"></i>Facebook
</li>
<li><i class="fa fa-twitter"></i>Twitter
</li>
<li><i class="fa fa-instagram"></i>Instagram
</li>
<li><i class="fa fa-pinterest"></i>Pinterest
</li>
<li><i class="fa fa-heart"></i>Bloglovin
</li>
<li><i class="fa fa-google-plus"></i>Google Plus
</li>
</ul>
Use image in background instead of content for e.g
.fa-facebook{
content: '';
background:url("https://lh3.googleusercontent.com/-VPr8buUo47w/VjMsRPIzr-I/AAAAAAAAAL4/AYBtvlNCQiw/s64-Ic42/clouds_social_media_icons_set_64x64_0000_facebook.png");
width:64px;
height:64px;
display:inline-block;
}
I want to replace this line and show a custom image.
<i class="fa-solid fa-graduation-cap fa-lg">