title: Bootstrap CSS menu style and css styles not engaging on pages other than index
body: <p>On Index all FONT STYLE AND COLOR AND "FLIPPING" MENU works fine, BUT on 7775.html in the page folder the menu is not flipping and font color is not being picked, but it was working a couple weeks ago. </p>
  
  <p>I am confused as to why this works on the index.html, and not on my other page. </p>
  
  <p>I would be very grateful if someone could spot what I am doing since I have looked at this far too long...advance thank you.</p>
  
  <p>INDEX.HTML:</p>
  
  <pre><code>    &lt;!DOCTYPE HTML&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
            &lt;head&gt;
            &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
            &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
            &lt;link title="no title" type="text/css"     href="css/main.css"rel="stylesheet" media="screen" charset="utf-8"&gt;
            &lt;link title="no title" type="text/css" href="css/cssmenu.css" rel="stylesheet" media="screen" charset="utf-8"&gt;
            &lt;script src="//code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
            &lt;script type="text/javascript" src="js/cssmenu.js"&gt;&lt;/script&gt;
            &lt;script type="text/javascript" src="js/main.js"&gt;&lt;/script&gt;
            &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;    &lt;/script&gt;
  
            &lt;!-- Latest compiled and minified CSS --&gt;
            &lt;link rel="stylesheet" h    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"&gt;
  
            &lt;!-- Optional theme --&gt;
            &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"&gt;
            &lt;!--custom.css --&gt;
            &lt;link rel="stylesheet" type="text/css" href="css/custom.css"&gt;
  
            &lt;!-- Latest compiled and minified JavaScript --&gt;
            &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"&gt;&lt;/script&gt;
  
            &lt;link rel="stylesheet" type="text/css"
            href="https://fonts.googleapis.com/css?family=Cormorant+Garamond"&gt;
            &lt;style&gt;
            body {
              font-family: 'Cormorant+Garamond', serif;
              font-size: 48px;
                }
          &lt;/style&gt;
  
  
          &lt;/head&gt;
  
          &lt;body&gt;
  
          &lt;div class="container"&gt;
          &lt;div class="jumbotron"&gt;
  `        &lt;div class="col-sm-8"&gt;
             &lt;h2&gt;Works Great in blue as I want&lt;/h2&gt;
             &lt;h4&gt;Showing the way I want it with blue font&lt;/h4&gt;  
          &lt;/div&gt;
         &lt;/div&gt;
        &lt;/div&gt;
  
       &lt;div class="container"&gt;
         &lt;div id="cssmenu" class="dropdown"&gt;
          &lt;ul&gt;
           &lt;li class="active"&gt;&lt;a href="/index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="http://www.fabulousprofessional.com"&gt;Northern Virginia Property Search&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="pages\7775.html"&gt;Featured Properties&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="pages\buyerssellers.html"&gt;Buyer and Seller Info&lt;/a&gt;    &lt;/li&gt;
         &lt;/ul&gt;
        &lt;/div&gt;
       &lt;/div&gt;
  </code></pre>
  
  <p>****ON File ../pages/7775.html: NOT PICKING UP COLOR in header elements and menu is merely shown as an ordered list and not flipping (3D) in the style and color of background of text I wish as in the index.html. Confused because it was working recently****</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  </code></pre>
  
  <p>
      </p>
  
  <pre><code>&lt;link title="no title" type="text/css" href="css/main.css" rel="stylesheet" media="screen" charset="utf-8"&gt;
  &lt;link title="no title" type="text/css" href="css/cssmenu.css" rel="stylesheet" media="screen" charset="utf-8"&gt;
  &lt;script src="//code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/cssmenu.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/main.js"&gt;&lt;/script&gt;
  &lt;script   src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;   &lt;/script&gt;
  
    &lt;!-- Latest compiled and minified CSS --&gt;
    &lt;link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"&gt;
  
    &lt;!-- Optional theme --&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"&gt;
    &lt;!--custom.css --&gt;
    &lt;link rel="stylesheet" type="text/css" href="css/custom.css"&gt;
    &lt;!-- Latest compiled and minified JavaScript --&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"&gt;&lt;/script&gt;
  
    &lt;link rel="stylesheet" type="text/css"
        href="https://fonts.googleapis.com/css?family=Cormorant+Garamond"&gt;
  
    &lt;style&gt;
      body {
        font-family: 'Cormorant+Garamond', serif;
        font-size: 14px;
         }
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="container"&gt;
    &lt;div class="jumbotron"&gt;
     &lt;div class="col-sm-8"&gt;
      &lt;h2&gt;NOT PICKING UP COLOR&lt;/h2&gt;
      &lt;h4&gt;NOT PICKING UP COLOR&lt;/h4&gt;
     &lt;/div&gt;   
   &lt;/div&gt;
  &lt;/div&gt;
  
    &lt;div class="container"&gt;
       &lt;div id="cssmenu" class="dropdown"&gt;
         &lt;ul&gt;
          &lt;li class="active"&gt;&lt;a href="/index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://www.eblockhomes.com"&gt;Northern Virginia Property Search&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="pages\7775.html"&gt;Featured Properties&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="pages\buyerssellers.html"&gt;Buyer and Seller Info&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  <strong>> CSSStyleSHeets - main.css is as follows</strong></p>
  
  <pre><code>.jumbotron {
    overflow: auto;
    margin-bottom: 0px !important;
    color: inherit;
   }
  .jumbotron .row img {
    border: 0 none;
    display: inline-block;
    vertical-align: middle;
  }
  
  .jumbotron #name {
    width: 100%;
    height: 145px;
    background-color: #ffffff;
  }
  
  
  @media screen and (max-width: 768px) {
    .jumbotron #name {
      width: 100%;
      height: 245px;
      padding-top: 60px;
      padding-bottom: 30px;
      padding-right: 40px;
      padding-left: 40px;
  }
  
  .button #singlebutton.btn.btn-primary{
    background-image: #E9ECEF;
  }
  
  .item.active {
    max-height: 600px;
    overflow: hidden;
  }
  
  .item .active img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  
  ul {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
  .form-horizontal{
    float: right !important;
    margin-top: 10px;
  }
  
  .lead{
    margin-top: 5px;
  }
  @media screen and (min-width: 790px) {
    ul {
     display: inline-flex !important;
    }
  
  .link {
    color:#ffffff;
  }
  
  h2 {
    color: #4d79ff;
  }
  
  div {
    color: #4d79ff;
  }
  body {
      margin-top: 200px;
  }
  p {
    color: black;
    font-size: 12pt;
  }
  </code></pre>
  
  <p><strong>custom.css IS AS FOLLOWS</strong></p>
  
  <pre><code>.jumbotron {
    background-color: #ffffff;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 0;
    padding-right: 0;
  }
  .page-header {
    height: 35px;
    width: 100%;
    background-color: #337ab7;
    padding-left: 40px;
    padding-top: 1px;
  }
  .col-sm-8 {
    top: 0;
    bottom: 0;
    left: 120px;
    right: 0;
  }
   .col-sm-4 {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0px;
  }
  .jumbotron.container {
    padding-right: 15px;
    padding-left: 15px;
    border-radius: 0px;
  }
  .row {
    margin-left: 0;
    margin-right: 0;
  }
  
  .css-selector {
    font-family: 'Cormorant Garamond', serif;
  }
  
  img {
      float: right;
      margin: 0 0 10px 10px;
  }
  </code></pre>
  
  <p><strong>cssmenu.css IS AS FOLLOWS</strong></p>
  
  <pre><code>@import url(http://fonts.googleapis.com/css?family=Raleway);
  #cssmenu,
  #cssmenu ul,
  #cssmenu ul li,
  #cssmenu ul li a,
  #cssmenu #menu-button {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    line-height: 1;
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  #cssmenu:after,
  #cssmenu &gt; ul:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
  }
  
  #cssmenu #menu-button {
    display: none;
  }
  
  #cssmenu {
    width: auto;
    font-family: sans-serif;
    line-height: 1;
  
  }
  
  #cssmenu &gt; ul {
    background: #4d79ff;
  }
  
  #cssmenu &gt; ul &gt; li {
    float: left;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px;
  }
  
  #cssmenu.align-center &gt; ul {
    font-size: 0;
    text-align: center;
  }
  
  #cssmenu.align-center &gt; ul &gt; li {
    display: inline-block;
    float: none;
  }
  
  #cssmenu.align-right &gt; ul &gt; li {
    float: right;
  }
  
  #cssmenu &gt; ul &gt; li &gt; a {
    padding: 16px 20px;
    font-size: 14px;
    color: #ffffff;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    background: #4d79ff;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }
  
  #cssmenu &gt; ul &gt; li.active &gt; a {
    color: #dff2fa;
  }
  
  #cssmenu &gt; ul &gt; li:hover &gt; a,
  #cssmenu &gt; ul &gt; li &gt; a:hover {
    color: #1c799c;
    -webkit-transform: rotateX(90deg) translateY(-23px);
    -moz-transform: rotateX(90deg) translateY(-23px);
    transform: rotateX(90deg) translateY(-23px);
    -ms-transform: none;
  }
  
  #cssmenu &gt; ul &gt; li &gt; a::before {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: -1;
    -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 16px 20px;
    color: #1c799c;
    background: #19799f;
    content: attr(data-title);
    -webkit-transition: background 0.3s;
    -moz-transition: background 0.3s;
    transition: background 0.3s;
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -ms-transform: translateY(- -18px);
  }
  
  #cssmenu &gt; ul &gt; li:hover &gt; a::before,
  #cssmenu &gt; ul &gt; li &gt; a:hover::before {
    background: #4d79ff;
  }
  
     #cssmenu.small-screen {
        width: 100%;
      }
      #cssmenu.small-screen &gt; ul,
      #cssmenu.small-screen.align-center &gt; ul {
        width: 100%;
        text-align: left;
      }
  
  #cssmenu.small-screen &gt; ul &gt; li,
  #cssmenu.small-screen.align-center {
    float: none;
    display: block;
    border-top: 1px solid rgba(100, 100, 100, 0.1);
  }
  
  #cssmenu.small-screen &gt; ul &gt; li:hover &gt; a,
  #cssmenu.small-screen &gt; ul &gt; li &gt; a:hover {
    color: #dff2fa;
    -webkit-transform: none;
    -moz-transform: none;
    transform: none;
    -ms-transform: none;
  }
  
  #cssmenu.small-screen &gt; ul &gt; li &gt; a::before {
    display: none;
  }
  
  #cssmenu.small-screen #menu-button {
    display: block;
    padding: 16px 20px;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: #4d79ff;
  }
  
  #cssmenu.small-screen #menu-button:after {
    content: "";
    position: absolute;
    right: 20px;
    top: 17px;
    display: block;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    border-top: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    width: 22px;
    height: 3px;
  }
  
      #cssmenu.small-screen #menu-button.menu-opened:after {
        border-top: 2px solid #81D9FB;
        border-bottom: 2px solid #81D9FB;
      }
  
      #cssmenu.small-screen #menu-button:before {
        content: "";
        position: absolute;
        right: 20px;
        top: 27px;
         display: block;
        width: 22px;
        height: 2px;
        background: #ffffff;
      }
  
      #cssmenu.small-screen #menu-button.menu-opened:before {
        background: #81D9FB;
      }
  
  #cssmenu.button.btn.btn-sm {
    border-top: 2px solid #45a7cc;
    border-bottom: 2px solid #45a7cc;
  }
  </code></pre>
  
  <p>NOW HERE IS JAVASCRIPT FOR MENU:</p>
  
  <pre><code>function($) {
  
    $.fn.menumaker = function(options) {
  
      var cssmenu = $(this),
    settings = $.extend({
      title: "Menu",
      format: "dropdown",
      breakpoint: 768,
      sticky: false
    }, options);
  
  return this.each(function() {
    cssmenu.find('li ul').parent().addClass('has-sub');
    if (settings.format != 'select') {
      cssmenu.prepend('&lt;div id="menu-button"&gt;' + settings.title + '&lt;/div&gt;');
      $(this).find("#menu-button").on('click', function() {
        $(this).toggleClass('menu-opened');
        var mainmenu = $(this).next('ul');
        if (mainmenu.hasClass('open')) {
          mainmenu.hide().removeClass('open');
        } else {
          mainmenu.show().addClass('open');
          if (settings.format === "dropdown") {
            mainmenu.find('ul').show();
          }
        }
      });
  
      multiTg = function() {
        cssmenu.find(".has-sub").prepend('&lt;span class="submenu-button"&gt;&lt;/span&gt;');
        cssmenu.find('.submenu-button').on('click', function() {
          $(this).toggleClass('submenu-opened');
          if ($(this).siblings('ul').hasClass('open')) {
            $(this).siblings('ul').removeClass('open').hide();
          } else {
            $(this).siblings('ul').addClass('open').show();
          }
        });
      };
  
      if (settings.format === 'multitoggle') multiTg();
      else cssmenu.addClass('dropdown');
    } else if (settings.format === 'select') {
      cssmenu.append('&lt;select style="width: 100%"/&gt;').addClass('select-list');
      var selectList = cssmenu.find('select');
      selectList.append('&lt;option&gt;' + settings.title + '&lt;/option&gt;', {
        "selected": "selected",
        "value": ""
      });
      cssmenu.find('a').each(function() {
        var element = $(this),
          indentation = "";
        for (i = 1; i &lt; element.parents('ul').length; i++) {
          indentation += '-';
        }
        selectList.append('&lt;option value="' + $(this).attr('href') + '"&gt;' + indentation + element.text() + '&lt;/option');
      });
      selectList.on('change', function() {
        window.location = $(this).find("option:selected").val();
      });
    }
  
    if (settings.sticky === true) cssmenu.css('position', 'fixed');
  
    resizeFix = function() {
      if ($(window).width() &gt; settings.breakpoint) {
        cssmenu.find('ul').show();
        cssmenu.removeClass('small-screen');
        if (settings.format === 'select') {
          cssmenu.find('select').hide();
        } else {
          cssmenu.find("#menu-button").removeClass("menu-opened");
        }
      }
  
      if ($(window).width() &lt;= settings.breakpoint &amp;&amp; !cssmenu.hasClass("small-screen")) {
        cssmenu.find('ul').hide().removeClass('open');
        cssmenu.addClass('small-screen');
        if (settings.format === 'select') {
          cssmenu.find('select').show();
        }
      }
    };
    resizeFix();
    return $(window).on('resize', resizeFix);
  
  });
  
  
  };
  })(jQuery);
  
  (function($) {
    $(document).ready(function() {
  $(document).ready(function() {
    $("#cssmenu").menumaker({
      title: "Menu",
      format: "dropdown"
    });
  
    $("#cssmenu a").each(function() {
      var linkTitle = $(this).text();
      $(this).attr('data-title', linkTitle);
    });
  });
  
    });
  })(jQuery);
  </code></pre>