We Keep Coding

How to change colour of Bootstrap scroll spy and why won't my logos resize?

I'm trying to create my portfolio for FCC. I have included a scrollspy to use as a navigation bar and I'm trying to change the way the active link looks, but I can't figure out how to change it with CSS. I am also having an issue with resizing the logos under the my skills section, nothing I try seems to be working. I would appreciate any information that would point me in the right direction.
http://codepen.io/JakeMills/pen/MepyEO?editors=1100
.nav .nav-pills .nav-stacked .active {
background-color:white;
text-decoration: underlined;
}
.aboutme .skillslogo.img-responsive {
max-height:150px;
max-width:100px;
}

Change link properties here:
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover{
color: #fff;
background-color: #337ab7;
}
Change logos under skill here:
.skillslogo{
}
EDIT:
Note that if you want to have a different style for the normal 'active link' and the hover 'active link', you need to separate .nav-pills>li.active>a, .nav-pills>li.active>a:focus and .nav-pills>li.active>a:hover

With FireBug I found out that the CSS Selector for the color of the active link is:
.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover
Not sure about the picture.
But you could put:
.skillslogo {
max-width: 100px;
}

Add hover class to 2nd level menu links

I have a vertical mega menu. When you hover over a link that has children it shows another vertical menu to the right and so on. When you hover away from those associated submenus, they are hidden and the menu is reset.
I'm adding a class to the parent link so that the hover state stays active, this works fine. However, my issue is with the 2nd level links that have a sub menu. I'm trying to do exactly the same but with these links but whatever I try doesn't appear to work.
This is what I want to achieve, notice how the 2nd Level Page link has a pink background when the 3rd level menu is open:
This is the JS I'm using and accompanying JSFiddle to show you the stage I'm at currently: http://jsfiddle.net/mz9abf43/2/
$( ".menu li.menu-item-has-children a, .menu li.menu-item-has-children > .drop" ).mouseover(function() {
$('.menu li.menu-item-has-children a').addClass('go');
$('.menu li.menu-item-has-children > .drop a').removeClass('go');
});
$( ".menu li.menu-item-has-children > .drop a" ).mouseover(function() {
$('.menu li.menu-item-has-children > .drop a').addClass('go');
});
$( ".menu li.menu-item-has-children > *" ).mouseout(function() {
$('.menu li.menu-item-has-children a').removeClass('go');
});
UPDATE
I am not committed to the JS solution I've been tinkering with so have no issues with a CSS solution. I just want a solution that makes it work.

The basic solution, which you can complement with any other style you need
/* Hide all child lists */
li > ul {
display: none;
}
/* Hovering list item will cause the child menu to be displayed */
li:hover > ul {
display: block;
}
/* Default style for the menu item */
li {
color: black;
}
/* Hover style for each menu item, add more if you have more levels */
ul > li:hover,
ul > li > ul > li:hover,
ul > li > ul > li > ul > li:hover {
color: red;
}
<ul>
<li>
Item 1
<ul>
<li>
Item 1 a
</li>
<li>
Item 1 b
<ul>
<li>
Item 1 b I
</li>
<li>
Item 1 b II
</li>
<li>
Item 1 b III
</li>
</ul>
</li>
<li>
Item 1 c
</li>
</ul>
</li>
<li>
Item 1
</li>
<li>
Item 1
</li>
</ul>

Simple solution is in css shown below,
What I have done:
Remove all the JS code you have added for this hovering functionality.
Add the class highlight to all the elements which needs to be highlighted(background-color:pink) on hover.
CSS CODE:
.highlight:hover {
background: pink;
}
//comment below css styles
/*.menu li a:hover,
.menu li a.go { background: pink; }*/
Live Demo # JSFiddle

Collapsible menu changes position of the element

I have a menu menu structure which show three level of menu but menu doesnt function properly when when i click over different level 3 menus to open or collapse the menu.
Example http://jsfiddle.net/Ed9nk/21/
Parent One have multi level of menus
Example you follow this sequence you will notice the problem
Step 1: Hover over Parent One > Click on Child One
Step 2: Click on Child Two or Child Three menu and hover over the Grand Child x menu you will notice that Green box changes the postion.
Step 3: Now if you will click on Child One of Parent One to collapse this menu & then hover over Grand Child xx of Child Two or Child Three menu you will notice that Green box shows up correctly.
Green box keeps change position i want it to show on top of the div . I am not sure what is causing this
Jquery Code
$('.dropdown .has-panel ul').hide(function () {
});
$('.dropdown .has-panel').css('display', 'none');
//$('.dropdown .has-panel').css('height','0px');
$('.dropdown .has-panel').parent().click(function () {
$('.dropdown .has-panel').css('display', 'block');
//$("ul", this).show("normal");
$("ul", this).toggle("normal");
});
CSS which is use to position the green box always at top
ul.nav > li > .dropdown.has-panel li:nth-child(1) > .dropdown.has-panel .dd-panel {
margin-top: -10px;
background-color:green !important;
}
ul.nav > li > .dropdown.has-panel li:nth-child(2) > .dropdown.has-panel .dd-panel {
margin-top: -54px;
background-color:green !important;
}
ul.nav > li > .dropdown.has-panel li:nth-child(3) > .dropdown.has-panel .dd-panel {
margin-top: -154px;
background-color:green !important;
}
I would appreciate help in this regard.
UPDATE:
For now i have found temporary work around i have found it hard to automatically calculate the margin-top position for the green box when one randomly click on the menus and hover over level 3 menus. manual margin which i have specified only works if one clicks in sequence for first time Hover Parent One > Click Child One > Click Child Two >Clich Child Three in this sequence if one hover over any level 3 menus then green box always show up a top of the container div. but when i close either Child One or Child Two then green box always takes -ve margin which where set manually, and show green box outside menu on from top position.
The work around which i found is to only keep One of the Level 3 menus open at all time this way margin will work ul.nav > li > .dropdown.has-panel li:nth-child(1) > .dropdown.has-panel .dd-panel
Temporary solution http://jsfiddle.net/Ed9nk/43/

Worked on this for quite a long time...
Problem:
You have your span in the same div as your menu option so it normally it should appear on the same line as the menu item but in your code it doesn't... In order for you to have it appear on top, you will have to use negative margin.
Code cleanup:
This part was causing the green box to grow on each mouseenter event...
Remove:
var $this = $(this).find(".dropdown ul li");
var ulHeight = $this.parent().height();
var captionHeight = $(this).find('.media-caption').height();
var height = Math.max(ulHeight, captionHeight);
$this.closest('.dd-panel').height(height);
$this.parent().find(".dd-panel").css("height", height - 20 + "px");
You can change:
if ($(this).find(".dropdown").hasClass("has-panel")) {} else {
$(this).find(".dropdown").removeClass("dropdown-last");
}
To:
if (!$(this).find(".dropdown").hasClass("has-panel")) {
$(this).find(".dropdown").removeClass("dropdown-last");
}
Solution:
In .dropdown ul ul .dd-panel, change:
top:-10px;
To:
top:0;
You can now manually change the margin-top and assign negative margin to the second and third child to make them appear on top.
ul.nav > li > .dropdown.has-panel li:nth-child(1) > .dropdown.has-panel .dd-panel {
margin-top:-30px;
background-color:green !important;
}
ul.nav > li > .dropdown.has-panel li:nth-child(2) > .dropdown.has-panel .dd-panel {
margin-top:-120px;
background-color:green !important;
}
ul.nav > li > .dropdown.has-panel li:nth-child(3) > .dropdown.has-panel .dd-panel {
margin-top:-220px;
background-color:green !important;
}
Change margin-top according to your needs...
JSFiddle Demo
P.S: I did some code cleanup in the fiddle but I believe, I covered everything important in this post.

slide bottom border in from left on hover

i have this css for my menu:
#menu {
display:inline;
float:right;
}
#menu > ul > li {
display:inline-block;
margin-right:20px;
min-width:70px;
}
#menu > li {
display:inline-block;
list-style:none;
margin-left:auto;
margin-right:auto;
}
#menu > li:hover {
color:#000000;
}
#menu li a {
display:block;
padding-top:25px;
border-top:4px solid #FFFFFF;
color: #FFFFFF;
text-decoration:none;
text-align: center;
}
#menu li a:hover {
border-color:#000000;
color:#000000;
}
i want to be able to make a bottom border (like the top one but on the bottom) slide in from the side on link hover
here is a fiddle: http://jsfiddle.net/2w6NB/

Position your element you want coming from the left to be
left: -200px; //or however much it takes to hide the element completely or partially
Then here is some sample code that you might be able to successfully use to model your functionality:
$( "#item" ).hover(function() {
$( "#item" ).stop().animate({
left: "-1" //shows item
}, 400);}, function() {
$( "#item" ).stop().animate({
left: "-160" //this determines how far back the item goes after hovering
}, 400);
});
Let me know if you have questions or if it works.

I believe this link will help you: Sliding with CSS and Affect Other Element on Hover
The goal here is to slide a line/boarder from an "overflow:hidden;" div using either CSS webkit transition or a javascript function. You cannot have this happen on the same object as the menu links, but you can set it so that there is a div directly underneath it that will let the bar slide in.
(An example of this is setting "right:200px;position:absolute;width:200px;border-top:solid black 5px;" to the inside object and the div surrounding it to "overflow:hidden;width:200px;". Then you use the transition on a css hover event or a javascript function to move over the object back into the div so that it can display.
I hope that helps!

JS Menu keep menu state

I have this HTML Code:
<div id="nav">
<li>Dashboard</li>
<li><a>Contacts</a>
<ul>
<li><strong>Companies</strong></li>
<li>Add Company</li>
<li>View Company</li>
</ul>
</li>
</div>
and this JS:
<script>
$(document).ready(function () {
$('#nav > li > a').click(function(e){
if ($(this).attr('class') != 'active'){
$('#nav li ul').slideUp();
$(this).next().slideToggle();
$('#nav li a').removeClass('active');
$(this).addClass('active');
}
});
});
</script>
for my vertical menu but i cant work out how to keep the menu state when the page changes.
for example, if the is expanded, how can i keep it expanded if the page changes?
here is the CSS to:
#nav {
float: left;
margin-left:5px;
margin-top:-20px;
top:0;
left:0;
width: 100%;
list-style:none;
}
#nav li a {
display: block;
padding: 8px 10px;
margin-bottom:0;
background: #666666;
border-top: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
text-decoration: none;
color: #EEEEEE;
width:155px;
}
#nav li a:hover, #nav li a.active {
background: #F36F25;
color: #FFFFFF;
cursor:pointer;
}
#nav li ul {
display: none;
list-style:none;
}
#nav li ul li {
margin-top:0;
margin-right:0;
margin-bottom:0;
margin-left:-40px;
}
#nav li ul li a {
background: #EEEEEE;
color:#666666;
border:1px solid #EEEEEE;
}
#nav li ul li a:hover {
background: #EEEEEE;
color:#f36f25;
border:1px solid #f36f25;
}

I would suggest using sessionStorage in this scenario. It's a great tool in this case, and it is widely supported, but see http://caniuse.com/namevalue-storage to see if its suitable for your needs. What you can do is use sessionStorage to keep track (client-side) of your currently expanded menu so you can expand the correct menu on a page reload. This answer is not 100% correct in the sense that you can't just plug it in directly into your code (I would have had to guess at several things) but it should give you a fairly idea of where to go. Note that in the code below, I changed link hrefs to point to JSFiddle because that is where I made a working example, but hopefully this will get you on the right track to implement it in your own pages.
One of the main things necessary to change is to give main menu <a> tags an ID (below, they are menuDashboard and menuContacts). These would have to be consistent across your different pages, and also the scripts below would have to be included in all the pages where you want to keep the menu state. Then the basic premise is that on menu click, we store the currently expanded menu <a> ID into sessionStorage so we can access that after a page reload. Then, on page load, we look at sessionStorage to see what was previously selected by retrieving the key "activeMenuItemID", and if we find that is not undefined, we expand that menu item.
Working example: http://jsfiddle.net/VBLS8/2/show/
Note, because of how JSFiddle is built, the previous link is a link directly to JSFiddle Results iframe is. Otherwise, when clicking the links JSFiddle just breaks. The actual JSFiddle is here: http://jsfiddle.net/VBLS8/2/.
<br/>
<div id="nav">
<li>
<a id="menuDashboard">Dashboard</a>
<ul>
<li><strong>Sub Category</strong></li>
<li>Sample 1</li>
<li>Sample 2</li>
</ul>
</li>
<li>
<a id="menuContacts">Contacts</a>
<ul>
<li><strong>Companies</strong></li>
<li>Add Company</li>
<li>View Company</li>
</ul>
JavaScript:
$(document).ready(function(){
//Loop through nav items, compare to expanded item ID from sessionStorage so we can expand whichever item was previously expanded
if(sessionStorage.getItem("activeMenuItemID") != undefined){
$("#nav > li > a").each(function(){
if ($(this).attr("id") == sessionStorage.getItem("activeMenuItemID")){
expandMenuItem(this);
}
});
}
$('#nav > li > a').click(function(elem){
expandMenuItem(this);
});
});
function expandMenuItem(elem){
if ($(elem).attr('class') != 'active'){
$('#nav li ul').slideUp();
$('#nav > li > a').removeClass("active");
$(elem).addClass("active");
$(elem).next().slideToggle();
sessionStorage.setItem("activeMenuItemID", $(elem).attr("id"));
}
}

When the page changes, the click handler gets bound, but there is no statement handling the initial state of the menu.
So...
$(document).ready(function() {
//original click handler
//$('#nav a').click
//but also this piece of code, that will display all the lists having an .active link inside
$('#nav ul').has('a.active').show();
});
Regards and good luck!
A quick but a little dirty solution to keep track of your currently active page is to compare the src attribute of your target frame with the href attribute of your links.
Edit: The following fiddle might help you a bit: fiddle