6 Replies Latest reply on Apr 22, 2015 1:21 PM by osgood_

    Bootstrap2/3 Menu not working now?

    terryfoster Level 1

      This is a flavour of my previous thread, out a different issue, so I have started another question...

      If this is a bad idea please tell me and i'll not do it again

       

      I had this menu working fine in a bootstrap version 2 of my website but trying to transfer it over to a bootstrap 3 version.

      Link to the stripped file version is at www.tdrd.karoo.net/bootstrapmenuproblem.zip

       

      Now in the latest version - when the screen is sized to mobile, the menu should work as a pull down menu.

       

      NOW I DO NOT UNDERSTAND how these things work, and no idea what all these pull and after things do in the css styles and script, but something is not working.

      The menu itself has suddenly started to block out all the options, and the options have stepped out to the right by about 10 pixels.

       

      I'd love to understand how these things work so I can correct itself and would appreciate if someone has the patience both to tell me how, and what is wrong now...

      Thank you in advance to anyone looking at this.

      Terry

        • 1. Re: Bootstrap2/3 Menu not working now?
          osgood_ Level 8

          This doesnt have much to do with Bootstrap as apart from the class naming convention there aint no Bootstrap css attached to the page.

           

          Tweaked the css a bit for you so the drop-menu should work now. Take note you do not have to repeat ALL the css attributes in a media query, just those that you want to alter - it will save you a lot of work and steamline your css.

           

          In your tablet media query I've only used:

           

          nav li {

          width: 50%;

          }

           

          all the other attributes for the li are the same for the mobile/tablet and will be inherited from the mobile first css.

           

           

           

           

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

          <html xmlns="http://www.w3.org/1999/xhtml">

          <head>

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

          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

          <title></title>

          <script type="text/javascript" src="ScriptLibrary/jquery-latest.pack.js"></script>

          <script>

          $(function() {

          $('#pull').click(function() {

          $('nav ul').slideToggle();

          });

           

          $(window).on('resize', function(){

          var win = $(this); //this = window

          if (win.width() > 769) { $('nav ul').show(); }

          if (win.width() < 768) { $('nav ul').hide(); }

          });

           

          });

              </script>

          <style>

              /* Simple fluid media

          Note: Fluid media requires that you remove the media's height and width attributes from the HTML

          */

          img, object, embed, video {

              max-width: 100%;

          }

          /* IE 6 does not support max-width so default to width 100% */

          .ie6 img {

              width:100%;

          }

           

          /*

              Dreamweaver Fluid Grid Properties

              ----------------------------------

              dw-num-cols-mobile:        5;

              dw-num-cols-tablet:        8;

              dw-num-cols-desktop:    12;

              dw-gutter-percentage:    10;

          */

          /* GLOBAL STYLES */

          /* GLOBAL STYLES */

          /* GLOBAL STYLES */

          body {

              background-image: none;

          }

           

          .img-float-left{

              float:left;

              margin-right:2px;

              }

           

          /* Mobile Layout: 480px and below. */

          /* Mobile Layout: 480px and below. */

          /* Mobile Layout: 480px and below. */

          body {

              background-image: none;

          }

          .img-float-left{

          float:left;

          margin-right:2px;

          }

          p {

          font-size: 100%;

          }

          .gridContainer {

              margin-left: auto;

              margin-right: auto;

              width: 98.1818%;

              padding-left: 0.909%;

              padding-right: 0.909%;

              background:rgba(255,255,255,0.6);

          }

          #adaptiveMessage {

              position: relative;

              clear: both;

              margin: 0;

              width: 100%;

              display: block;

              background-color: #99C7E2;

              font-family: Arial, Helvetica, sans-serif;

              font-size: 9px;

          }

          #header {

              position: relative;

              clear: both;

              float: left;

              margin-left: 0;

              width: 100%;

              display: block;

              background-size: 100% 100%;

              background-image: url(../_img/tfwebsiteslogo.png);

              background-color: #FFF;

          }

           

          #header:before {

          content:"";

          display:block;

          padding-top:18%;

          }

          .content{

              position:  absolute;

              top: 0;

              left: 0;

              bottom: 0;

              right: 0;

          }

           

          #menubar {

              clear: both;

              float: left;

              margin-left: 0;

              width: 100%;

              display: block;

          }

          #article {

              clear: both;

              margin-left: 0;

              width: 100%;

              display: block;

          }

          #article h2 {

              font-family: Arial, Helvetica, sans-serif;

              font-size: 100%;

              color: #06C;

              line-height: 112%;

              margin-top: 4px;

              margin-right: 0px;

              margin-bottom: 5px;

              margin-left: 0px;

          }

          #footer {

              clear: both;

              float: left;

              margin-left: 0;

              width: 100%;

              display: block;

              font-family: Arial, Helvetica, sans-serif;

              font-size: 100%;

              margin-top: 5;

              margin-right: 0;

              margin-bottom: 10;

              padding-top: 5px;

              border-top-width: medium;

              border-top-style: solid;

              border-top-color: #CCC;

              border-right-color: #CCC;

              border-bottom-color: #CCC;

              border-left-color: #CCC;

              padding-bottom: 10px;

              border-bottom-width: medium;

              border-bottom-style: solid;

          }

          nav {

              clear: both;

              float: left;

              margin-left: 0;

              display: block;

              killheight: 40px;

              width: 100%;

              background: #455868;

              font-size: 11pt;

              font-family: 'PT Sans', Arial, sans-serif;

              font-weight: bold;

              border-bottom: 2px solid #283744;

              border-bottom: 0;

          }

          nav ul {

          width: 100%;

          display: none;

          margin: 0;

          padding: 0;

          }

          nav li {

              display: block;

              width:100%;

              float: left;

              color: #FFF;

              background: #455868;

          }

          nav a {

              color: #fff;

              display: inline-block;

              width: 100%;

              text-align: center;

              text-decoration: none;

              line-height: 40px;

              text-shadow: 1px 1px 0px #283744;

           

          }

          nav li a {

              color: #FFF;

              border-right: 1px solid #576979;

              box-sizing: border-box;

              -moz-box-sizing: border-box;

              -webkit-box-sizing: border-box;

          }

          nav a:hover, nav a:active, nav a:visited {

              color: #FFF;

              background-color: #8c99a4;

          }

          nav a#pull {

                  display: block;

                  background-color: #283744;

                  width: 100%;

          }

          nav a#pull:after {

                  content:"";

                  background: url("img/nav-icon.png") no-repeat;

                  width: 30px;

                  height: 30px;

                  display: inline-block;

                  right: 15px;

                  top: 10px;

              }

           

          /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

           

          @media only screen and (min-width: 481px) {

          p {

              font-size: 100%;

          }.gridContainer {

              width: 98.8636%;

              max-width: 768px;

              padding-left: 0.5681%;

              padding-right: 0.5681%;

          }

          #header {

              position: relative;

              clear: both;

              float: left;

              margin-left: 0;

              width: 100%;

              display: block;

          }

          #header:before {

          content:"";

          display:block;

          padding-top:18%;

          }

          .content{

              position:  absolute;

              top: 0;

              left: 0;

              bottom: 0;

              right: 0;

          }

          #article {

              clear: both;

              margin-left: 0;

              width: 100%;

              display: block;

          }

          #article h2 {

              font-family: Arial, Helvetica, sans-serif;

              font-size: 120%;

              color: #06C;

              line-height: 125%;

              margin-top: 4px;

              margin-right: 0px;

              margin-bottom: 5px;

              margin-left: 0px;

          }

          #footer {

              clear: both;

              float: left;

              margin-left: 0;

              width: 100%;

              display: block;

          }

          nav li {

              display: block;

              width: 50%;

              float: left;

              color: #FFF;

              background: #455868;

          }

          }

           

          /* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

          @media only screen and (min-width: 769px) {

          body {

              background-attachment: fixed;

              background-image: url(../_img/background.gif);

              background-repeat: no-repeat;

          }

          p {

              font-size: 100%;

          }.gridContainer {

              width: 99.2424%;

              max-width: 960px;

              padding-left: 0.3787%;

              padding-right: 0.3787%;

              margin: auto;

          }

          #header {

              position: relative;

              clear: both;

              float: left;

              margin-left: 0;

              width: 100%;

              display: block;

          }

          #header:before {

              display: block;

              padding-top: 18%;

          }

          .content{

              position:  absolute;

              top: 0;

              left: 0;

              bottom: 0;

              right: 0;

          }

          #article {

              clear: both;

              margin-left: 0;

              width: 100%;

              display: block;

          }

          #article h2 {

              font-family: Arial, Helvetica, sans-serif;

              font-size: 120%;

              color: #06C;

              line-height: 155%;

              margin-top: 4px;

              margin-right: 0px;

              margin-bottom: 5px;

              margin-left: 0px;

          }#footer {

              clear: both;

              float: left;

              margin-left: 0;

              width: 100%;

              display: block;

          }

          nav {

              height: 40px;

              width: 100%;

              background: #455868;

              font-size: 11pt;

              font-family: 'PT Sans', Arial, sans-serif;

              font-weight: bold;

              border-bottom: 2px solid #283744;

          }

          nav ul {

              padding: 0;

              margin: 0 0;

              width: 100%;

              height: 40px;

              color: #FFF;

              display:block;

          }

          nav li {

              width:140px;

              float: left;

              color: #FFF;

              background: #455868;

              position:relative;

          }

          nav a {

              color: #fff;

              width:100%;

              text-align: center;

              text-decoration: none;

              line-height: 40px;

              position:relative;

          }

           

          nav li a {

              color: #FFF;

              border-right: 1px solid #576979;

              box-sizing: border-box;

              -moz-box-sizing: border-box;

              -webkit-box-sizing: border-box;

          }

          nav li:last-child a {

              border-right: 0;

          }

          nav a:hover, nav a:active, nav a:visited {

              color: #FFF;

              background-color: #8c99a4;

          }

           

          nav a#pull {

              display: none;

          }

          #designer {

              clear: both;    float: left;    margin-left: 0;    width: 100%;    display: block;}}

           

          }

           

           

          </style>

          </head>

           

           

           

           

          <body>

          <div class="container">

          <div class="row">

          <div class="col-md-12">

          <div id="adaptiveMessage">This site is Responsive. Layout will change according to your device.</div>

          <nav>

          <ul>

          <li><a href="index.htm">Home</a></li>

          <li><a href="portfolio.htm">Portfolio</a></li>

          <li><a href="effects.htm">Effects</a></li>

          <li><a href="contact/index.htm">Contact</a></li>

          </ul>

          <a href="#" id="pull">Menu</a>

          </nav>

          </div>

           

              <div class="col-md-12">

                <h2>Heading</h2>

                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>

              </div>

            </div>

          </div>

           

           

           

          </body>

          </html>

          • 2. Re: Bootstrap2/3 Menu not working now?
            terryfoster Level 1

            Thank you for the note about duplicated CSS.

             

            ... and on the fact that this has NOTHING TO DO WITH BOOTSTRAP...

             

            However - I am still puzzled why the menu overlays the options

            and why the options are shifted to the right...

            Thnks

            Terry

            • 3. Re: Bootstrap2/3 Menu not working now?
              osgood_ Level 8

              terryfoster wrote:

              However - I am still puzzled why the menu overlays the options

              and why the options are shifted to the right...

              Thnks

              Terry

               

              If you copy the code I pasted in my reply it works as it should do.

              • 4. Re: Bootstrap2/3 Menu not working now?
                terryfoster Level 1

                Ahhhh - it's something to do with the position of the striped icon in the menu bar - I see that now...

                If I change the absolute and relative bits of the pull and after classes then the whole thing falls over....

                Okaay! That just leaves me with the question - shall I kill off the icon!!!

                 

                Thank you for all your help.

                Terry

                • 5. Re: Bootstrap2/3 Menu not working now?
                  terryfoster Level 1

                  CORRECT ANSWER OSGOOD - Brilliant - I understand how it works now - thank you very much

                  Terry

                  • 6. Re: Bootstrap2/3 Menu not working now?
                    osgood_ Level 8

                    You can add a mobile menu bar icon if you want one.

                     

                    I've added a link to font awesome css in your code below and changed a couple of things. You can use any icon on the font awesome website now you are linked to the css file.

                     

                    Icons are added using this code convention <i class="fa fa-bars"></i> which I've included in you mobile trigger anchor tag:

                     

                    <a href="#" id="pull" style="padding: 10px;"><i class="fa fa-bars"></i></a>

                     

                    If you go to the website there are dozens to choose from.

                     

                     

                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                    <html xmlns="http://www.w3.org/1999/xhtml">

                    <head>

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

                    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                    <title></title>

                    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

                    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

                    <script>

                    $(function() {

                    $('#pull').click(function() {

                    $('nav ul').slideToggle();

                    });

                    $(window).on('resize', function(){

                    var win = $(this); //this = window

                    if (win.width() > 769) { $('nav ul').show(); }

                    if (win.width() < 768) { $('nav ul').hide(); }

                    });

                    });

                    </script>

                    <style>

                     

                    /* Simple fluid media

                    Note: Fluid media requires that you remove the media's height and width attributes from the HTML

                    */

                    img, object, embed, video {

                    max-width: 100%;

                    }

                    /* IE 6 does not support max-width so default to width 100% */

                    .ie6 img {

                    width:100%;

                    }

                    /*

                    Dreamweaver Fluid Grid Properties

                    ----------------------------------

                    dw-num-cols-mobile:        5;

                    dw-num-cols-tablet:        8;

                    dw-num-cols-desktop:    12;

                    dw-gutter-percentage:    10;

                    */

                    /* GLOBAL STYLES */

                    /* GLOBAL STYLES */

                    /* GLOBAL STYLES */

                     

                    body {

                    background-image: none;

                    }

                    .img-float-left{

                    float:left;

                    margin-right:2px;

                    }

                    /* Mobile Layout: 480px and below. */

                    /* Mobile Layout: 480px and below. */

                    /* Mobile Layout: 480px and below. */

                    body {

                    background-image: none;

                    }

                    .img-float-left{

                    float:left;

                    margin-right:2px;

                    }

                     

                    p {

                    font-size: 100%;

                    }

                     

                    .gridContainer {

                    margin-left: auto;

                    margin-right: auto;

                    width: 98.1818%;

                    padding-left: 0.909%;

                    padding-right: 0.909%;

                    background:rgba(255,255,255,0.6);

                    }

                     

                    #adaptiveMessage {

                    position: relative;

                    clear: both;

                    margin: 0;

                    width: 100%;

                    display: block;

                    background-color: #99C7E2;

                    font-family: Arial, Helvetica, sans-serif;

                    font-size: 9px;

                    }

                     

                    #header {

                    position: relative;

                    clear: both;

                    float: left;

                    margin-left: 0;

                    width: 100%;

                    display: block;

                    background-size: 100% 100%;

                    background-image: url(../_img/tfwebsiteslogo.png);

                    background-color: #FFF;

                    }

                     

                    #header:before {

                    content:"";

                    display:block;

                    padding-top:18%;

                    }

                     

                    .content{

                    position:  absolute;

                    top: 0;

                    left: 0;

                    bottom: 0;

                    right: 0;

                    }

                     

                    #menubar {

                    clear: both;

                    float: left;

                    margin-left: 0;

                    width: 100%;

                    display: block;

                     

                    }

                     

                    #article {

                    clear: both;

                    margin-left: 0;

                    width: 100%;

                    display: block;

                    }

                     

                    #article h2 {

                    font-family: Arial, Helvetica, sans-serif;

                    font-size: 100%;

                    color: #06C;

                    line-height: 112%;

                    margin-top: 4px;

                    margin-right: 0px;

                    margin-bottom: 5px;

                    margin-left: 0px;

                     

                    }

                     

                    #footer {

                    clear: both;

                    float: left;

                    margin-left: 0;

                    width: 100%;

                    display: block;

                    font-family: Arial, Helvetica, sans-serif;

                    font-size: 100%;

                    margin-top: 5;

                    margin-right: 0;

                    margin-bottom: 10;

                    padding-top: 5px;

                    border-top-width: medium;

                    border-top-style: solid;

                    border-top-color: #CCC;

                    border-right-color: #CCC;

                    border-bottom-color: #CCC;

                    border-left-color: #CCC;

                    padding-bottom: 10px;

                    border-bottom-width: medium;

                    border-bottom-style: solid;

                    }

                     

                    nav {

                    margin-left: 0;

                    display: block;

                    background: #455868;

                    font-size: 11pt;

                    font-family: 'PT Sans', Arial, sans-serif;

                    font-weight: bold;

                    border-bottom: 2px solid #283744;

                    border-bottom: 0;

                     

                    }

                     

                    nav ul {

                    display: none;

                    margin: 0;

                    padding: 0;

                     

                    }

                     

                    nav li {

                    display: block;

                    width:100%;

                    float: left;

                    color: #FFF;

                    background: #455868;

                    }

                     

                    nav a {

                    color: #fff;

                    display: block;

                    text-align: center;

                    text-decoration: none;

                    line-height: 40px;

                    }

                     

                    nav li a {

                    color: #FFF;

                    border-right: 1px solid #576979;

                    box-sizing: border-box;

                    -moz-box-sizing: border-box;

                    -webkit-box-sizing: border-box;

                    display: block;

                     

                    }

                     

                    nav a:hover, nav a:active, nav a:visited {

                    color: #FFF;

                    background-color: #8c99a4;

                    }

                    #pull {

                    font-size: 25px;

                    text-align: right;

                    }

                     

                     

                     

                     

                     

                    /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

                     

                     

                     

                    @media only screen and (min-width: 481px) {

                     

                    p {

                    font-size: 100%;

                     

                    }.gridContainer {

                    width: 98.8636%;

                    max-width: 768px;

                    padding-left: 0.5681%;

                    padding-right: 0.5681%;

                    }

                     

                    #header {

                    position: relative;

                    clear: both;

                    float: left;

                    margin-left: 0;

                    width: 100%;

                    display: block;

                    }

                     

                    #header:before {

                    content:"";

                    display:block;

                    padding-top:18%;

                    }

                     

                    .content{

                    position:  absolute;

                    top: 0;

                    left: 0;

                    bottom: 0;

                    right: 0;

                    }

                     

                    #article {

                    clear: both;

                    margin-left: 0;

                    width: 100%;

                    display: block;

                     

                    }

                     

                    #article h2 {

                    font-family: Arial, Helvetica, sans-serif;

                    font-size: 120%;

                    color: #06C;

                    line-height: 125%;

                    margin-top: 4px;

                    margin-right: 0px;

                    margin-bottom: 5px;

                    margin-left: 0px;

                    }

                     

                    #footer {

                    clear: both;

                    float: left;

                    margin-left: 0;

                    width: 100%;

                    display: block;

                    }

                     

                    nav li {

                    display: block;

                    width: 50%;

                    float: left;

                    color: #FFF;

                    background: #455868;

                    }

                     

                    }

                     

                     

                     

                    /* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

                     

                    @media only screen and (min-width: 769px) {

                     

                    body {

                    background-attachment: fixed;

                    background-image: url(../_img/background.gif);

                    background-repeat: no-repeat;

                    }

                     

                    p {

                    font-size: 100%;

                     

                    }.gridContainer {

                    width: 99.2424%;

                    max-width: 960px;

                    padding-left: 0.3787%;

                    padding-right: 0.3787%;

                    margin: auto;

                    }

                     

                    #header {

                    position: relative;

                    clear: both;

                    float: left;

                    margin-left: 0;

                    width: 100%;

                    display: block;

                    }

                     

                    #header:before {

                    display: block;

                    padding-top: 18%;

                    }

                     

                    .content{

                    position: absolute;

                    top: 0;

                    left: 0;

                    bottom: 0;

                    right: 0;

                    }

                     

                    #article {

                    clear: both;

                    margin-left: 0;

                    width: 100%;

                    display: block;

                    }

                     

                    #article h2 {

                    font-family: Arial, Helvetica, sans-serif;

                    font-size: 120%;

                    color: #06C;

                    line-height: 155%;

                    margin-top: 4px;

                    margin-right: 0px;

                    margin-bottom: 5px;

                    margin-left: 0px;

                    }

                    #footer {

                    clear: both;

                    float: left;

                    margin-left: 0;

                    width: 100%;

                    display: block;

                    }

                     

                    nav {

                    height: 40px;

                    width: 100%;

                    background: #455868;

                    font-size: 11pt;

                    font-family: 'PT Sans', Arial, sans-serif;

                    font-weight: bold;

                    border-bottom: 2px solid #283744;

                     

                    }

                     

                    nav ul {

                    padding: 0;

                    margin: 0 0;

                    width: 100%;

                    height: 40px;

                    color: #FFF;

                    display:block;

                    }

                     

                    nav li {

                    width:140px;

                    float: left;

                    color: #FFF;

                    background: #455868;

                    position:relative;

                    }

                     

                    nav a {

                    color: #fff;

                    width:100%;

                    text-align: center;

                    text-decoration: none;

                    line-height: 40px;

                    position:relative;

                    }

                     

                    nav li a {

                    color: #FFF;

                    border-right: 1px solid #576979;

                    box-sizing: border-box;

                    -moz-box-sizing: border-box;

                    -webkit-box-sizing: border-box;

                    }

                     

                    nav li:last-child a {

                    border-right: 0;

                    }

                     

                    nav a:hover, nav a:active, nav a:visited {

                    color: #FFF;

                    background-color: #8c99a4;

                    }

                     

                    nav a#pull {

                    display: none;

                     

                    }

                     

                    #designer {

                    clear: both; 

                    float: left;

                    margin-left: 0; 

                    width: 100%; 

                    display: block;}

                    }

                     

                    </style>

                     

                     

                     

                    </head>

                    <body>

                    <div class="container">

                    <div class="row">

                    <div class="col-md-12">

                    <div id="adaptiveMessage">This site is Responsive. Layout will change according to your device.</div>

                    <nav>

                    <ul>

                    <li><a href="index.htm">Home</a></li>

                    <li><a href="portfolio.htm">Portfolio</a></li>

                    <li><a href="effects.htm">Effects</a></li>

                    <li><a href="contact/index.htm">Contact</a></li>

                    </ul>

                    <a href="#" id="pull" style="padding: 10px;"><i class="fa fa-bars"></i></a>

                    </nav>

                    </div>

                    <div class="col-md-12">

                    <h2>Heading</h2>

                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>

                    </div>

                    </div>

                    </div>

                    </body>

                    </html>