I have the below script which I am trying to apply some CSS to, to overwrite the bootstrap defaults.
h2 class="sr-only">${Search Categories}</h2>
<div role="list" class="list-group">
<a role="link" ng-class="{active: !data.t}" class="list-group-item"
ng-href="?id=search&q={{data.q}}" aria-label="${All search results}">
<i class="fa fa-chevron-right"/><span class="m-l-sm">${All}</span>
</a>
<a role="link" ng-repeat="source in data.searchSources | orderBy:'order'"
ng-href="?id=search&t={{source.id}}&q={{data.q}}"
ng-class="{active: data.t==source.id}"
class="list-group-item" aria-label="{{source.name}} ${Search results}">
<i class="fa fa-chevron-right"/><span class="m-l-sm">{{source.name}}</span>
</a>
</div>
Current the issue currently is that when one of the links is selected its blue which is OOTB functionality for bootstrap list-group-item but I am having some trouble overwriting it.
I assume I need something like a:focus {background-color: Whitesmoke} or list-group-item:focus ... but neither of these seem to work.
What is the right direction?
you should overwrite the :visited not :hover
ex :
a:visited {background-color: Whitesmoke}
Related
I'm trying to change the color of all elements inside of an anchor tag. These elements are i and span. However, I can't get my solution to work. Should I change the color one by one in CSS?
HTML and CSS
.active-link {
color: #2268ff;
}
<li class="nav__item">
<a href="#home" class="nav__link active-link">
<i class="bx bx-home nav__icon"></i>
<span class="nav__name">Home</span>
</a>
</li>
You can directly add the class name to the "li" tag
.active-link {
color: #2268ff;
}
<li class="nav__item active-link">
<a href="#home" class="nav__link ">
<i class="bx bx-home nav__icon"></i>
<span class="nav__name">Home</span>
</a>
</li>
What you have shared should work. If this isn't working, I suspect some other CSS rules are overriding your CSS.
By default there shouldn't be a style attached to the <span> or <i> elements. They might get one from the browser (user agent stylesheet) or (like in your case) it should come from its parent (inherited from).
Screenshot from browser developer tools
.active-link > * {
color: #2268ff;
}
<li class="nav__item active-link">
<a href="#home" class="nav__link ">
<i class="bx bx-home nav__icon"></i>
<span class="nav__name">Home</span>
</a>
</li>
I have a Bootstrap 4 dropdown menu whose clickable items are made of an icon and a short text next to the icon. I would like to have the icons and the text of all elements aligned. Naturally, I tried to do this with a table. Unfortunately, Bootstrap's dropdown-item class seems to interfere with the table layout, as shown by this JSfiddle:
HTML:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<table class="clickable-rows">
<tbody>
<tr class="dropdown-item" data-href="#">
<th><i class="fa fa-credit-card-alt"></i></th>
<td>Credit card</td>
</tr>
<tr class="dropdown-item" data-href="#">
<th><i class="fa fa-eur"></i></th>
<td>Cash</td>
</tr>
</tbody>
</table>
</div>
</div>
Javascript:
$( document ).ready(function() {
$('table.clickable-rows tr').click(function() {
window.location = $(this).data('href');
});
});
CSS:
table.clickable-rows td:hover {
cursor: pointer;
}
This gives me:
Instead of this, I would like to have the Credit card and Cash aligned as indicated by the red line, as well as icons centered within their column. How can I achieve this?
Note: The CSS and JS code are not directly related to the question. They ensure that whole rows behave like a clickable link. I have included them just to show a fully functional example.
The internet has enough say about why not to use <table /> to structure your HTML elements so I'm not going to repeat that here.
Your problem can be easily fixed by setting a fixed width on the icons, or better using FontAwesome's .fa-fw fixed width class. FontAwesome icons are center aligned by default inside the i.fa tag.
No need to set cursor: pointer; CSS, and no need to write JavaScript to get the data-href because the .dropdown-item is now a true anchor tag.
JSFiddle demo: https://jsfiddle.net/davidliang2008/6s18j09L/12/
Live demo...
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown button</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
<i class="fas fa-credit-card fa-fw"></i> Credit card
</a>
<a class="dropdown-item" href="#">
<i class="fas fa-euro-sign fa-fw"></i> Cash
</a>
</div>
</div>
<!-- Demo CSS libs -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<!-- Demo jQuery and JS bundle w/ Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"></script>
The answer is pretty simple and fortunately, as you are using Bootstrap, there is a class called .fa-fw. This class adds consistency and proper spacing to the FontAwesome icons which helps in solving your problem.
Use it in this way: <i class="fa fa-credit-card-alt fa-fw"></i>
Code:
<table class="clickable-rows">
<tbody>
<tr class="dropdown-item" data-href="#">
<th><i class="fa fa-credit-card-alt fa-fw"></i></th>
<td>Credit card</td>
</tr>
<tr class="dropdown-item" data-href="#">
<th><i class="fa fa-eur fa-fw"></i></th>
<td>Cash</td>
</tr>
</tbody>
</table>
Sandbox link to check:
https://codesandbox.io/s/wizardly-beaver-92vrg?file=/index.html
this may also do..
.dropdown-item .fa:before {
display: inline-block;
min-width: 35px;
text-align: center;
}
I have such a block of elements:
<div class="dropdown">
<button class="btn" >
<i class="fa fa-search"></i>
<i class="fa fa-caret-down"></i>
</button>
<input type="search" class="search-field" placeholder="Search...">
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
Now I want to display the dropdown-content when I am hovering just over button. .btn:hover .dropdown-content{ dislpay: block; } has no effect, however hovering over the whole block (dropdown) does work. It is also possible to wrap the whole block in an another block and pull the <input> to the outer block. But than I'm getting a similar problem with hovering over <input>.
My questions are now.
Why isn't it possible to display the block hovering over the button
Why hovering over <input> has no effect when it is in outer block (this
is not presented in the code above)
How can I fix it ?
There is no element .btn .dropdown-content. .dropdown-content is a sibling of .btn. So you can use following code. Please check...
.btn:hover + input + .dropdown-content {
display: block;
background: #000;
}
<div class="dropdown">
<button class="btn" >
button
<i class="fa fa-search"></i>
<i class="fa fa-caret-down"></i>
</button>
<input type="search" class="search-field" placeholder="Search...">
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
Or you can use .btn:hover ~ .dropdown-content { this CSS also.
Fiddle
I've got a seemingly small issue I can't seem to correct no matter what I'm trying. This is a navbar problem with an element displaying a font awesome icon, and shows a red text and yellow background when I hover over this icon. The is outside the Dashboard but the Dashboard text doesn't highlight like the icon does. It abides by the navbar wishes. But the .fas or whatever is causing the highlights I'm trying to get rid of. Help me Overflow Kenobis. You're my only hope.
<li class="nav-item" style="">
<a class="nav-link btn " method="POST" href="/users/dashboard" style="">
<i class="fas fa-tachometer-alt "></i> Dashboard
</a>
</li>
You can use :hover on <a> tag instead of <i> and remove the :hover from icon...
...If you can't find the :hover of icon you can apply pointer-events:none to the icon.
Stack Snippet
.nav-item a:hover {
background: yellow;
color: red;
}
.nav-item a i:hover {
background: red;
color: black;
}
.nav-item a i {
pointer-events: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<ul class="nav">
<li class="nav-item" style="">
<a class="nav-link btn " method="POST" href="/users/dashboard" style="">
<i class="fa fa-tachometer"></i> Dashboard
</a>
</li>
</ul>
I would suggest inspecting it with Chrome Dev Tools / Firebug. When you select the element there is a tab with set of its CSS rules and you can figure out which css class causes the problem.
Hope it helps
I'm trying to change the background color of a glyphicon upon hover/focus without success in my banner.Below is a code snippet for the 2 glyphicons i.e. glyphicon-user and glyphicon-login. The background changes to white even though I've set another color in the css.
1.html
<div class="row">
<div class="col-sm-6 col-md-offset-4 col-md-4">
<a id="logo" href="#"> <img src="../static/images/logo_small.png" data-medium="../static/images/logo_medium.png" data-large="../static/images/logo_large.png"></a>
</div>
<div class="col-sm-6 col-md-4">
<ul class="nav navbar-nav pull-right">
<li><a class="custom-white" href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a class="custom-white" href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
2.css
.custom-white { color:#fff;}
.custom-white:hover,
.custom-white:active,
.custom-white:focus {background-color: yellow;}
add !important after the attribute's value
Working demo
.custom-white:hover,
.custom-white:active,
.custom-white:focus {background-color: yellow !important;}
Try changing your CSS to this:
.nav>li>a.custom-white:hover,
.nav>li>a.custom-white:active,
.nav>li>a.custom-white:focus {background-color: yellow;}
See this demo
HTH,
-Ted
Just use the "!important" css feature to override bootstrap's css. For example,
.custom-white:hover,
.custom-white:active,
.custome-white:focus
{background-color: yellow !important;}
Otherwise, the browser will compile bootsrap's default first. Hope that works!
Try this instead,
Just update your nav css lines
.nav>li>a:hover,
.nav>li>a:active,
.nav>li>a:focus {background-color: yellow;}