I have tabs looking like that:
<li class="dropdown tab">
<a href="/Test" class="menu-url">
Test<i>Test here</i>
</a>
</li>
When the current tab is selected it is looking like that:
But I am getting an issue when I am hovering selected tab, so the issue looking like that:
Is there any way I can change <i> background-color to match href background-color when hovering an active tab?
You can set a transparent background
<li class="dropdown tab">
<a href="/Test" class="menu-url">
Test<i style="background:transparent">Test here</i>
</a>
</li>
Related
In the image you can see that if the title of the sidebar link is too long it goes to the next line. However it starts where the icon is located and not where the start of the span is. How would I style the class "side-nav-item" to where it will format where Administrator when it is shifted to the new line it starts where Give is.
<li class="side-nav-item">
<a data-bs-toggle="collapse" href="#userAccess" aria-expanded="false" aria-controls="userAccess"
class="side-nav-link">
<i class="uil-layer-group"></i>
<span>User Access</span>
<span class="menu-arrow"></span>
</a>
<div class="collapse" id="userAccess" data-bs-parent="#accordion">
<ul>
<li class="side-nav-item">
<a href="/task/add-location-access" class="side-nav-link">
<i class="uil-shield-check"></i>
<span> Give user access - Administrator</span>
</a>
</li>
<li class="side-nav-item">
<a href="/task/remove-location-access" class="side-nav-link">
<i class="uil-shield-slash"></i>
<span> Remove</span>
</a>
</li>
</ul>
</div>
</li>
Style <span> inside <a></a> as an inline-block. The behaviour you are seeing is expected from inline elements like <span> and <i>. Checkout concepts of inline elements, block elements and 'display' property in CSS. I am assuming you are new to HTML and CSS, so I suggest you begin with a good hands on video tutorial.
try this ,
<span
style="width:400px;text-align:start;height:max-content;"
>
Give user access - Administrator
</span>
<li class="btn-group" mdbDropdown>
<a mdbDropdownToggle id="ParentId">
<i class="nav-item"></i> MainMenu <i class="fa fa-angle-down"></i>
</a>
<div class="dropdown-menu">
<a id="chaildId1" routerLinkActive="class-nav_mi" routerLinkActiveOptions="{exact:true}" [routerLink]="['/logs']">Menu-1</a>
<a id="chaildId2" routerLinkActive="class-nav_mi" routerLinkActiveOptions="{exact:true}" [routerLink]="['/reports']">Menu-2</a>
</div>
</li>
when we click on child Menu, i want change color of Parent Menu from child Menu color
Apply Child Menu color to Parent Menu, after click on child Menu
You can use the brand new focus-within sudo class
For consistency, you will also want to use :hover
.btn-group:focus-within > a > .nav-item,.btn-group:hover a .nav-item {
/*apply hovering/focus colors*/
}
For onclick colors, you'll have to use JavaScript
Edit:You just changed a tag to Angular, not familiar with that
So basically, I can't seem to change the color of the caret above my dropdown during the hover of the first-child element.
I am using Bootstrap3, the dropdown code is below:
JSFiddle
Nav dropdown
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Drop1 </li>
<li>Drop2 </li>
</ul>
</li>
</ul>
Anyway, I want the caret on top to be colored on hover for the first-child "li" element:
Example
Any ideas on how to change the color of the caret when the first element is hovered over?
Unfortunately you can't do that with just CSS. You have two options I think.. The ugly one - use JavaScript, or you can change the location of the carret to sit inside first element, then:
.dropdown-menu li:first-child:hover:after {...}
It is possible to change the initial anchor property of one text item when another anchored property text item is clicked without using javascript?
EXAMPLE CODE:
<div class=links>
<ul>
<li>
<a href="#"onclick="MM_showHideLayers('what_we_do','','show');MM_showHideLayers('our_mission','','hide');MM_showHideLayers('who_we_are','','hide')" **class="active"**>WHAT WE DO</a> |
</li>
<li>
<a href="#" onclick="MM_showHideLayers('who_we_are','','hide');MM_showHideLayers('our_mission','','show');MM_showHideLayers('what_we_do','','hide')" class>OUR MISSION</a> |
</li>
<li>
<a href="#" onclick="MM_showHideLayers('our_mission','','hide');MM_showHideLayers('who_we_are','','show');MM_showHideLayers('what_we_do','','hide')" class>WHO WE ARE</a>
</li>
</ul>
</div>
I would like to change the class="active" property in the first string to my default "a" assigned property when either of the other text links are clicked by the user and stay that way until it is clicked again.
Thanks in advance!
I think you'll need to use javascript/jQuery it's not tricky
First give all links the same class for example btn
<a href="#" class="active btn" >WHAT WE DO</a> |
<a href="#" class="btn" >OUR MISSION</a> |
<a href="#" class="btn" >WHO WE ARE</a>
Now add the jQuery:
$('.btn').click(function(){
$('.btn').removeClass('active');
$(this).addClass('active');
});
This script removes the active class from all the anchors and then adds it to whichever anchor has been clicked.
Hope this helps
I would like to use a Font Awesome arrow instead of the default Bootstrap arrow for the dropdown menu link. I've added the Font Awesome arrow and it looks the way I want (on the left), but still there is the default Bootstrap arrow on the right. How can I get rid of it? I can't say I've tried anything yet as I keep checking and I don't find anything to be removed anywhere.
<ul class="nav navbar-nav">
<li class="dropdown drop-li">
<a href="#" class="dropdown-toggle menu-link" data-toggle="dropdown">
<i class="fa fa-angle-down arrow-down"></i>O Festiwalu <b class="caret"></b>
</a>
<ul class="dropdown-menu drop-one">
<li>Something</li>
<li>Something</li>
<li>Something</li>
</ul>
</li>
</ul>
This is how it looks: http://postimg.org/image/id3jbf27x/
Why not deleting <b class="caret"></b>?
If you are using Firefox, you can press STRG + I (I for Inspection) to inspect your html Code and see why something is here (Click on the Element in the Main Page) or even not here (Look at the CSS in the right bottom and select via the left bottom).