I am trying to add smooth slide hover effect on Bootstrap navbar at this JS Fiddle. What I would like to do is sliding the active class style horizontally on each hovered nav.
As you can see from my try right now styles just jumps on the top of any hovered element and the Active class still stay there.
Here is the CSS I am using for this:
.navbar-nav>li {
width: 120px;
text-align:center
}
.navbar {
margin-bottom: 30px;
}
.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {
background-color: darkgreen;
color: white;
}
.navbar .nav > li > a:hover {
background-color: darkgreen;
color: white;
}
I also used this jQuery which didn't go through:
$( document ).ready(function() {
$(".navbar .nav > li > a").on("mouseenter", function() {
$( '.navbar .nav > li' ).addClass( "active" );
}).on("mouseleave", function() {
$( '.navbar .nav > li' ).removeClass( "active" );
});
});
How can I make the navbar more interactive by adding hover/slide effect?
Related
I am trying to change the background color of the header panel in readthedown RMD format.
---
title: "R Notebook"
output: rmdformats::readthedown
css: Style.css
---
My style CSS is with changed colors to #008B8B
#main .nav-pills > li.active > a,
#main .nav-pills > li.active > a:hover,
#main .nav-pills > li.active > a:focus {
background-color: #22983B;
}
#main .nav-pills > li > a:hover {
background-color: #008B8B;
}
h1,h2,h3,h4,h5,h6,legend{
color: #008B8B;
}
#nav-top span.glyphicon {
color: #008B8B;
}
#table-of-contents header{
color:#008B8B;
background-color: #008B8B;
}
#table-of-contents h2{
background-color:#22983B;
}
a:hover{
color:#008B8B
}
a:visited{
color:#008B8B
}
But i am still getting :
I would like to change :
background color of the toc left , background color of TOC header ( right now in red ) and hover color of the Title 1 and 2. What are the tags for those in the CSS?
To change text and background colours of the active toc sections and hover toc items you'll want the sidebar a, try the following
#sidebar {
color: #D9AB16;
background: #113458;
}
#sidebar h2 {
color: #FFFFFF;
background-color: #4096B8;
}
#sidebar a {
color: #3F4548;
}
#sidebar a:hover {
background-color: #3F4548;
color: #FFFFFF;
}
I was only able to get the sidebar and the sidebar header for now, and that was
#sidebar {
background-color: #008B8B;
}
#sidebar h2 {
background-color: #008B8B;
}
Style all anchors/links:
.navbar li a {
color: blue !important;
}
Style anchors/links under ul:
.navbar ul li a {
color: blue !important;
}
I would like to achieve 2 different scenarios:
Style all links, except those under ul
Style all links, except those under class .dropdown-menu (ul)
JsFiddle
Do you mean all nested links should not be colored blue? if so change the css as below.
.navbar li a {
color: blue !important;
}
/* Link under ul only */
.navbar ul.dropdown-menu li a {
color:initial !important;
}
Use this selector to style only the first ul. and the under color is different
.navbar-nav > li > a {
color: blue !important;
}
see this fiddle: https://jsfiddle.net/v2xmc150/2/
I have this code in my custom css theme on opencart. I want to add hover color on it. How can i do that? Thank you
.navbar .nav li:nth-child(2) a {
background-color: #3cbc67; /* for second link bg */
color: #d61d1d; /* for first link text color */
}
Use the pseudo selector :hover
.navbar .nav li:nth-child(2) a {
color: blue;
}
.navbar .nav li:nth-child(2) a:hover {
color: red;
}
<nav class="navbar">
<ul class="nav">
<li><a>I dont do anything</a></li>
<li><a>I change color when hover</a></li>
</ul>
</nav>
.navbar .nav li:nth-child(2) a:hover {
//styles goes here
}
I've got a strange issue with IE7 and IE8 where drop-down menu items jump around when hovered over - some negative margin rules are being applied on hover on the top level menu items which are cascading down to sub-menu items. Basically the drop-down menu is overriding some of the styles from Twitter bootstrap, which is included before the app.css applies custom styles.
This code is the culprit and I can't seem to override it without losing the styling on the top level items that I need:
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover,
.navbar .nav > li.active > a,
.navbar .nav li.dropdown.open > .dropdown-toggle {
height: 12px;
margin-top: -10px;
padding-top: 10px;
}
Here is a [demo link][1] (only the dropout menu styling is the issue at the moment, I realise the top level items aren't very legible!)
Just change the rule to this (basically add the descendent selector under .nav):
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover,
.navbar .nav > li.active > a,
.navbar .nav > li.dropdown.open > .dropdown-toggle {
height: 12px;
margin-top: -10px;
padding-top: 10px;
}
i.e.
.navbar .nav li.dropdown.open > .dropdown-toggle {
becomes:
.navbar .nav > li.dropdown.open > .dropdown-toggle {
I am using the following media query in my bootstrap app.
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.nav li { width: 100%;
}
.nav .dropdown ul {display:none; }
.nav .open ul { display: block; }
.nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a {
text-align: center;
background-color:#211256;
}
.nav-collapse .nav > li > a:hover,
.nav-collapse .dropdown-menu a:hover {
background-color: #211256;
color:white;
}
.navbar .nav > li a:hover{
color:white;
}
.navbar .nav .active > a, .navbar .nav .active > a:hover {
background: #211256;
color: white;
text-decoration: none;
}
.nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a {
border-radius: 3px 3px 3px 3px;
color: white;
font-weight: bold;
padding: 6px 15px;
margin-bottom:2px;
}
.navbar .nav li.dropdown .dropdown-toggle .caret, .navbar .nav li.dropdown.open .caret {
border-bottom-color: white;
border-top-color: white;
}
.navbar .nav li.dropdown.open > .dropdown-toggle, .navbar .nav li.dropdown.active > .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle {
background-color: transparent;
color: #211256;
}
.accordion-inner {
border-top: 1px solid #E5E5E5;
padding: 9px 15px;
}
}
When viewing the page in landscape mode
http://46.32.253.11/
the dropdown navbar is open by default and I cant see the bootstrap button, I use exactly the same media query for max-width 979px and the button appears and is closed.
Can anyone advise what selector i need to target to have the ipad show the bootstrap button and hide the dropdown menu until the button is pressed.
Any help appreciated
That would require some JavaScript and I'm going to recommend jQuery for sake of simplicity.
Essentially, you're going to listen for the orientationchange event in JavaScript and then, based on the orientation, invoke a function that will handle the toggle.
$(document).ready(function() {
window.onorientationchange = function() {
var orientation = window.orientation;
switch(orientation) {
case 0: // portrait
break;
case 90: // landscape left
toggler();
break;
case -90: // landscape right
toggler();
break;
}
}
function toggler() {
var toggled = false;
$('.dropdown-toggle').on('click', function() {
if (toggled === false) {
$('.nav .open ul').hide();
$('.nav .dropdown ul').show();
toggled = true;
} else {
$('.nav .dropdown ul').hide();
$('.nav .open ul').show();
toggled = false;
}
});
}
});
Try this out and see if it gets you started in the right direction (pun intended).