Member Avatar for davy_yg

Hello,

I would like to change colour style by using the navigation menu. Any clue how to do this by changing the bootstrap custom css whenever I click the Style Nav Button?

http://www.innovation.web.id/One/

Thanks in advance.

  • 5 Contributors
  • 53 Replies
  • 924 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by davy_yg
Member Avatar for hericles

Use jQuery's addClass to apply a new CSS style.

Member Avatar for davy_yg

Hello,

Does anyone knows how to utilize addClass to change css from another css file names?

For example if someone click the navigation it should change the css from another css file name. Is that possible?

Thanks.

Member Avatar for davy_yg

Hello,

Is there any way to change the style if I replace .intro in index.php with:

<link rel="stylesheet" href="styles.css">

index.php

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p:first").addClass("intro");
    });
});
</script>
<style>
.intro {
    font-size: 150%;
    color: red;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Add a class name to the first p element</button>

</body>
</html>
Member Avatar for hericles

Are you trying to swap various CSS style rules on a click event or do you want to switch to another stylesheet altogether?
if you want to alter the appearance of only a couple of elements then jQuery's .addClass or .css will be all you need.
If you want to switch to an entirely different stylesheet you can look online for 'stylesheet switching' and find js code that does that.

Member Avatar for davy_yg

I basically only need to change the color:

<style>
.intro {
    font-size: 150%;
    color: red;
}
</style>

Is there any better way to do this. I only need to change the color - eventhough it is within the same css.

Member Avatar for davy_yg

Hello,

I try changing the style using style switcher. I wonder why when I click the navigation either blue or green it does change the text size to either blue or green. Yet, some of the stylesheet turn off so that the websites appears asif without stylesheet.

nav.php

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="script.js" type="text/javascript"></script>

 <h2><a href="http://www.marcofolio.net/">Marcofolio.net</a></h2>  


<nav class="navbar navbar-inverse">
  <div class="container-fluid"> 
    <div class="navbar-header">
      <a class="navbar-brand" href="#"></a>
    </div> 
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.php">HOME</a></li>
        <li><a href="about.php">ABOUT</a></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PORTFOLIO <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="portfolio-filter.php">Portfolio 1</a></li>
            <li><a href="portfolio-filter2.php">Portfolio 2</a></li>       
          </ul>
        </li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PAGES <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="product-category.php">Product Category</a></li>
            <li><a href="services.php">Services</a></li>
            <li><a href="faq.php">FAQ</a></li>
            <li><a href="team-members.php">Team Members</a></li>
            <li><a href="testimonial.php">Testimonial</a></li>
          </ul>
        </li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">BLOG <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="blog.php">Blog 1</a></li>
            <li><a href="blog2.php">Blog 2</a></li>            
          </ul>
        </li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">STYLES <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Brown</a></li>
            <li><a href="#">Red</a></li>
            <li><a href="#">Yellow</a></li>
            <li><a class="colorbox colorgreen" href="?theme=green" title="Green Theme">Green</a></li>
            <li><a class="colorbox colorblue" href="?theme=blue" title="Blue Theme">Blue<li>
          </ul>
        </li> 
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">CONTACT US <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="contact.php">Contact Us1</a></li>
            <li><a href="contact2.php">Contact Us2</a></li>      
          </ul>
        </li>               
      </ul>
    </div>
  </div>
</nav>

script.js

google.load("jquery", "1.3.1");
google.setOnLoadCallback(function()
{

    // Color changer
    $(".colorblue").click(function(){
        $("link").attr("href", "blue.css");
        return false;
    });

    $(".colorgreen").click(function(){
        $("link").attr("href", "green.css");
        return false;
    });

    $(".colororange").click(function(){
        $("link").attr("href", "orange.css");
        return false;
    });

});
Member Avatar for diafol

Sorry away for weekend. ANybody else in the meantime?

Member Avatar for cereal

If linking a stylesheet then you have to define the correct path, not just the file name, unless this is in the same path of the requesting page. In practice change:

$("link").attr("href", "blue.css");

To something like:

$("link").attr("href", "/css/blue.css");

But it's worth to follow previous suggestions and apply a class or some rules rather than downloding new files.

Member Avatar for davy_yg

I try this:

nav.php

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="script.js" type="text/javascript"></script>

custom.css

/*
.navbar-inverse .navbar-nav > li > a {
    width: 150px !important;
    text-align: center !important;
    }
*/

.nav > li > a {
    font-weight: bold !important;
    position: relative;
    display: block;
    padding: 14px 35px !important;
}       

.navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
    color: #9D9D9D;
    padding: 10px 70px !important;
}

.navbar-inverse{
    /* brown */ /*  
    background-color:#c08663 !important;
    border-color:#c08663 !important;

    /* red */  /*
    background-color:#ff005c !important;
    border-color:#ff005c !important;
    */
    /* yellow */  /*
    background-color:#ffb500 !important;
    border-color:#ffb500 !important;
    */
    /* purple */  /*
    background-color:#a784b0 !important;
    border-color:#a784b0 !important;
    */
}



<script>    
    $("link1").attr("href", "bootstrap-3.3.5/css/custom.css");
</script>

<script>    
    $("link2").attr("href", "bootstrap-3.3.5/css/custom2.css");
</script>

<script>    
    $("link3").attr("href", "bootstrap-3.3.5/css/custom3.css");
</script>

<script>    
    $("link4").attr("href", "bootstrap-3.3.5/css/custom4.css");
</script>

<script>    
    $("link5").attr("href", "bootstrap-3.3.5/css/custom5.css");
</script>


<nav class="navbar navbar-inverse">
  <div class="container-fluid"> 
    <div class="navbar-header">
      <a class="navbar-brand" href="#"></a>
    </div> 
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.php">HOME</a></li>
        <li><a href="about.php">ABOUT</a></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PORTFOLIO <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="portfolio-filter.php">Portfolio 1</a></li>
            <li><a href="portfolio-filter2.php">Portfolio 2</a></li>       
          </ul>
        </li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PAGES <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="product-category.php">Product Category</a></li>
            <li><a href="services.php">Services</a></li>
            <li><a href="faq.php">FAQ</a></li>
            <li><a href="team-members.php">Team Members</a></li>
            <li><a href="testimonial.php">Testimonial</a></li>
          </ul>
        </li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">BLOG <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="blog.php">Blog 1</a></li>
            <li><a href="blog2.php">Blog 2</a></li>            
          </ul>
        </li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">STYLES <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#" class="link1">Brown</a></li>
            <li><a href="#" class="link2">Red</a></li>
            <li><a href="#" class="link3">Yellow</a></li>
            <li><a href="#" class="link4">Green</a></li>
            <li><a href="#" class="link5">Blue</a><li>
          </ul>
        </li> 
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">CONTACT US <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="contact.php">Contact Us1</a></li>
            <li><a href="contact2.php">Contact Us2</a></li>      
          </ul>
        </li>               
      </ul>
    </div>
  </div>
</nav>

custom2.css

/*
.navbar-inverse .navbar-nav > li > a {
    width: 150px !important;
    text-align: center !important;
    }
*/

.nav > li > a {
    font-weight: bold !important;
    position: relative;
    display: block;
    padding: 14px 35px !important;
}       

.navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
    color: #9D9D9D;
    padding: 10px 70px !important;
}

.navbar-inverse{
    /* brown */  
    background-color:#c08663 !important;
    border-color:#c08663 !important;  

    /* red */ /*
    background-color:#ff005c !important;
    border-color:#ff005c !important;

    /* yellow */  /*
    background-color:#ffb500 !important;
    border-color:#ffb500 !important;
    */
    /* purple */  /*
    background-color:#a784b0 !important;
    border-color:#a784b0 !important;
    */
}

I try that and nothing changes if I click the nav - style brown for example.

Member Avatar for cereal

These are always relative paths (relative to the opening page):

$("link1").attr("href", "bootstrap-3.3.5/css/custom.css");

use absolute paths, absolute means slash (/) followed by a relative path:

/bootstrap-3.3.5/css/custom.css

Also use id instead of the class attribute, since id must be unique the search through the document will be faster:

<li><a href="#" id="link1">Brown</a></li>

And if it still does not work add #:

$("#link1").attr("href", "bootstrap-3.3.5/css/custom.css");

Note: always add a dot when searching for a class, just like in CSS.

Edited by cereal
Member Avatar for davy_yg

It still does not work correctly. I wonder why?

nav.php

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="script.js" type="text/javascript"></script>


<script>    
    $("#link1").attr("href", "/bootstrap-3.3.5/css/custom.css");
</script>

<script>    
    $("#link2").attr("href", "/bootstrap-3.3.5/css/custom2.css");
</script>

<script>    
    $("#link3").attr("href", "/bootstrap-3.3.5/css/custom3.css");
</script>

<script>    
    $("#link4").attr("href", "/bootstrap-3.3.5/css/custom4.css");
</script>

<script>    
    $("#link5").attr("href", "/bootstrap-3.3.5/css/custom5.css");
</script>


<nav class="navbar navbar-inverse">
  <div class="container-fluid"> 
    <div class="navbar-header">
      <a class="navbar-brand" href="#"></a>
    </div> 
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.php">HOME</a></li>
        <li><a href="about.php">ABOUT</a></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PORTFOLIO <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="portfolio-filter.php">Portfolio 1</a></li>
            <li><a href="portfolio-filter2.php">Portfolio 2</a></li>       
          </ul>
        </li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PAGES <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="product-category.php">Product Category</a></li>
            <li><a href="services.php">Services</a></li>
            <li><a href="faq.php">FAQ</a></li>
            <li><a href="team-members.php">Team Members</a></li>
            <li><a href="testimonial.php">Testimonial</a></li>
          </ul>
        </li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">BLOG <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="blog.php">Blog 1</a></li>
            <li><a href="blog2.php">Blog 2</a></li>            
          </ul>
        </li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">STYLES <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#" id="link1">Brown</a></li>
            <li><a href="#" id="link2">Red</a></li>
            <li><a href="#" id="link3">Yellow</a></li>
            <li><a href="#" id="link4">Green</a></li>
            <li><a href="#" id="link5">Blue</a><li>
          </ul>
        </li> 
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">CONTACT US <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="contact.php">Contact Us1</a></li>
            <li><a href="contact2.php">Contact Us2</a></li>      
          </ul>
        </li>               
      </ul>
    </div>
  </div>
</nav>
Member Avatar for cereal

Whoops, wait. In my first example I was referring to a link tag, then following you last example I referred to #linkN. But the JQuery must alter a <link> tag not <a>:

<link rel="stylesheet" href="/link/to.css">

Otherwise you end only to link the file... what a word joke o_o'

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Switcher</title>
    <link rel="stylesheet" type="text/css" href="/css/default.css">
</head>
<body>

    <ul>
        <li><a href="/" id="link1">Red</a></li>
        <li><a href="/" id="link2">Purple</a></li>
        <li><a href="/" id="link3">Orange</a></li>
    </ul>

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("jquery", "1.7.1");
        google.setOnLoadCallback(function()
        {
            $('#link1').on('click', function(e){
                e.preventDefault();
                $('link[rel=stylesheet]').attr('href', '/css/red.css');
            });

            $('#link2').on('click', function(e){
                e.preventDefault();
                $('link[rel=stylesheet]').attr('href', '/css/purple.css');
            });

            $('#link3').on('click', function(e){
                e.preventDefault();
                $('link[rel=stylesheet]').attr('href', '/css/orange.css');
            });
        });
    </script>

</body>
</html>

Note: it does not save the preference to the browser, you should set a cookie for that.

Edited by cereal
Member Avatar for davy_yg

Hello,

I use your code and it does not work yet.

oke.php

    <!DOCTYPE html>
    <html>
    <head>
        <title>Switcher</title>
        <link rel="stylesheet" type="text/css" href="/css/default.css">
    </head>
    <body>
        <ul>
            <li><a href="/" id="link1">Red</a></li>
            <li><a href="/" id="link2">Purple</a></li>
            <li><a href="/" id="link3">Orange</a></li>
        </ul>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("jquery", "1.7.1");
            google.setOnLoadCallback(function()
            {
                $('#link1').on('click', function(e){
                    e.preventDefault();
                    $('link[rel=stylesheet]').attr('href', '/css/red.css');
                });
                $('#link2').on('click', function(e){
                    e.preventDefault();
                    $('link[rel=stylesheet]').attr('href', '/css/purple.css');
                });
                $('#link3').on('click', function(e){
                    e.preventDefault();
                    $('link[rel=stylesheet]').attr('href', '/css/orange.css');
                });
            });
        </script>
    </body>
    </html>

css/red.css

body {  background-color:red; }

If I click red and it does not show background-color red. I wonder why?

Edited by davy_yg
Member Avatar for cereal

Davy I don't know why. Can you open the CSS file directly from the browser url bar?

Member Avatar for gentlemedia

Cereal is right... your paths to the CSS files are wrong. Should be this:
href="/Oke/css/default.css"
or this (no absolute, but a relative path):
href="css/default.css"

And the same goes for the paths to your colour stylesheets.

Member Avatar for davy_yg

Thanks. Now, it started to work correctly. Except that when I click the navigation button it appears like the rest of the css beginning to disable except for my selected css.

The whole css suppose to work plus my selected css.

Any idea why?

Member Avatar for cereal

It happens because the test script will overwrite all the link tags marked with rel="stylesheet", to avoid this add a title attribute: title="colors".

So the link tag related to colors becomes:

<link rel="stylesheet" title="colors" type="text/css" href="/path/to/default.css">

And change the JQuery selectors from:

$('link[rel=stylesheet]').attr('href', '/path/to/red.css');

To:

$('link[rel=stylesheet][title=colors]').attr('href', '/path/to/red.css');

Fix it for all colors, and it should work fine.

Member Avatar for davy_yg

I try to revise it and now nothing happen whenever I click the link - it works before.

<script type="text/javascript">
            google.load("jquery", "1.7.1");
            google.setOnLoadCallback(function()
            {
                $('#link1').on('click', function(e){
                    e.preventDefault();
                    $('link[rel=stylesheet][title=colors]').attr('href', 'bootstrap-3.3.5/css/custom.css');
                });
                $('#link2').on('click', function(e){
                    e.preventDefault();
                    $('link[rel=stylesheet][title=colors]').attr('href', 'bootstrap-3.3.5/css/custom2.css');
                });
                $('#link3').on('click', function(e){
                    e.preventDefault();
                    $('link[rel=stylesheet][title=colors]').attr('href', 'bootstrap-3.3.5/css/custom3.css');
                });
            });
        </script>
Member Avatar for cereal

Hmm, is it possible to see an updated online version of this page?

Edited by cereal
Member Avatar for gentlemedia

[title=colors] I asume he had to change 'colors' to 'red', 'brown', 'green', etc.

But as mentioned by others it's quicker to load the styles if all the color styles are written in one stylesheet and just to add/remove classes with jQuery on the body tag.

Simple demo: http://codepen.io/gentlemedia/pen/wKdWwG

HTML:

    <button id="red">red</buttton>
    <button id="blue">blue</button>

    <h1>Switching colors</h1>

CSS:

h1 { color: black } /* default color */
body.red h1 { color: red }
body.blue h1 { color: blue }

jQuery:

    $('#red').click(function(){
        $('body').removeClass().addClass('red')
    });

    $('#blue').click(function(){
        $('body').removeClass().addClass('blue')
    });
Edited by gentlemedia
commented: +1 +13
Member Avatar for cereal

@gentlemedia

I completely agree with you, for me it's better to work with classes as suggested by you and diafol in previous posts. I went ahead with OP requests to show him how it can be done, even if this is not the best solution. Anyway, this is what I intended:

In this case the title attribute would work as substitute of a class or an id attribute, since those are not applicable to a <link> tag.

commented: Nice one :) +5
Member Avatar for gentlemedia

@cereal - Oh well... now he can choose. But it seemed Davy got totally lost with it (again) :)

Oh... you can indeed select on attributes, but it's slower and you can also give the <link> tag an id and then target that id.

Edited by gentlemedia
Member Avatar for davy_yg

Hello,

I try to revise this. This is the code, could you help me check this out and spot the errors?

nav.php

<script type="text/javascript">
            google.load("jquery", "1.7.1");
            google.setOnLoadCallback(function()
            {
                $('#link1').on('click', function(e){
                    e.preventDefault();
                    $('link[rel=stylesheet][title=colors]').attr('href', 'bootstrap-3.3.5/css/custom.css');
                    $('navbar-inverse').removeClass().addClass('brown')
                });
                $('#link2').on('click', function(e){
                    e.preventDefault();
                    $('link[rel=stylesheet][title=colors]').attr('href', 'bootstrap-3.3.5/css/custom2.css');
                    $('navbar-inverse').removeClass().addClass('red')
                });
                $('#link3').on('click', function(e){
                    e.preventDefault();
                    $('link[rel=stylesheet][title=colors]').attr('href', 'bootstrap-3.3.5/css/custom3.css');
                    $('navbar-inverse').removeClass().addClass('yellow')
                });
            });
        </script>

bootstrap-3.3.5/css/custom.css

.navbar-inverse.brown{

    /* brown */   
    background-color:#c08663 !important;
    border-color:#c08663 !important;

}

.navbar-inverse.red{

    /* red */  
    background-color:#ff005c !important;
    border-color:#ff005c !important;

}

.navbar-inverse.yellow{

    /* yellow */  
    background-color:#ffb500 !important;
    border-color:#ffb500 !important;

}

.navbar-inverse.purple{

    /* purple */  
    background-color:#a784b0 !important;
    border-color:#a784b0 !important;

}
Member Avatar for gentlemedia

Why are you using now both methods (Cereal's and mine) in your jQuery function.
Delete all the

$('link[rel=stylesheet][title=colors]').attr('href', 'bootstrap-3.3.5/css/custom.css');

Also to be sure... do you call for the jQuery library like below?

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
Edited by gentlemedia
Member Avatar for davy_yg

I don't know if I did it correctly. This is what I did:

nav.php

<link rel="stylesheet" href="bootstrap-3.3.5/css/custom.css" media="screen">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
            google.load("jquery", "1.7.1");
            google.setOnLoadCallback(function()
            {
                $('#link1').on('click', function(e){
                    e.preventDefault();
                    $('navbar-inverse').removeClass().addClass('brown')
                });
                $('#link2').on('click', function(e){
                    e.preventDefault();
                    $('navbar-inverse').removeClass().addClass('red')
                });
                $('#link3').on('click', function(e){
                    e.preventDefault();
                    $('navbar-inverse').removeClass().addClass('yellow')
                });
            });
        </script>  

        <!--
        <script>
        $('#link1').click(function(){
            $('navbar-inverse').removeClass().addClass('brown')
        });
        $('#link2').click(function(){
            $('navbar-inverse').removeClass().addClass('red')
        });
         $('#link3').click(function(){
            $('navbar-inverse').removeClass().addClass('yellow')
        });     
         $('#link4').click(function(){
            $('navbar-inverse').removeClass().addClass('purple')
        });     
        </script>
        -->

<nav class="navbar navbar-inverse">
  <div class="container-fluid"> 
    <div class="navbar-header">
      <a class="navbar-brand" href="#"></a>
    </div> 
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.php">HOME</a></li>
        <li><a href="about.php">ABOUT</a></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PORTFOLIO <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="portfolio-filter.php">Portfolio 1</a></li>
            <li><a href="portfolio-filter2.php">Portfolio 2</a></li>       
          </ul>
        </li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PAGES <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="product-category.php">Product Category</a></li>
            <li><a href="services.php">Services</a></li>
            <li><a href="faq.php">FAQ</a></li>
            <li><a href="team-members.php">Team Members</a></li>
            <li><a href="testimonial.php">Testimonial</a></li>
          </ul>
        </li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">BLOG <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="blog.php">Blog 1</a></li>
            <li><a href="blog2.php">Blog 2</a></li>            
          </ul>
        </li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="/">STYLES <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="/" id="link1">Brown</a></li>
            <li><a href="/" id="link2">Red</a></li>
            <li><a href="/" id="link3">Yellow</a></li>
            <li><a href="/" id="link4">Green</a></li>
            <li><a href="/" id="link5">Blue</a><li>
          </ul>
        </li> 
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">CONTACT US <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="contact.php">Contact Us1</a></li>
            <li><a href="contact2.php">Contact Us2</a></li>      
          </ul>
        </li>               
      </ul>
    </div>
  </div>
</nav>

I don't think it works well.

Member Avatar for gentlemedia

$('navbar-inverse') should be $('.navbar-inverse')

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.