This question already has answers here:
bootstrap 3 - how do I place the brand in the center of the navbar?
(8 answers)
twitter bootstrap -- center brand in nav bar
(5 answers)
Bootstrap NavBar with left, center or right aligned items
(14 answers)
Center content in responsive bootstrap navbar
(12 answers)
Align Bootstrap Navigation to Center [duplicate]
(4 answers)
Closed 5 years ago.
How do I center both the brand and the navbar in bootstrap. Also how can I have the navbar stop around the brand and links, ie wraps around content and navbar and not stretch across the entire page. Please take a look at the
.navbar-default {
background-color: #395085;
border-color: #2a3858;
}
.navbar-default .navbar-brand {
color: #dcdcdc;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #ffffff;
}
.navbar-default .navbar-text {
color: #dcdcdc;
}
.navbar-default .navbar-nav > li > a {
color: #dcdcdc;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #ffffff;
}
.navbar-default .navbar-nav > li > .dropdown-menu {
background-color: #395085;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
color: #dcdcdc;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
color: #ffffff;
background-color: #2a3858;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li.divider {
background-color: #2a3858;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffffff;
background-color: #2a3858;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #ffffff;
background-color: #2a3858;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #ffffff;
background-color: #2a3858;
}
.navbar-default .navbar-toggle {
border-color: #2a3858;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #2a3858;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #dcdcdc;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #dcdcdc;
}
.navbar-default .navbar-link {
color: #dcdcdc;
}
.navbar-default .navbar-link:hover {
color: #ffffff;
}
.navbar-brand {
background-size: 1
^% auto;
background-repeat: no-repeat;
margin-right: 0px;
background-clip: padding-box;
}
.container-fluid .row .col-lg-offset-1.col-lg-5 {
margin-top: 5px;
}
#media (max-width:649px){
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #dcdcdc;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffffff;
background-color: #2a3858;
}
.navbar-toggle {
color: #FFFFFF;
}
}
#mid_title {
font-size: 24px;
line-height: 24px;
font-weight: 400;
color: #fff;
margin-bottom: 10px; /* text-shadow: 2px 2px 4px #000 */;
}
#middle_wrapper {
clear: both;
padding: 40px 15px 0;
overflow: hidden;
font-size: 14px;
color: #f4e9d9;
background: url(/images/templatemo_middle.jpg) center top;
}
.col_allw300 {
float: left;
}
.templatemo_text {
color: #08122a;
font-weight: normal;
text-decoration: none;
}
.lower_specs {
background-color: #BFC5CE;
}
.sb_news_box {
clear: both;
margin-bottom: 17px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Electro-Tech Inc</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/etp.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"><span class="sr-only">Toggle navigation</span>Menu <span class="glyphicon glyphicon-chevron-down"></span></button>
<a class="navbar-brand" href="about.html">Electrotech</a></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav justify-content-center">
<li>About Us</li>
<li>Industries</li>
<li>Products</li>
<li>News</li>
<li>Gallery</li>
<li>Contact Us</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.2.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>
css I just added
Add the following to your CSS:
nav .container-fluid {
display: flex;
justify-content: center;
}
Just add these rules in your css file!
/* added rules */
.navbar .container-fluid {text-align: center;}
.navbar-header, .collapse.navbar-collapse {float: none !important; display: inline-block !important;}
Related
I am just trying to get my nav bar to have a fixed position at the top of the screen, so when the user scrolls down it should stay at the top, but for some reason it's not doing it.
$(document).ready(function(){
$(window).bind('scroll', function() {
var navHeight = $( window ).height() - 286;
if ($(window).scrollTop() > navHeight) {
$('nav').addClass('fixed');
}
else {
$('nav').removeClass('fixed');
}
});
});
.section {
background-color: Red;
padding: 33px 0;
height: 5000px;
}
.fixed {
position: fixed;
left: 20;
top: 0;
width: 100%;
list-style: none;
z-index: 1;
}
#navs li {
margin: 0 0 10px 0;
}
#navs li a {
font-size: 0.9em;
font-weight: 600;
color: #999999;
text-decoration: none;
text-transform: uppercase;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#navs li:hover {
color: #FFFFFF;
font-size: 18px;
}
#navs li a.active {
color: #FFFFFF;
font-size: 18px;
}
/* For Index 2 */
.navbar {
min-height: 70px;
}
.navbar-nav {
float: none;
margin: 0;
text-align: center;
}
.navbar-nav > li {
float: none;
display: inline-block;
}
.navbar-nav > li > a {
line-height: 38px;
}
.navbar-nav > li > a.active {
background-color: #E7E7E7;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #333333;
background-color: #E7E7E7;
}
.sticky-wrapper.is-sticky .main-nav {
width: 100%;
z-index: 10;
}
.navbar-toggle {
background-color: #000000;
background-image: none;
border: 1px solid #000000 !important;
border-radius: 4px;
float: right;
margin-bottom: 8px;
margin-right: 15px;
margin-top: 18px;
padding: 9px 10px;
position: relative;
}
.navbar-inverse .navbar-toggle .icon-bar {
background-color: #2DCC70;
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #000000;
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
border-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-nav">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1" style="height: 0px;">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="">About Me</li>
<li class="">My Skills</li>
<li class="">Portfoilo</li>
<li class="">Contact Me</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
<div class="section">
</div>
Also when I refresh it, when I am half way down the page, the bar goes back to the top, when really it should stay there
I been using this example and trying to implement it; you can see if you scroll down to half way and refresh the bar stays, but mine does not
I am just trying to get my nav bar to have a fixed position at the top
of the screen, so when the user scrolls down it should stay at the top
markup
<nav class='primary-navigation'>
nav stuff...
</nav>
styles
.primary-navigation {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
jsFiddle: https://jsfiddle.net/sheriffderek/3ahupnrk/
I been using this example and trying to implement it; you can see if
you scroll down to half way and refresh the bar stays, but mine does
not
If you are trying to make your navigation only stick under certain conditions - like this example, here is an extensively commented example: https://jsfiddle.net/sheriffderek/zdtLawL4/ - and here is another slightly different example as well: http://codepen.io/sheriffderek/pen/zLEkr
I hope it helps.
I have trouble creating a mega-dropdown menu for Products. I want to create a responsive (I use Bootstrap) dropdown which drops down from the entire nav like most big companies.
Here is how it looks like:
I want the dropdown to be from NAME to CONTACT. I will populate it with divs with pictures and text. How can I do that?
Advice, directions or explanation would be very helpful. Thanks in advance.
Here is the navigation in the HTML file:
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top">INVACU</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Products <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>VSU 200</li>
</ul>
</li>
<li>
<a class="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Here is the navigation in the CSS file:
.navbar-default {
border-color: rgba(34,34,34,.05);
font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
background-color: #fff;
-webkit-transition: all .35s;
-moz-transition: all .35s;
transition: all .35s;
}
.navbar-default .navbar-header .navbar-brand {
text-transform: uppercase;
font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
font-weight: 700;
color: #f05f40;
}
.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
color: #eb3812;
}
.navbar-default .nav > li>a,
.navbar-default .nav>li>a:focus {
text-transform: uppercase;
font-size: 13px;
font-weight: 700;
color: #222;
}
.navbar-default .nav > li>a:hover,
.navbar-default .nav>li>a:focus:hover {
color: #f05f40;
}
.navbar-default .nav > li.active>a,
.navbar-default .nav>li.active>a:focus {
color: #f05f40!important;
background-color: transparent;
}
.navbar-default .nav > li.active>a:hover,
.navbar-default .nav>li.active>a:focus:hover {
background-color: transparent;
}
#media(min-width:768px) {
.navbar-default {
border-color: rgba(255,255,255,.3);
background-color: transparent;
}
.navbar-default .navbar-header .navbar-brand {
color: rgba(255,255,255,.7);
}
.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
color: #fff;
}
.navbar-default .nav > li>a,
.navbar-default .nav>li>a:focus {
color: rgba(255,255,255,.7);
}
.navbar-default .nav > li>a:hover,
.navbar-default .nav>li>a:focus:hover {
color: #fff;
}
.navbar-default.affix {
border-color: rgba(34,34,34,.05);
background-color: #fff;
}
.navbar-default.affix .navbar-header .navbar-brand {
font-size: 14px;
color: #f05f40;
}
.navbar-default.affix .navbar-header .navbar-brand:hover,
.navbar-default.affix .navbar-header .navbar-brand:focus {
color: #eb3812;
}
.navbar-default.affix .nav > li>a,
.navbar-default.affix .nav>li>a:focus {
color: #222;
}
.navbar-default.affix .nav > li>a:hover,
.navbar-default.affix .nav>li>a:focus:hover {
color: #f05f40;
}
}
I asked this question yesterday about how to make my navbar menu change from horizontal to vertically stacked depending on layout but now I notice when I make my text suitable for my large monitor it doesnt work when I shrink the window down. Is there a way I can make my text more responsive? if not do you have another menu approach? Also how can I center the Menu buttons when horizontal?
My JSFiddle
MY CSS
.menu {
background-color: rgba(0, 0, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, startColorStr="#E6FFFFFF", endColorStr="#E6FFFFFF");
-ms-filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, startColorStr="#E6FFFFFF", endColorStr="#E6FFFFFF");
}
.menutext {
color: #FFFFFF;
font-size: 2em;
white-space: nowrap;
}
.row.text-center > div {
display: inline-block;
float: none;
}
/*-----------------------------------------------------------
Bootstrap Overrides
-----------------------------------------------------------*/
* {
border-radius: 0 !important;
}
.navbar-default {
background-color: rgba(0, 0, 0, 0.5);
color: #FFFFFF;
position: relative;
top: -58px;
padding: 0px;
margin: 0px;
border: 0px;
}
.navbar-default .navbar-nav > .active {
color: #000;
background: #FFFFFF;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:link, .navbar-default .navbar-nav > .active > a:visited {
color: #000;
background: #ffffff;
}
.navbar-default .navbar-brand {
color: #ffffff;
}
.navbar-default .navbar-nav > li > a {
color: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #000000;
background-color: #e4e4e4;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
color: #000000;
background-color: #e4e4e4;
}
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret, .navbar-default .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #000000;
border-bottom-color: #000000;
}
.navbar-default .navbar-nav > .open > a .caret, .navbar-default .navbar-nav > .open > a:hover .caret, .navbar-default .navbar-nav > .open > a:focus .caret {
border-top-color: #000000;
border-bottom-color: #000000;
}
.navbar-default .navbar-toggle {
border-color: #d65c14;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #e4e4e4;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ffffff;
}
/*Style for Bigger Screens*/
#media (min-width: 768px) {
.navbar-default a {
color: white;
}
.navbar-default li a:hover {
color: black;
}
}
/*Style for Smaller Screens*/
#media (max-width: 767px) {
.navbar-default {
top: 0px;
background: #808184;
}
.navbar-default li {
border-bottom: 1px;
border-bottom-style:solid;
border-color:#FFF;
}
}
MY HTML
<div class="container-fluid">
<div class="row">
<div class="col-sm-12" style="background-color:#FABC41; height: 50px;">BAR</div>
</div>
<div class="row">
<div class="col-sm-12" style="padding:0;">
<img class="img-responsive" src="http://travelandwildlifephotography.com/wp-content/uploads/2014/07/Camping-on-Fraser-Island1.jpg" alt="CLI Engage">
</div>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div>
<ul class="nav navbar-nav">
<li class="active"><a class="menutext" href="Home.html">Home</a>
</li>
<li><a class="menutext" href="AboutUs.html">About Us</a>
</li>
<li class="dropdown"> <a class="dropdown-toggle menutext" data-toggle="dropdown" href="#">Tools<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="menutext" href="#">Child Progres Monitoring</a>
</li>
<li><a class="menutext" href="#">Online Courses</a>
</li>
<li><a class="menutext" href="#">Classroom Observation Tools</a>
</li>
<li><a class="menutext" href="#">Coaching & Collaboration Tools</a>
</li>
<li><a class="menutext" href="#">Activities</a>
</li>
<li><a class="menutext" href="#">Texas Kindergarten Entry Assessment</a>
</li>
</ul>
</li>
<li><a class="menutext" href="#">Parents & Families</a>
</li>
<li><a class="menutext" href="#">Parents & Families</a>
</li>
<li><a class="menutext" href="#">Calendar</a>
</li>
<li><a class="menutext" href="#">Contact Us</a>
</li>
<li><a class="menutext" href="#">Help</a>
</li>
<li><a class="menutext" href="#"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a>
</li>
</ul>
</div>
</div>
</nav>
You can make text responsive using the viewport units. vw, vh, vmin, vmax. These being view width, view height, view minimum, view maximum. These will scale with your screen size. For example: 1vw = 1% of the screen width. Note this is not compatible with old browsers.
CSS example
font-size:3.5vmin;
You can use media queries to set font size in mobile view
#media screen and (max-width: 480px)
{
body {
font-size: 1.5em;
}
}
and to center align buttons, add this class -
.nav li a {
text-align: center;
}
Im a beginner in hmtl css jquery js..
I have a navigation that is sticky but can not add sub menu to navigation, also if sub menu is created i want the navigation to stay sticky. Is that possible?
Any help would to thanks...
Here is my current html
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="row">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
</button>
<h3>TEST NAV LOGO</h3>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>ABOUT</li>
<li>TEAM</li>
</ul>
</div>
</div>
</div>
Here is the CSS
.navbar-default {
background: #FFFFFF;
border: none;
box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.08);
margin: 0 !important;
}
.navbar-default .navbar-brand {
color: #0066cc;
height: 65px;
line-height: 40px;
padding-left: 0px;
margin-LEFT: -10;
width:100px;
FLOAT: right;
}
.navbar-default .navbar-brand h3 {
font-weight: bold;
}
.navbar-default .navbar-nav li a {
color: #ff0000;
font-weight: bold;
height: 65px;
line-height: 30px;
FONT-SIZE: 14.5px;
}
.navbar-default .navbar-nav li a:hover {
color: #0066cc;
ul {
list-style:none;
padding:0;
}
}
.navbar-default .navbar-nav > li > a:focus {
color: #0066cc;
}
.navbar-default .navbar-toggle {
margin-top: 16px;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #66AF33;
color: #FFFFFF;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #0066cc;
background-color: transparent;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #FFFFFF;
}
.navbar-default .navbar-toggle:hover .icon-bar {
backgroundcolor:#66AF33;
}
You can try below code:
$(document).scroll(function() {
if ($(this).scrollTop() > 150) {
$('.navbar').css('position','fixed');
$('.navbar').css('top','0');
}
else {
$('.navbar').css('position','static');
}
});
Here in above code 150 is dummy value you can try a number as per your requirement.
OR
Try this link : http://www.backslash.gr/demos/jquery-sticky-navigation/
example
<li>Menu 2
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
My problem is when i mouse over the fois header its text doesn't changes to white color i don't know where i am wrong.or what to include.please help me........
another problem when the fois tab is active the color of the text appear as white
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- <link href="css.css" rel="stylesheet" />-->
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="accord.js"></script>
<style>
.wrap {
margin-left: 0px;
margin-top: 0px;
width: 100px;
}
.accordion1 {
width: 178px;
margin: 0px;
padding: 0px;
list-style: none;
border: 1px solid #ddd;
}
.accordion1 h2 {
font-size: 12px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
text-decoration: none;
padding: .25em .25em .25em 2em;
color: #333;
background: url('compo_images/gradient_v_gray.gif') repeat-x;
background: url("./compo_images/arrow_exp_s.gif") 1em .75em no-repeat;
border-bottom: 1px solid #ddd;
cursor: pointer;
}
.accordion1 h2:hover {
background: url('compo_images/gradient_v_orange.gif') repeat-x;
color: white;
}
.accordion1 li div.content {
padding: 3px;
background: #fcfbfb;
border-bottom: 1px solid #ddd;
/*border: 1px solid #ddd;*/
}
.accordion1 li:hover h2 {
color: white;
background-image: url("./compo_images/arrow_exp_n.gif");
background: url('compo_images/gradient_v_orange.gif') repeat-x;
}
.accord > li {
padding: 0;
list-style-type: none;
}
.accord > li > a {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding-left: 12px;
color: #5f5c5c;
background: url("./compo_images/arrow_pointer_se.gif") 0.002em no-repeat;
}
.accord > li > ul > li > a {
text-decoration: none;
color: #5f5c5c;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background: url("./compo_images/arrow_dirmini_orange_e.gif") 0.35em no-repeat;
padding-left: 17px;
}
.accord > li > ul {
list-style-type: none;
text-align: left;
margin: 0;
padding: 1px;
}
.accord {
text-decoration: none;
padding-left: 5px;
}
.accord > li > a:hover {
color: #f8b106;
}
.accord > li > ul > li > a:hover {
color: #f8b106;
}
.accordion1 > li > h2.active {
color: white;
background: url('compo_images/gradient_v_orange.gif') repeat-x;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="accordion1">
<li>
<h2 id="first">CMT</h2>
<div class="content">
<ul class="accord">
<li>
main link1
<ul>
<li>Link One</li>
<li>Link Two</li>
<li>Link Three</li>
<li>Link Four</li>
<li>Link Five</li>
</ul>
</li>
<li>
main link2
<ul>
<li>Link One</li>
<li>Link Two</li>
<li>Link Three</li>
<li>Link Four</li>
<li>Link Five</li>
</ul>
</li>
</ul>
</div>
</li>
<li>
<h2 id="fois">FOIS</h2>
</li>
<li>
<h2>ASP</h2>
<div class="content">
<ul>
</ul>
</div>
</li>
<li>
<h2>PTT</h2>
<div class="content">
content PTT
</div>
</li>
</ul>
</div>
<!-- wrap -->
</body>
</html>
accord file
jQuery(function ($) {
$('.accord li').hover(function () {
$(this).find('ul').stop(true, true).slideDown()
}, function () {
$(this).find('ul').stop(true, true).slideUp()
}).find('ul').hide()
var $lis = $('.accordion1 > li'), $contents = $lis.children('.content').hide();
var $h2s = $lis.children('h2').click(function () {
var $this = $(this), $t = $this.next();
$contents.not($t).stop(true, true).slideUp();
$this.toggleClass('active', !$t.is(':visible'));
$t.slideToggle();
$h2s.not(this).removeClass('active');
})
})
Because it's wrapped in <a></a> tag and the others are not wrapped in <a>
Demo
<li>
<h2 id="fois">FOIS</h2> // Your <h2> is wrapped in <a></a> here
</li>
You are declaring color: black; using inline CSS, which will be only overridden if you use !important in your stylesheet.
Secondly you need to target a element and not h2 because a will not inherit the parent elements color unless you specify something like a {color: inherit;} which will make all the a elements in your document inherit parent color, or to be specific you can use .accordion1 li h2 a {color: inherit;}, if you use this selector, than you don't have to target a else you need to as I've shared below..
.accordion1 li:hover h2 a {
color: white !important;
background-image: url("./compo_images/arrow_exp_n.gif");
background: url('compo_images/gradient_v_orange.gif') repeat-x;
}
I would suggest you to remove the inline style instead, and you won't have to use the !important anymore.
Demo
Change
<h2 id="fois">FOIS</h2>
To
<h2 id="fois">FOIS</h2>
And change
.accordion1 li:hover h2 {
To
.accordion1 li:hover h2,
.accordion1 li:hover h2 a {
Looks to me that your problem is with the inline style on the anchor element. This has a higher specificity than any style in a style sheet so should be used with moderation.
If you remove
color:black
from the anchor, and add:
color:black
to:
.accordion1 h2
That should do the trick.
Add Below class in your style
#fois a:hover{
color: white !important;
}