In my sidebar, there are some <router-link>and I want their style is to be different when they are active. I am using router active-class for the <router-link> but the other elements inside the router-link are not taking some css properties. Here is my <router-link> looks like;
<router-link tag="li" to="/dashboard" class="nav-item has-treeview" active-class="active">
<a class="nav-link" id="dashboard_tab">
<i class="sidebar-icons">dashboard</i>
<p class="sidebar-links" active-class="active-p">Dashboard</p>
</a>
</router-link>
And here is my .active class;
.active {
background-color: #FF7400;
border-color: #FF7400;
border-radius: 4px;
color: white;
}
Now when a specific link is clicked and active, I have orange background and some border around that router-link. But my problem is, I also want the color of the icon and the p element is to be white, but they are not being effected by the color: white; property. What am I missing? active-class is only working for the router-link element so I cannot use it in the i or p. What should i do?
Related
I've tried to remove the blue border which comes when focus the b-nav-item-dropdown in Vue bootstrap. Tried many example but didn't work. I've done as follows.
Vue template
<b-nav-item-dropdown class="nav-item dropdown nav-dropdown-custom" text="LANGUAGES">
<b-dropdown-item href="#">EN</b-dropdown-item>
<b-dropdown-item href="#">ES</b-dropdown-item>
<b-dropdown-item href="#">RU</b-dropdown-item>
<b-dropdown-item href="#">FA</b-dropdown-item>
</b-nav-item-dropdown>
CSS
.nav-dropdown-custom {
color: black !important;
opacity: 100%;
border-color: transparent;
}
.nav-dropdown-custom:focus {
outline: none !important;
box-shadow: none;
}
Still I get the border like,
Is there a possibility to remove this border from the drop down. Please suggest a fix for this.
Thanks
Try with Adding border:none or border:0 to class nav-item
.nav-item{
border : none !important;
}
!important keyword is used to overwrite the defined css
Try with adding border-0 to class name
<b-nav-item-dropdown class="nav-item dropdown nav-dropdown-custom border-0" text="LANGUAGES">
refernce : https://getbootstrap.com/docs/4.5/utilities/borders/
When I click on one link in the navbar I want my border bottom to keep displaying
There are two behaviours :
- On hover : display the border-bottom.
- When active on the link keep displaying the border-bottom (the user is active on the page).
I don't find how to do this, can someone help me ? thank you !
File scss -
a {
span {
padding-bottom: 5px;
}
}
a:nth-child(1) :hover {
border-bottom: 3px solid "blue";
}
a:nth-child(2) :hover {
border-bottom: 3px solid #8e1cfb;
}
react component navbar tsx file -
<div>
<Link to={`${process.env.REACT_STATIC_PUBLIC_PATH}`}>
<span>Link 1</span>
</Link>
{''}
<Link to={`${process.env.REACT_STATIC_PUBLIC_PATH}`}>
<span>Link 2</span>
</Link>
</div>
Just handle the active class in your css.For example .active {
color: white;
border-bottom: 3px solid #2196f3;
}
Since you're using react router Link, you'll get active class added by default when the route is active.
[Edit]: My solution below works fine but does not use the default 'active' class added by react router itself when you click on a Link. I played with it on This Stackblitz for react-router (You will need to update package and change Link to NavLink if you are using router v5) but couldn't make the active class work properly, the active class wasn't removed from the first Link, don't know why (But you can inspect the code and you'll see it is added to your other links).
Now, if you want, there is also a activeStyle you can use (Not recommanded, bleh).
Your links are all first child of a div so you could do :
const App = () => {
const setActiveLink = e => {
// easier for me, you can change with getElementById or getElementByClassName
const links = document.getElementsByTagName("a");
Array.from(links).forEach(el => el.classList.remove("active"));
e.target.classList.add("active");
};
return (
<div className="navbar">
<a href="#" onClick={setActiveLink}>
link 1
</a>
<a href="#" onClick={setActiveLink}>
link 2
</a>
<a href="#" onClick={setActiveLink}>
link 3
</a>
</div>
);
};
Adn in your css simply add :
div > a {
text-decoration: none;
padding: 5px;
}
div > a:hover{
border-bottom: 1px solid red;
}
.active {
border-bottom: 1px solid red;
}
Of course you have to adapt the the css tags I chose to match your code. Here the stackblitz for exemple : Example on Stackblitz
Let's say I have links looking like buttons all over my app. They are orange, unless they are "disabled" (having no href):
a.button {
background-color: orange;
}
a.button:not([href]) {
background-color: grey;
}
Now, I'm not sure how to allow certain buttons look different in their context, but keep the disabled ones as they were. Let's say I need the "buttons" inside my <footer> to be green, or - as usual - grey if disabled:
footer a.button {
background-color: green;
}
The problem is that this rule has higher priority, as it's more specific. How can I allow disabled buttons in the footer to still be grey without repeating my code? I know I can use !important, but please assume that my real-life example is more complex and I want to avoid using it.
Use CSS variables. You define the default value and you simply set the variable to define a new one.
a.button {
background-color: var(--main, orange);
}
a.button:not([href]) {
background-color: var(--disable, grey);
}
footer#foo a.button { /*I am adding an ID to make it really more specific*/
--main: green;
}
<a class="button">a link</a>
a link
<footer id="foo">
<a class="button">a link</a>
a link
</footer>
Check out http://qnimate.com/dive-into-css-specificity/ to see a full list of CSS specificity.
Assuming you have more than one a.button in your footer, we'll skip using a plain id selector. You could pair an id and attribute selector, using the title attribute to identify all disabled "buttons":
index.html
<a class="button">a link</a>
a link
<footer id="foo">
<a class="button" title="disabled">a link</a>
a link
</footer>
and styles.css
#foo a[title="disabled"] {
color: green;
}
I'm struggling with main navigation button menu hover color when working with official freelancer template:
https://github.com/BlackrockDigital/startbootstrap-freelancer
https://blackrockdigital.github.io/startbootstrap-freelancer/
Main button appears on narrower screens and should have the same hover color #128f76 like Send button from contact form on page bottom but it's blue #0062cc.
It seems that style responsible for this behavior is:
button.bg-primary:focus, button.bg-primary:hover
and is not overriden by styles specified in custom freelancer.css.
the style of the menu button on mobile devices is
a.bg-primary:focus, a.bg-primary:hover, button.bg-primary:focus, button.bg-primary:hover {
background-color: #0062cc !important;
}
this style is in the bootstrap.css file.
you should override this bg color by add this code to your CSS file
I was able to fix it by changing following files (making as little as possible changes)
index.html - remove bg_primary class, add btn btn-primary classes to Menu button
from
<button class="navbar-toggler navbar-toggler-right text-uppercase bg-primary text-white rounded"
to
<button class="navbar-toggler navbar-toggler-right text-uppercase btn btn-primary text-white rounded"
freelancer.css - remove btn class, add missing important! to btn-primary selectors
from
.btn {
border-width: 2px;
}
...
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
background-color: #128f76;
border-color: #128f76;
}
to
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
background-color: #128f76 !important;
border-color: #128f76 !important;
}
When I hover on font-awesome's icons (when they're stacked together) like below (see picture). I get these strange underlines. Any idea where they could come from?
Source:
<div class="text-center">
<!-- FB -->
<a href="http://www.facebook.com/share.php?u=${shareURL}" target="_blank" style="color : #555">
<i id="facebook" class="fa-3x fa fa-facebook-square"></i>
</a>
<!-- Twitter -->
<a href="http://twitter.com/?status=Sign-Up+for+SolidTranslate+here!:+${shareURL}+#SolidTranslate" target="_blank" style="color : #555">
<i id="twitter" class="fa-3x fa fa-twitter-square"></i>
</a>
<!-- LinkedIn -->
<a href="http://www.linkedin.com/shareArticle?url=${shareURL}&title=Sign-Up%20for%20SolidTranslate%20here:%20${shareURL}&summary=To%20get%20started%20translating%20SolidWorks%20files%20register%2\
0here:%20${shareURL}&source=${shareURL}"
target="_blank" style="color : #555">
<i id="linkedin" class="fa-3x fa fa-linkedin-square"></i>
</a>
<!-- Google+ -->
<a href="https://plus.google.com/share?url=${shareURL}" target="_blank" style="color : #555">
<i id="googleplus" class="fa-3x fa fa-google-plus-square"></i>
</a>
</div>
Those lines usually come from the default (underline) a element style.
Either use another element or remove the underline :
a.social { /* or whatever your class */
text-decoration: none;
}
"text-decoration: none;" needs to be set with the ":hover" selector on the "a" tag, like this...
a:hover {
text-decoration: none;
}
Fontawesome great and fun. But if you are using it as font, this is expected behaviour.
Add text-decoration to every state.
If you don't add :link it will show purple underline, very hard to see but it is there.
If you don't add :active it will show red underline when clicking, very visible.
a:hover, a:focus, a:active, a:visited, a:link{
text-decoration: none;
}
Remove text-decoration for hover effect on all fa class objects:
.fa:hover {
text-decoration: none;
}
Assuming you are using a tags
text-decoration: none;
It may also be necessary to use the important keyword in your class definition
text-decoration: none !important;
Well, I had the exact same problem, and it turned out that what was causing mine was a background change on hover effect I had set to my container. I just had to change the selector to a class selector and everything was fixed!