<div class="nav">
<div class="container">
<ul>
<li><i class="icon-info"></i></li>
<li><i class="icon-edu"></i></li>
<li><i class="icon-employment"></i></li>
<li><i class="icon-skills"></i></li>
<li><i class="icon-photo"></i></li>
<li><i class="icon-personality"></i></li>
</ul>
</div>
</div>
I wanted to make an image navigation bar with active and inactive mode. Active mode is on when hover over or clicked on. So i created the basic navigation list above, then added some CSS codes below.I have already get to the point where browser show all unactive icons by default.
I want to make a single page website, so all navigation icons here will link to a certain place within the page (im also trying to figure out how).
.icon-edu {background-image: url("./Img/Icon-edu.png");
background-repeat: no-repeat;
}
.icon-edu: hover,
.icon-edu: active {
background-image: url("./Img/Icon-edu-active.png");
}
So the problem is, i cannot get the active icon when i hover over the icon, or when they are active. I am not sure what else i need to do?
I am the most newbie-ish newbie, i started with Codecademy and went on making a website. Please take it easy on me :D
firstly you need to have some text in your i tags otherwise it's width will be 0px and you won't see anything (for icons you may want a div with fixed dimensions, but thats another problem) I used a background colour and some dummy text to get it working.
also your selectors don't connect to your a tags. so this will work.
a:hover .icon-edu,
a:active .icon-edu {
background-image: url("./Img/Icon-edu-active.png");
}
for having an active state for a clicked link it's easiest to add another class to the link, in the code that generates the page. In your case you'll need to use jQuery which is a bit more complicated.
Related
I have build a dropdown menu that works a sweet as it gets.
Right click on an element, brings up he dropdown menu, i hover over the first choise, soo far so good, the font color and the background color changes as it should and the sub-menue opens. The problem is that when i hover over the sub-menu, the i "loose" the gray background color of the "parent"
Any ideas ?
<div id="contextMenu" class="dropdown-menu" role="menu" style="display: block; left: 997px; top: 438px;">
<ul class="dropdown-menu side" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;"><li class="dropdown-submenu"><i class="fa fa-paste" aria-hidden="true"></i> PARENT OPTION <ul class="dropdown-menu"> <li> <a tabindex="-1" data-url="/common/docitem/copymove/?document=247&dest=1&obj_table=companydocument&f=null" id="add_id_copy_p" style="cursor:pointer;" class="js-movecopy-docitem"> Siblin Option</a> </li>
First things first, you must include a code segment to make it easier to understand the issue, as #Paulie-d and #Rokibol Hasan mentioned. To be honest, this sounds like maybe you have conflicting CSS rules or lack of specificity, which results in your parent element being affected on :hover.
These would be the steps I would use to solve this:
Use the find function of your development IDE (CTRL + F) to find :hover elements. Avoid using very broad CSS selectors.
Make sure you have assigned the correct id and class attributes in the desired section of code.
Refresh your memory on CSS specificity. I provide you this website instead of Mozilla only because I do not know if you can handle it. If you are experienced, prefer this website.
Refresh your memory on CSS selectors.
At this point, go in your CSS and start commenting out and testing one by one sections of code that may affect the parent element you speak of.
I don't know what I am looking for, but when pressing an item, the two others changes for a black background, I can't figure out which rule is applied on those two "not pressed items".
I tried setting active / focus states on the pressed element but had nothing to do with it.
It's a simple bootstrap 3 menu built with the following code:
<ul class="nav navbar-nav navbar-right">
<li>
<a class="user-display-name" href="/galaxy/profile">Pascal Lalonde</a>
</li>
<li><a data-current-locale="en" href="/galaxy/repos?locale=fr">FR</a></li>
<li class="open">
<a class="dropdown-toggle" data-toggle="dropdown" href="/galaxy/"><span class="glyphicon glyphicon-home"></span><i class="fa fa-caret-down borderless"></i></a>
<ul class="dropdown-menu">
<li>
Repository
</li>
<li>TDP</li>
<li>RK</li>
</ul>
</li>
</ul>
What is it I am missing?
Here's the screenshot of the behavior:
[EDIT]
I am being asked to provide sample CSS code, but if I could, this would mean that I'd already have my answer. I don't know what I am looking for.
I am trying to debug the behavior so I can find what is causing this to happen.
Thing is this happens only when I actually press on the "TDP" option, I cannot debug in the console while "pressing" on the item, because a click triggers the link to continue.
So my question here, is what kind of CSS rule could be applied when an item is pressed? If nothing is there, would this mean that Bootstrap actually execute something when pressing on it? It tried looking at the dropdown javascript code, did not see anything like it.
[EDIT #2]
Just realized this happens in the template I am using.
Click here to see.
Choose the user option in the top right menu and then just "press" any of the shown options. All others will be displayed black.
[EDIT #3]
It seems the other elements gets "activated" while pressing the other menu options, this causing the background of the not-pressed items of the menu to change. I still don't understand why forcing the :active state through the browser doesn't apply the css rules, but this fixed what I "don't understand yet"
.navbar .navbar-nav li .dropdown-menu:active {
background-color: #fff;
}
As said by Schmalzy you have a custom CSS it would be nice if you can include that in the question.
Or you can try to change .dropdown-menu > li > a:hover { background-color: transparent; }
Let me if that helps
I am trying to use an icon-stack inside of a link. When I just use a single icon, everything works as normal. But when trying to use a stacked icon, it doesn't appear in the link like a single icon would.
The first method I am using is:
<span class="icon-stack"><i class="icon-circle icon-stack-base"></i><i class="icon-twitter"></i></span>tweetthis
Seen: Broken Stacked Icon
That gives me something where the two icons are both left-aligned (off center) and the icons appear over top of the text.
I had thought that including the span with the icon-stack class in place of a single <i> would be the way to do it, but it's not. This works fine:
<i class="icon-circle"></i><i class="icon-twitter"></i>tweetthis
Seen: Inline icons
I am not sure where to put the container <span>, or if there needs to be more styles added to it. I've tried various combinations. Setting the a to display:block doesn't help (there are no other styles applied to the link).
When there is no text in the link, the result is the same. Setting the .icon-stack container class to display:block does help it work, but it's not perfect since the base icon is so much bigger than the icon on top.
It this something that is possible? Or am I pushing the limits of how stacked icons should be used?
Here you go..
<a href="http://google.com">
<span class="icon-stack">
<i class="icon-check-empty icon-stack-base"></i>
<i class="icon-twitter"></i>
</span>
link text
<br/>
</a>
Span set to inline-block to ensure that the icon stays in place
body {
color:#00000;
}
a {
text-decoration:none;
color:inherit;
display:block;
}
span.icon-stack {
display:inline-block;
}
Demo: http://jsfiddle.net/aB4nU/1/
This is fixed in 3.2.1-wip branch. Or you can wait for the release tomorrow. :)
im using bootstrap pills as my navigation bar.problem is it is not showing the curent active pill with blue color background(like bootstrap)
here is my code
<div style="margin-left: 15px;margin-bottom: 15px;margin-top: 10px;">
<ul class="nav nav-pills">
<li class="active">
Home</li>
<li class="">Projects</li>
<li class="">Employee</li>
<li>Forum</li>
</ul>
</div>
the output is here
only the home pill is focused
Add this code inside script tags:
$(document).ready(function(){
$(".nav-pills li").click(function(){
$(".active").removeClass("active");
$(this).addClass("active");
});
});
DEMO
To give a full answer based on the comments, your JSFiddle works exactly as expected. The item with the .active class will have the blue background for the pill.
However what I believe you expect to happen is when you click on a link that the pill will automatically become active, this is not how it works.
You will need to generate the menu on the fly and assign the active class during generation or on each page use JS to assign the active class to the correct menu list item. For ease of use I would suggest assigning ID's to the list items so you can do the following:
So say you click on the second menu item, on the Projects.php page you could have the following jquery.
$('#project').addClass("active");
Assuming you gave the menu items IDs.
Here is a typical Drupal Cascade for a superfish menu (note the ID in the first line and the class in the last) :
<ul id="superfish-3" class="menu sf-menu sf-menu-materials sf-vertical sf-style-MatMenu2 sf-total-items-23 sf-parent-items-22 sf-single-items-1 superfish-processed sf-js-enabled sf-shadow">
<li id="menu-899-3" class="first odd sf-item-1 sf-depth-1 sf-no-children">
<li id="menu-900-3" class="middle even sf-item-2 sf-depth-1 sf-total-children-8 sf-parent-children-0 sf-single-children-8 menuparent">
<a class="sf-depth-1 menuparent sf-with-ul" title="FRUIT" href="/specs/03">
FRUIT
<span class="sf-sub-indicator"> ยป</span>
</a>
There is a default menu arrow image defined in the css:
.sf-sub-indicator {
background-image: url('../images/arrows-black.png');
}
and I want to change the file from a black arrow to a red one and have created the appropriate .png file. Its css is:
#superfish-3 .sf-sub-indicator {
background-image: url('../images/arrows-red.png');
}
When I display the page, the arrows are not changed and firebug tells me that the original style is used. I thought an ID scores higher than a class. How do I express the selector to have it supersede the generic black one?
ADDED CONTENT:
I have several other styling features such as a border that also fail if I add an ID. I know that borders don't pass on in inheritance, but inheritance is moving from the .sf-sub-indicator to #superfish-3 .sf-sub-indicator, so I would assume my red arrows would show, but the don't. This is specifically related to adding the ID, but only for certain style settings. For instance my link color is green and I change it to red for this ID. That works fine.
ADDED MORE:
I created a class at the <li> level and it works. There is something about having the ID or something about the classes that come between the ID and the link (?).
Just go up the tree one level:
a .sf-sub-indicator {...
Stop guessing at it. Any browser's dev tools will be able to tell you what styles are in effect and what styles are being overridden. IE's "Trace Styles" tab is particularly useful for this task:
Select the element in question and expand the appropriate CSS attribute. You'll see each matching selector that defines that style. Then, make your selector stronger than the strongest selector.
yeah the html/css looks sound. weird.
well, you could always just do:
#superfish-3 .sf-sub-indicator {
background-image: url('../images/arrows-red.png') !important;
}
if you don't mind a little hackery.