CSS not getting included in sub directories - html

I have the following directory structure:
I have put up a header which is going to come across all my webpages and the content is in header.html.
header.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/custom_styles.css"></link>
<script>
$(document).ready(function()
{
var pathname = this.location.pathname;
if( pathname.indexOf( 'index' ) > -1 )
{
$("#homepage").addClass( "active" );
}
else if( pathname.indexOf( 'java_archive' ) > -1 ) )
{
$("#javapage").addClass( "active");
}
});
</script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top"> <!-- PavanD: navbar-static-top helps in removing the rounded navbar.-->
<div class="container-fluid" style="background-color:#5F5F5F;"> <!--505050 can also be considered -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id=headerEntries class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li id="homepage"><span class="glyphicon glyphicon-home"></span></li>
<li>CONCEPTS</li>
<li>C</li>
<li>C++</li>
<li id="javapage">JAVA</li>
<li>ORACLE</li>
<li>DATA STRUCTURES</li>
<li>FAQs</li>
<li>REACH US</li>
<li>ABOUT</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span>Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span>Login</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
My index.html looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Programming Pages</title>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/custom_styles.css"></link>
<script>
$(function(){
$("#headerContent").load("header.html");
});
</script>
</head>
<body>
<div id="headerContent"></div>
<div class="container"> <!-- PavanD: Evaluate between container-fluid and container.-->
<div class="row">
<div class="col-sm-12 img-rounded" style="background-color:#F1F1F1;">
<!-- PavanD: img-rounded helps in rounding the intro information -->
<h3 class="text-center">Welcome to the site!</h3>
<p>Getting placed into an established Software Company during Campus Recruitments is the dream of most Engineering students. All it needs is demonstrating technical expertise related to Computer Programming.</p>
<p>Computer Programming is a promising area and has great scope for opportunities. It is often misunderstood as being quite difficult. This is especially true for students who are not
from Computer Science or Information Technology braches. Also, students from Computer Science or Information Technology tend to stick to the programmes which they have had in their programming lab and Engineering curriculum itself is a bit hectic that most do not find time or guidance
to explore these areas. Moreover, there can be multiple solutions to the same problem. All these are very simple yet important things that ultimately help a student in building his technical expertise.</p>
<p>The content of this website is written taking into consideration the above fact. This wesite helps students receive programming guidance in an unorthodox way which is more closer to a students perspective and thus helps the student grasp the concept instead of having to by-heart it.</p>
<p>As it stands now, the website has two broad categories.
<li><b>BEGINNERS</b></li><li><b>INTERMEDIATE</b></li></p>
<p>Students can always post their questions by visting the Reach Me page.</p>
<p class="text-right">Happy Programming,</p>
<p class="text-right">Webmaster.</p>
</div>
</div>
</div>
</body>
</html>
My java_archives/index.html looks like this:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function(){
$("#headerContent").load("../header.html");
});
</script>
</head>
<body>
<div id="headerContent"></div>
<p>Reached Java Page!.</p>
</body>
</html>
I am noticing a difference in the way the header gets rendered in the root/index.html and the root/java_archives/index.html. The difference that I want to convey can be observed in the below screen shot:
Basically, I feel that my css in css folder is not getting picked during the evaluation at java_archives/index.html
My root/css/custom_styles.css looks like this:
.navbar-inverse .navbar-nav{
}
.navbar-inverse .navbar-nav > li > a {
font-family: sans-serif;
color: #ffffff; /* PavanD: This is the color of the elements when they load. */
}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
background-color: #000000; /* PavanD: When you click the top menu items, they have to be rendered in black.*/
color: #ffffff; /* PavanD: This is the color of the elements when they are clicked. We want it to be white so this.*/
}
.navbar.navbar-inverse .navbar-nav > .active,
.navbar.navbar-inverse .navbar-nav > .active > a,
.navbar.navbar-inverse .navbar-nav > .active > a:hover,
.navbar.navbar-inverse .navbar-nav > .active > a:focus {
background-color: #8AC007;
color: #FFF;
}
li{
font-family:"Segoe UI",Arial,sans-serif;font-weight:normal;
}
.navbar-nav > li > a {padding-top:10px !important; padding-bottom:10px !important;}
.navbar {min-height:40px !important}
Is there something that I am missing here?. I am fairly new to CSS and so any inputs would be helpful.
Thanks,
Pavan.
EDIT: The following is with addition to java_archives/index.html.
In the root/index.html case, which is the top one, I can see my custom_styles.cxx overwriting the one from bootstrap. But in the second case, my stylesheet getting overwritten. And I am not able to comprehend why it is happening like that.

In addition to the missing css/custom_styles.css in your root/java_archives/index.html file....
With relative paths, such as css/custom_styles.css, the browser will look for java_archives/css/custom_styles.css instead of trying to find it in the root of your server.
You will need to either update the the path for the subfolder to ../css/custom_styles.css or use a fixed path /css/custom_styles.css

Just update your root/java_archives/index.html code like below..
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="../css/custom_styles.css"></link>
<script>
$(function(){
$("#headerContent").load("../header.html");
});
</script>
</head>
<body>
<div id="headerContent"></div>
<p>Reached Java Page!.</p>
</body>
</html>

Related

Nav bar links to internal html pages not working

I built a site for one of my clients with this template - http://www.templatemo.com/tm-395-urbanic
The site is http://www.southholstonriverlodge.com
They recently wanted me to change up the nav bar. It previously was only linked to anchors within the template which worked fine. I tried changing it to link to other pages ex.
<li class="active">HOME</li>
and they are no longer working.
The nav links that go to anchors still work and the links that go to external pages work. And I can right click and open the pages in new tabs, but directly clicking does nothing. I've tried so much to fix this and just can't get anywhere. Ideas? I'm at a point of not even knowing where to look. I'm fairly new with bootstrap and I was working on implementing a dropdown, thinking that was the issue, removed it. I'll include some code snippets but I'm not even sure where to begin.
.nav > li > a {
padding: 10px 10px;
}
.nav > li > a:hover,
.nav > li > a:focus {
background-color: #648c33;
color:#fff;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
background-color: #648c33;
color:#fff;
}
.nav > li > a {
color: #929292;
}
.navbar-default {
background-color:#fff;
border:none;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
background-color: #005200;
color: #fff;
}
.navbar {
margin-bottom: 0px;
}
<!DOCTYPE html>
<html lang="en"><!-- InstanceBegin template="/Templates/SHRL Template.dwt" codeOutsideHTMLIsLocked="false" --><head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>South Holston River Lodge | World Class Fishing | Luxury Lodging</title>
<!-- InstanceEndEditable -->
<meta name="keywords" content="south holston river lodge, lodge, soho, tennessee fly fishing, tennessee lodge, south holston, fly fishing, float, wade, guide, all inclusive, lodging, vacation, trips, cabins, home, bristol, tennessee, tn, destination, eastern tennessee" />
<meta name="description" content="South Holston River Lodge is located in Eastern Tennessee. It is a destination fly fishing lodge with excellent year round fishing." />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-51645845-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-51645845-1');
</script>
<!--
Urbanic Template
http://www.templatemo.com/tm-395-urbanic
-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<link rel="shortcut icon" href="PUT YOUR FAVICON HERE">-->
<link rel="shortcut icon" href="images/favicon.ico?v1.ico">
<!-- Google Web Font Embed -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<link href="js/colorbox/colorbox.css" rel="stylesheet" type='text/css'>
<link href="css/templatemo_style.css" rel="stylesheet" type='text/css'>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<!-- InstanceParam name="OptionalRegion1" type="boolean" value="true" -->
</head>
<body>
<div class="templatemo-top-bar" id="templatemo-top">
<div class="container">
<subheader>
<div id="phone" class="pull-left">
<img src="images/phone.png" alt="phone">
877.767.7875
</div>
<div id="email" class="pull-right">
<img src="images/email.png" alt="email" title="Email Icon"> bookings#southholstonriverlodge.com
</div>
</subheader>
</div>
</div>
<div class="templatemo-top-menu">
<div class="container">
<!-- Static navbar -->
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="images/sohorl.png" alt="SHRL Logo" width="200" title="South Holston River Lodge" />
</div>
<div class="navbar-collapse collapse" id="templatemo-nav-bar">
<ul class="nav navbar-nav navbar-right" style="margin-top: 40px;">
<li class="active">HOME</li>
<li>ABOUT US</li>
<li>SERVICES</li>
<li><a rel="nofollow" href="https://www.flickr.com/photos/138605916#N04/albums" class="external-link" title="Photo Gallery" target="_blank">GALLERY</a></li>
<li><a rel="nofollow" href="https://southholstonriverlodge.wordpress.com/" class="external-link" title="Fishing Report" target="_blank">FISHING REPORT</a></li>
<li>CONTACT</li>
</ul>
</div>
<!--/.nav-collapse -->
</div><!--/.container-fluid -->
</div><!--/.navbar -->
</div> <!-- /container -->
</div>
I noticed id="templatemo-nav-bar" in your template, and when I search the web for this I find people suggesting adding class="external" to the link:
HOME
I can't test this myself because your example is probably missing some javascript. Hope it helps :)
EDIT
Looking at the template script, it might actually be class="external-link":
HOME
This should unbind the click event handler, allowing the link to work as expected.
Looking at the template you linked, it looks like clicking on the links does a smooth scroll down the page instead of using the browser's native anchor link functionality. This means there's some javascript handling this and overriding the browser's default behavior. In the template's javascript here we see this section:
// scroll to specific id when click on menu
$('.templatemo-top-menu .navbar-nav a').click(function(e){
e.preventDefault();
var linkId = $(this).attr('href');
scrollTo(linkId);
if($('.navbar-toggle').is(":visible") == true){
$('.navbar-collapse').collapse('toggle');
}
$(this).blur();
return false;
});
It's overriding the browser's default link behavior using e.preventDefault() and then using scrollTo() to move the page. Unfortunately I think this means you're pretty much stuck with this behavior unless you can modify the javascript or modify the template extensively.

How to hover li elem color in nav navbar-nav of bootstrap

In my project, I use bootstrap ui.
I have navbar in main page, and it has ul tag with nav navbar-nav class.
There are product and market li in this ul tag.
Now product and market should be changed its color when mouse over.
I have trid to define with hove like:
<style>
active :hover{color:green}
</style>
But unlucky, it worked fail.
Here is my page code:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<meta charset="utf-8"><title>Starter Template for Bootstrap</title>
<link href="jsui/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="jsui/easyui-1.5.3/jquery.min.js"></script>
<script type="text/javascript" src="jsui/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<style>
active :hover{color:green}
</style>
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid" style="height:70px">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="pic/logo.png" style="width:130px;height:40px;margin-top:2px"></a>
</div>
<div>
<ul class="nav navbar-nav" style="visibility: visible;">
<li class="active">product</li>
<li class="active">market</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
customer <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>John</li>
<li>Sam</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</body>
Who can help me?
Your HTML is fine, you just got something wrong about the selector in CSS.
The correct way to select "Product" and "Market" would be:
.navbar .nav li.active a:hover{color:green}
Just to explain the Selector:
We are looking first for the .navbar Class which is on the <nav>
Element.
Then we give it a space (Otherwise it would try to find both Classes
on the same Element.
After that we look for .nav which is a Class on the <ul>
(Descendent of <nav class="navbar">) If you would try to select
only a direct Child you would use the Child-Selector">".
Last but not least, we give it a space and select every <li> Element
which has the .active Class (Notice that there is no space between
"li" and ".active")
At the very end we are looking for the <a> Element because the Text
is written inside of it and give it :hover (No Space) which is a
Pseudoclass
Here you can check out the working Pen

Bootstrap active menu bar color

I am currently making a website using bootstrap. I have a menu bar on top, and I would like to change the color or background color of the specific menu bar when the section of the website is in. Like example, one of menu is call about, and there is a section in homepage call about. When the person is on the about section of the webpage, I want menu "about" will change into different color background.
I used data-spy(scroll) and data-target(my-navbar) to check if it's work, but it was not working. Is there anyway I can fix this problem?
P.S. This is my navbar part and body part that I use it. Thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Provision Health & Wellness</title>
<meta name="description" content="ProvisionHW">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
</head>
<style>
body {
padding-top: 40;
}
h2 {
text-align: center;
}
</style>
<body data-spy="scroll" data-target="#my-navbar">
<!-- Navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Provision Health&Wellness
</div> <!-- Navbar Header-->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>Health Product</li>
<li>Blog</li>
<li>Slim Product</li>
<li>Video</li>
<li>Skin Product</li>
<li>Contact us</li>
</ul>
</div>
</div> <!-- End Container-->
</nav> <!-- End navbar-->
Here is fiddle that's working.
https://jsfiddle.net/5e1n0nhw/1/
Here is jQuery that tracks active section
$(function() {
$('a.page-scroll').bind('click', function(e) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}
, 1500, 'easeInOutExpo' //add/remove for smooth scroll
);
e.preventDefault();
});
});
Don't forget to include jQuery easing.
Add id of page-top to your body element and href page-top to your logo so you can scroll to top on click.
Add class page-scroll on all a elements that you want to lead to section.
Wrap all sections in section tag.
And now you can style active link with css
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover{
color:green;
}
Use this awesome tool that can customize your navbar color and give you the css needed.
http://work.smarchal.com/twbscolor/

Fixed navbar breaks up and covers content

When I try to scroll with my fixed navbar code the bar breaks up into only the boxes for the links and it covers the page title, how do I fix this? All my code is in a pastebin as it would have been too long to post directly on here.
http://pastebin.com/CBvGcKT4
My approach would be to push padding-top to the body.
The nav block is fixed, so it doesn't 'physically' interfere with anything, which means it will not push your content below it.
I see you are using jQuery, so we can use it:
<script type="text/javascript">
$(document).ready(function() {
var navHeight = $('#nav').height();
$('body').css("padding-top", navHeight);
});
</script>
Getting the height and passing it trought the body's padding-top everytime after page load, is a fail-safe solution, so if your menu elements are more and the menu has two or more rows of them, the content will follow right after.
For this solution to work properly you need to remove the fixed heights you put in:
#nav, .fixed-nav-bar {
height: auto;
}
and let them do the magic themselves.
First you should fix your code.You set h1 and nav inside head tag and that is wrong, it should go inside body.To check what elements go inside head tag visit this page: http://www.w3schools.com/tags/tag_head.asp
So after you put that code inside body check bootstrap documentation as it already have class for fixed navbar and here you write your own.
Then I suggest to put h1 title below navbar, not above as it is now, so that code matches visual placement of elements.
And also, like it is said on bootstrap documentation for fixed top navbar, you should add padding-top to your body if you use .navbar-fixed-top.
By default navbar is 50px high but because you increased it then add more padding-top to body.
Also your links look like this:
<li>What Are Drones</li>
In most cases this will not work so you should remove spaces from html file name. Like this for example:
<li>What Are Drones</li>
This code will perfectly work for you.
Happy Coding :-)
#charset "utf-8";
/* CSS Document */
#TITLE {color: #1762a1; font-family: "Cuprum", sans-serif; font-size:80px;}
.navbar-nav li a{color: white ! important; font-family: "Cuprum", sans-serif; }
.navbar-brand{color: white ! important;}
BODY{PADDING-TOP: 50px;}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Drones</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Cuprum:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="btt index.js"></script>
<link rel="stylesheet" href="indexCSS.css" />
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Kittatinny's Drone Information</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>What Are Drones</li>
<li>How Drones Work</li>
<li>Buying a Drone</li>
<li>About Us</li>
</ul>
</div>
</div>
</nav>
<h1 id="TITLE" class="text-center"> Kittatinny's Drone Information</h1>
</head>

How to change the colors inside html ul and reverse colors in hover effect

I add this menu in bootstrap.
i wanted them to display in the following ways:
case-1: If menu get drop down then display text color white,
background-color green.
case-2: if any menu option is hovered then, reverse their colors in
hover effect.
But the <a> tags are not getting the colors that i define in a class 'menu' for <ul> under which all <a> tags reside.I want to change their color in way so that other <a> tags outside of menu won't change their style.
Please check image given below:
please suggest me on fixing this problem.
Here is the source code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style media="screen" type="text/css">
.menu{
background-color:#4da309;
color: #FFFFFF;
font-size:20px;
}
</style>
</head>
<body>
<div class="container" >
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" style="font-size:24px;">
File Menu<span class="caret"></span>
</a>
<ul class="dropdown-menu menu">
Text gets Correct color
<li>Text gets Correct color Information wrong color</li>
<li>Information wrong color</li>
<li>Information wrong color</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
please let me know if any further information is required.
Thanks :)
You need to target the "a tag" inside the Ul > Li.
As for the hovering state, just add a ":hover" to whatever you're trying to give a custom hover state CSS to.
<style media="screen" type="text/css">
.menu{
background-color:#4da309;
color: #FFFFFF;
font-size:20px;
}
.menu li a{
color: #FFFFFF;
}
.menu li a:hover{
color: #000000;
}
</style>
Put this in your CSS so that <a> tags outside of menu won't change their style:
.menu li a{
background-color:#4da309;
color: #FFFFFF;
font-size:20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style media="screen" type="text/css">
.menu{
background-color:#4da309;
color: #FFFFFF;
font-size:20px;
}
.menu li a{
background-color:#4da309;
color: #FFFFFF;
font-size:20px;
}
</style>
</head>
<body>
<div class="container" >
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" style="font-size:24px;">
File Menu<span class="caret"></span>
</a>
<ul class="dropdown-menu menu">
Text gets Correct color
<li>Text gets Correct color Information wrong color</li>
<li>Information wrong color</li>
<li>Information wrong color</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
The problem is that bootstrap overrides your CSS because its selector is more selective:
.dropdown-menu > li > a {
color: #333;
}
If you want to override bootstrap, you need to take precedence over the bootstrap selector (after the inclusion of bootstrap.css):
.dropdown-menu > li > a {
color: #FFFFFF;
}
Your should learn how CSS precedence works, here is a good article (maybe you'll understand why CSS is called CSS!).
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style media="screen" type="text/css">
.menu{
background-color:#4da309;
color: #FFFFFF;
font-size:20px;
}
.menu a{
color: #FFFFFF !important;
}
.menu a:hover{
color: #4da309 !important;
}
</style>
</head>
<body>
<div class="container" >
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" style="font-size:24px;">
File Menu<span class="caret"></span>
</a>
<ul class="dropdown-menu menu">
Text gets Correct color
<li>Text gets Correct color Information wrong color</li>
<li>Information wrong color</li>
<li>Information wrong color</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
You need to bind a hover event on ".dropdown-toggle". For example
if($("."dropdown-menu").is(':visible')){
var anchor = $(this).find("a");
anchor.addClass("greenText"); // Add your css style in this class
anchor.hover(function(){
$(_this).addClass("whiteText") // Add hover css style
}, function(){
$(_this).addClass("greenText") // Add hover css style
})
}