Skip to main content
Inspiring
July 19, 2017
Answered

Issues with Bootstrap

  • July 19, 2017
  • 1 reply
  • 1679 views

I built a website like all most a year ago with bootstrap. And just the other day, I added a drop down menu to my navigation. I need to modify some colors on the drop down and can't seem how to figure it out. Can someone help me, please?

Home - Empowered Golfers Mb.

    This topic has been closed for replies.
    Correct answer osgood_

    It's not on your web server, it's hosted at ajax.googleapis.com, you're linking to it using a <script> tag as Osgood posted.

    You don't add Osgoods second code snippet to the script file, you add it after the script link on the page.


    https://forums.adobe.com/people/Jon+Fritz+II  wrote

    It's not on your web server, it's hosted at ajax.googleapis.com, you're linking to it using a <script> tag as Osgood posted.

    You don't add Osgoods second code snippet to the script file, you add it after the script link on the page.

    Yup, so bottom of page should look like below, once <script> block has been added:

    <!-- jQuery library -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script>

      $(function() {

    var selector = '.nav li';

    $(selector).on('click', function(){

        $(selector).removeClass('active');

        $(this).addClass('active');

    });

         });

    </script>

    <!-- Latest compiled JavaScript -->

    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="chatSocketAchex.js"></script>

    <script type="text/javascript">

      $("#Chatroom").ChatSocket();
       </script>


    </body>


    </html>

    1 reply

    Nancy OShea
    Community Expert
    Community Expert
    July 19, 2017

    The simplest way to change colors is to use a Bootswatch Theme.    The one below is called Flatly.

    <!doctype html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <title>Bootstrap 3.3.7 Starter</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- Compiled and minified Bootstrap CSS, Bootswatch Flatly theme-->

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css">

    </head>

    <body class="container">

    <div class="row">

    <div class="col-md-10 center-block">

    <!--begin top nav bar-->

    <nav class="navbar navbar-inverse" role="navigation">

    <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 class="collapse navbar-collapse" id="myNavbar">

    <ul class="nav navbar-nav navbar-left">

    <li class="active"><a href="#">MENU 1</a></li>

    <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>

    <ul class="dropdown-menu">

    <li><a href="#">submenu 1-1</a></li>

    <li><a href="#">submenu 1-2</a></li>

    <li><a href="#">submenu 1-3</a></li>

    </ul>

    </li>

    <li><a href="#">MENU 3</a></li>

    <li><a href="#">MENU 4</a> </li>

    <li><a href="#">MENU 5</a> </li>

    <li><a href="#">MENU 6</a></li>

    </ul>

    </div>

    <!--end top nav--> </nav>

    </div>

    </div>

    <div class="row">

    <div class="col-md-10 center-block">

    PAGE CONTENT GOES HERE.....

    </div>

    </div>

    <!--latest jQuery-->

    <script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous" defer>

    </script>

    <!--Bootstrap-->

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous" defer></script>

    <!--Google Analytics Tracking Code here....-->

    </body>

    </html>

    More Bootswatch Themes available:

    https://bootswatch.com/

    Nancy O'Shea— Product User & Community Expert
    Inspiring
    July 19, 2017

    How do I change the theme I have now. This is all new to me.

    Nancy OShea
    Community Expert
    Community Expert
    July 20, 2017

    I made the changes but still can't seem to be able to access the code in the drop menu to change the colors.

    Home - Empowered Golfers Mb.


    Your custom CSS is probably overriding the CSS Theme.  Try disabling it.

    Nancy

    Nancy O'Shea— Product User & Community Expert