I have a link with a dropdown menu. Problem is that when I click on the link the dropdown opens but there is unwanted border line on the bottom of the link. When i hover on the dropdown link the unwanted bottm line hides. But whenever mouse out from the link the unwanted bottom line displays again.
Here is my code:
<div class="dropdown">
<i class="fa fa-gear fa-lg"></i> <span class="caret"></span>
<ul class="dropdown-menu pull-right" aria-labelledby="dropdownMenu2">
<li><i class="fa fa-align-left"></i> Reorder Pages</li>
<li><i class="fa fa-trash"></i> Delete</li>
</ul>
</div>
Demo is here:
Probably border, outline or underline.
Try this:
a.dropdown-toggle {
border: none;
outline: none;
text-decoration: none;
}
You can try and see if there is only one border bottom tho and cancel it only in case you want to use other borderlines.
In a:toggle Class have Text Decoration . Remove the text decoration.
a:hover {
color: #23527c;
text-decoration: underline;
}
Now you have
.dropdown-toggle:hover {
text-decoration: none;
}
just add
.dropdown-toggle:hover,
.dropdown-toggle:focus {
text-decoration: none;
}
in your css, it resolves issue!
Jsfiddle-example
Related
I know this looks very simple, but I have been trying to figure out a solution for an hour now. I have an "a" element with text and an image inside. The problem is that the image goes below the text, and I want them lined up.
a {
text-decoration: none;
color: #fff;
}
a:hover {
color: #ff5c33;
text-decoration: none;
cursor: pointer;
}
#nav-user-logo{
max-height: 16px;
}
<!-- Header right part -->
<div class="dropdown">
<a>
User123
<img src="Images/Icons/user.svg" id="nav-user-logo" alt='User123'>
</a>
<div class="dropdown-content user-dropdown-content" >
<a>AW Admin</a>
<a>Account Settings</a>
<a>Change Password</a>
<a>Logout</a>
</div>
</div>
I didn't have the issue myself but you can do
#nav-user-logo {
max-height: 1em;
display: inline;
}
to guarantee it is inline with the text.
By defect, any browser, with your css will display the image side by side as, I think, you want:
example with your code:
a {
text-decoration: none;
}
a:hover {
color: #ff5c33;
text-decoration: none;
cursor: pointer;
}
#nav-user-logo{
max-height: 16px;
}
<div class="dropdown">
<a>
User123
<img src="https://www.ajvs.com/redirect/5/Agilent_IMG300_UHV_R0343301_1,8926cf9ec9ce009a52f3ea8866b07f5f" id="nav-user-logo" alt='User123'>
</a>
<div class="dropdown-content user-dropdown-content">
<a>AW Admin</a>
<a>Account Settings</a>
<a>Change Password</a>
<a>Logout</a>
</div>
</div>
Probably, you have some kind of "reset" css sheet that is turning all your images as display:block It's quite common in many wordpress themes. You may need to overwrite these css adding img {display:inline-block} or similar rule. Calling to the id image or class to not break your whole theme.
Turns out the issue was something super simple. This code is in a header, on the right side, and the "a" element was too small to display the code and image side by side. I fixed it with the following:
<!-- Header right part -->
<div class="dropdown">
<a style="display:inline-block; width: 150px;">
User123
<img src="Images/Icons/user.svg" id="nav-user-logo" alt='User123'>
</a>
<div class="dropdown-content user-dropdown-content" >
<a>AW Admin</a>
<a>Account Settings</a>
<a>Change Password</a>
<a>Logout</a>
</div>
</div>
im trying to fire a class when a hover a button, basically inside of my href i have a i icon tag that needs to change color: but is not working:
my css and html:
.catalog-icons i:hover{
color: #ba658a;
}
.catalog-icons .btn-icon:hover ~.catalog-icons i:hover{
color:#ba658a;
background-color: white;
}
<li class="list-inline-item">
<a class="btn btn-icon" href="">
<i class="fontello-icon icon-vet"></i>
</a>
</li>
I added an image since your code does not provide any.
Your rule should be simple:
.your_hovered_element_class:hover affected_elemnt_inside
in your case once .btn-icon is hovered, you change the i background color
.btn-icon:hover i{
background-color: #ba658a;
}
i img {
height: 1em;
}
<li class="list-inline-item">
<a class="btn btn-icon" href="">link text
<i class="fontello-icon icon-vet"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-person-outline-128.png" /></i>
</a>
</li>
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'm using a service which doesn't allow me to modify the code, but I"m able to add my own CSS. I am trying to change the CSS of a specific Link inside a li.
Here is my code:
<div class="kn-menu kn-view view_81" id="view_81">
<ul class="kn-tab-menu kn-grid-6">
<li class="kn-link-1"><span><i class="fa fa-bullseye"></i> I'm On Site</span></li>
<li class="kn-link-2"><span><i class="fa fa-pencil-square-o"></i> 1. Onsite Staff Signature</span></li>
<li class="kn-link-3"><span><i class="fa fa-pencil"></i> 2. Service/Signature</span></li>
<li class="kn-link-4"><span><i class="fa fa-ban"></i> 3. N/A - R</span></li>
<li class="kn-link-5"><span>Add Comments</span></li>
<li class="kn-link-6"><span><i class="fa fa-check"></i> 4. Completed</span></li>
</ul>
</div>
I want to select only the very first list item and tweak the css settings of the link within it - I want to make the background color and text different. Using the following allows me to change somethings but not the actual text within that li.
.kn-link-1 {
}
I also want to make sure that this change only happens for this specific instance where the parent id="view_81".
Can someone help find the right way to select just that
CSS is not the right place where you should change the content, anyway if you have no other choice, you could use the :after selector to do the following trick:
#view_81 > ul > li:nth-child(1) > a > span {
display: none;
}
#view_81 > ul > li:nth-child(1) > a:after {
background-color: red;
content: "your text";
}
<div class="kn-menu kn-view view_81" id="view_81">
<ul class="kn-tab-menu kn-grid-6">
<li class="kn-link-1"><span><i class="fa fa-bullseye"></i> I'm On Site</span>
</li>
<li class="kn-link-2"><span><i class="fa fa-pencil-square-o"></i> 1. Onsite Staff Signature</span>
</li>
<li class="kn-link-3"><span><i class="fa fa-pencil"></i> 2. Service/Signature</span>
</li>
<li class="kn-link-4"><span><i class="fa fa-ban"></i> 3. N/A - R</span>
</li>
<li class="kn-link-5"><span>Add Comments</span>
</li>
<li class="kn-link-6"><span><i class="fa fa-check"></i> 4. Completed</span>
</li>
</ul>
</div>
have you tried:
#view_81 ul li.kn-link-1
or
#view_81 ul li:first-child
To clarify my examples: "#" selector in CSS means "the one with the following ID" and then i'm telling the "ul" that comes after that and then the "li" that comes after that which has this class "kn-link-1" or which is the first item inside the tag (:first-child subselector).
I hope some of them help.
use this style:
li:first-of-type span
{
}
also be sure that your style link is last in your style references. If this does not help, declare your styles with "!important" like here:
li:first-of-type span
{
color:red !important;
}
using the selectors: #view_81 .kn-link-1 a targets the element with id="view_81" and the descendant element with class="kn-link-1" and the a tag inside that to change the background and text color.
#view_81 .kn-link-1 > a {
background: red;
color: yellow;
}
<div class="kn-menu kn-view view_81" id="view_81">
<ul class="kn-tab-menu kn-grid-6">
<li class="kn-link-1"><span><i class="fa fa-bullseye"></i> I'm On Site</span></li>
<li class="kn-link-2"><span><i class="fa fa-pencil-square-o"></i> 1. Onsite Staff Signature</span></li>
<li class="kn-link-3"><span><i class="fa fa-pencil"></i> 2. Service/Signature</span></li>
<li class="kn-link-4"><span><i class="fa fa-ban"></i> 3. N/A - R</span></li>
<li class="kn-link-5"><span>Add Comments</span></li>
<li class="kn-link-6"><span><i class="fa fa-check"></i> 4. Completed</span></li>
</ul>
</div>
I would stylize the css like this:
<style>
#view_81 .kn-link-1{
padding: 50px;
background-color: gray;
}
#view_81 .kn-link-1 a{
text-decoration: none;
}
#view_81 .kn-link-1 span{
color: white;
font-weight: bold;
text-shadow: 1px 2px 2px black;
}
</style>
This css only applies to the class .kn-link-1 within id #view_81.
I added a little basic css for your testing purposes, but you get the point.
I'm using the default CSS that came with bootstrap; also using the bootstrap theme and dashboard CSS.
By default, when on xs devices, the sidebar disappears. Well, this is what i'm using for all my application's main navigation. So, I'd like for it to switch to a horizontal layout on such devices, but I can't find anything online about how to do this.
I scoured the documentation, but it's pretty lousy IMO. There should be a breakdown of all the classes and their uses. I imagine there's a class i can add that will do what I want.
Does anyone know it?
Here's the html:
<div class="container-fluid">
<div class="row">
<div class="col-sm-1 col-md-1 col-lg-1 overflow-fix">
<ul class="nav nav-sidebar">
<li class="icon-center">
</i>
</li>
<li class="icon-center">
<i class="fa fa-users fa-2x" data-toggle="tooltip" data-placement="right" title="Users"></i>
</li>
<li class="icon-center">
<i class="fa fa-building-o fa-2x" data-toggle="tooltip" data-placement="right" title="Accounts"></i>
</li>
<li class="icon-center">
<i class="fa fa-sitemap fa-2x" data-toggle="tooltip" data-placement="right" title="Branches"></i>
</li>
</ul>
</div>
</div>
</div>
Turns out the .css files actually have pretty good comments so I was able to see that .sidebar class had display:none; on it. Then found the media query right under it which gets activated when on larger view ports.
Added the below to my overriding css file, and now it changes to horizontal centered menu when on small screens, then pops back to the sidebar on large screens.
.sidebar {
display:block;
border-bottom: 1px solid #eee;
}
.sidebar ul {
text-align:center;
margin-bottom:0px;
}
.sidebar ul li{
display:inline-block;
}
#media (min-width: 768px) {
.sidebar ul li{
display:block;
}
}
I'm quite new to messing with CSS, so if anyone has a suggestion for how better to format the above code, please don't hesitate to share!
The sidebar has display: none by default. This can be overriden by
.sidebar
{
display:block;
background-color: #f5f5f5;
border-right: 1px solid #eee;
}