5
Contributors
53
Replies
285
Views
1 Year
Discussion Span
Last Post by davy_yg
Featured Replies
  • `[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 … Read More

  • 1
    cereal 1,419   1 Year Ago

    **@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 … Read More

  • Then you have to store your color setting in a cookie or perhaps to use a more modern way that is HTML5 local storage. Read More

  • http://codepen.io/concretekiwi/pen/sqtFe Read More

  • Just copy the code from that pen and use that or add custom data-attributes to your links and use those values to store in a variable for localStorage. <a href="#" data-theme="red">red</a> But easier to copy that pen! Read More

0

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.

0

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>
0

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.

0

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.

0

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;
    });

});
0

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.

0

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.

0

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

0

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>
0

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

0

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

0

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.

0

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?

0

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.

0

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> 
0

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

Edited by cereal

1

[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

Votes + Comments
+1
1

@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.

Votes + Comments
Nice one :)
0

@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

0

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;

}
0

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

0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.