Bootstrap2/3 Menu not working now?

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

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>

Similar Messages

My iMac mouse right click does not work now

Hi all,
My iMac mouse right click does not work now. It was fine a couple of days ago.
Right click is definitely enabled, I have checked it several times.
A Google search revealed that in Firefox it could be that I'm not using the latest version of Firebug. I have auto updates on and Firebug is the latest version 1.11.3
I use right click for correcting spell checked words, instead of a suggested correct spelling I get the 'open in a new tab' menu.
In Firefox when I right click to open in a new tab I get the menu but it does nothing.
It is driving me mad
Any help will be greatly appreciated,
Thank you
P.S. thought it was suddenly working when I did the spell check in this post but it was the left click doign it....

I don't use Firefox so I can't test it, but it might be something to do with a preference setting. Have a look at this link (ignore all the instructions), just look at the image of the preferences, there appears to be a setting in Javascript preferences relating to contextual menus. Check to see what your settings are:
http://stackoverflow.com/questions/16377381/disable-firefoxs-silly-right-click-c ontext-menu

Photoshop CS5 - colour settings in Print menu not working after update Mac OSX maverick

After upgrading to Maverick OSX on the iMac printing from CS5 via Epson R3880 is not working correctly. In Print Settings menu the drop downs for Colour and Colour Settings are greyed out. I already re-installed PS and installed the new drivers from epson. Any ideas?

but after choosing PS manages color, the options in the print menu for choosing color (color or b&W) and color settings are not available anymore. They used to be the last three years I printed with photoshop/epson 3880.
Instead they are greyed out now.
attached screenshot:
Op 30 mei 2014, om 01:47 heeft Chris Cox <[email protected]> het volgende geschreven:
Photoshop CS5 - colour settings in Print menu not working after update Mac OSX maverick
created by Chris Cox in Photoshop General Discussion - View the full discussion
If Photoshop managed color, then the controls in the printer driver are supposed to be grayed out - that's how Apple specifies drivers to work (because only one party should be managing the print color).
So what you're describing is perfectly normal.
Please note that the Adobe Forums do not accept email attachments. If you want to embed a screen image in your message please visit the thread in the forum to embed the image at https://forums.adobe.com/message/6420209#6420209
Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page:
To unsubscribe from this thread, please visit the message page at . In the Actions box on the right, click the Stop Email Notifications link.
Start a new discussion in Photoshop General Discussion by email or at Adobe Community
For more information about maintaining your forum email notifications please go to http://forums.adobe.com/thread/416458?tstart=0.

Audition CS6 Help menu not working

I have downloaded Audition CS6. When I go to 'Help' i get error 10. Is there no help file with the trial?

Hi All,
I found this on the web and it works!
<http://forums.adobe.com/message/4417566#4417566> CS6 Help Menu Not Working
This does not apply to one application, but is a suite wide fix.
I had been running the CS6 Master Collection trial download version and the help menu, specifically the online "Help" and "Support Center" listed on the main help menu dropdowns of all applications within the suite, was not working, able to connect, or an error that the folder did not exist (apparently corrupted).
Once I just got the CS6 Master Collection (DVDs) I uninstalled the trials, then installed the hard copy version, with the normal reboot in between. The Help menus still did not work.
This is what I'm running. : Windows 7 Pro 64-bit
I called Adobe support and the following was my solution for both my desktop and netbook with this problem.
1.    Close all running Adobe applications.
2.    In the directory C:/Program Files (x86)/Adobe/ Delete the "Adobe Help" folder.
(C:Program Files (x86)/Adobe/Adobe Help/)
3.    Reboot
4.    Then go to Adobe.com/support/chc/   (this is the "community help center")
5.    Click under "Step 2" the "Install Now*" button.
6.    On one of the windows that open there is a Preferences drop down menu. Select the one that allows online help connection as well as local.
7.    Click "download" to begin the folder download. The downloaded folders are more than 1 GB for the CS6 Master Suite help files. Watch at the bottom left of the download window to see the small progress meter.
8.    Once done, reboot.
My CS6 Master Collection help menus throughout were fixed by completing the above.
Thanks Tom! ...at Adobe support for this fix procedure.
I hope this helps someone else out there.
This does not apply to one application, but is a suite wide fix.

Help needed I updated my ipad2 with iOS5 but few of my dashbaords are not working now can any one let me know how to downgrade the OS

Help needed I updated my ipad2 with iOS5 but few of my dashbaords (HTML5) are not working now ,can any one let me know how to downgrade the OS as we have a meeting coming up .. its urgent

Downgrading the iOS is not supported. If you are using Safari this try clearing its cache via Settings > Safari.
If that doesn't work then try closing Safari completely and then re-open it : from the home screen (i.e. not with Safari 'open' on-screen) double-click the home button to bring up the taskbar, then press and hold any of the apps on the taskbar for a couple of seconds or so until they start shaking, then press the '-' in the top left of the Safari app to close it, and touch any part of the screen above the taskbar so as to stop the shaking and close the taskbar.
A third option is a reset : press and hold both the sleep and home buttons for about 10 to 15 seconds (ignore the red slider), after which the Apple logo should appear - you won't lose any content, it's the iPad equivalent of a reboot.

My iPhone 5 rear camera was not working, now the rear camera is also not working. I have procured the phone in 2012 from San Fransico. USA Can anyone help me, please?

My iPhone 5 rear camera was not working, now the rear camera is also not working. I have procured the phone in 2012 from San Fransico. USA Can anyone help me, please?

No one here can help you. If your phone is no longer under warranty, a third-party repair shop will most likely be your best bet. You can't mail the phone to Apple, in the US, as Apple does not accept international shipments. You could mail it to a friend/relative, in the US, & they could take it to an Apple store for you. Some Apple stores repair iPhones. Otherwise, you're looking at an out of warranty replacement.
Good luck.

HT4235 iPod nano 6th generation, syncing with audiobooks does not work now, had been working. Sync test says: No iPod touch, iPhone, or iPad found. Connectivity test OK, no physical problems, iTunes shows the iPod. Any clues what to do?

iPod nano 6th generation, syncing with audiobooks does not work now, had been working. Sync test says: No iPod touch, iPhone, or iPad found. Connectivity test OK, no physical problems, iTunes shows the iPod. Any clues what to do?

Hmm.. Thank you for the response.
Have you tried using the iPod with another user account or computer, to help narrow down whether the problem lies with the computer, account, or the iPod itself?
Maybe try reformatting it, using the tools provided by Windows. Instructions on how to reformat your iPod can be found in this article.
http://www.methodshop.com/gadgets/ipodsupport/erase/index.shtml
B-rock

HT204230 this device is not longer eligible for creating a free i cloud accounting on my Iphone 5s , my old not working now cannot opened again just when i try make a free email this Message showed up how i can fix it please help me iPhone 5s, iOS 8.3

this device is not longer eligible for creating a free i cloud accounting on my Iphone 5s , my old not working now cannot opened again just when i try make a free email this Message showed up how i can fix it
please help me
iPhone 5s, iOS 8.3

Create a new AppleID on a different iOS device or on a computer. You will
then be able to use that newly created AppleID on your iPhone.

How can put photo comment in Facebook in safari or other browser, am using ipad 4 and this was working perfectly but unfortunately it's not working now..the attach photo feature is there but can't attach, please help me in this

How can put photo comment in Facebook in safari or other browser, am using ipad 4 and this was working perfectly but unfortunately it's not working now..the attach photo feature is there but can't attach, please help me in this

How can put photo comment in Facebook in safari or other browser, am using ipad 4 and this was working perfectly but unfortunately it's not working now..the attach photo feature is there but can't attach, please help me in this

I lost my apple shufle's(2 generation) charger 3 months ago,i bought a new one and the ipod is not working now.its completaly dead

i lost my apple shufle's(2 generation) charger 3 months ago,i bought a new one(charger) and the ipod is not working now.its completaly dead.when i lost the charger the battery was finished.now with the new charger its like its broken,help please

There is no way to remotely track or disable an iPod nano, either for you or Apple. As it can't connect to the Internet on its own, Find my iPhone isn't available for it.
(84600)

My iPod nano 6G stop working suddenly; After i reset it and even afetr put it in "stand by" mode by accessing deagnostic mode, it is still not working; Now i can access it sometimes (the main screen), but is not playing and is too slow. How can i fix it

My iPod nano 6G stop working suddenly; After i reset it and even afetr put it in "stand by" mode by accessing deagnostic mode, it is still not working; Now i can access it sometimes (the main screen), but is not playing and is too slow. How can i fix it

If you do not find a solution in the iPod nano (6th generation) - User Guide, suggest that you call AppleCare if still under warranty or take a trip to your local Apple Store or AASP.

I activated my cloud membership and it worked. I just downloaded Lightroom 5.6 upgrade and it asked for a serial number. The same activation number I used before will not work now.

I activated my cloud membership and downloaded Lightroom 5.5. Today, I downloaded Lightroom 5.6 and it asked for a serial number before it would open. Why did the same serial number that worked 2 weeks ago not work now?

I activated my cloud membership and downloaded Lightroom 5.5. Today, I downloaded Lightroom 5.6 and it asked for a serial number before it would open. Why did the same serial number that worked 2 weeks ago not work now?

Serial number provided with download does not work, now what?

serial number provided with download does not work, now what?

Chrish29593217 you are welcome to contact our directly at Contact Customer Care. What Adobe software title are you facing difficulties with?

My iphone 4 fell down from 3 feet height and display is not working now, phone is functioning with calls and messages etc.. except no display :( please advise me a corrective action...

my iphone 4 fell down from 3 feet height and display is not working now, phone is functioning with calls and messages etc.. except no display please advise me a corrective action...

Take it to an Apple Store and see about getting an out of warranty replacement. I believe it will run you about $150.

I have iphone 4 and i used it for a one and half years.i used it in sri lanka and doha qatar,recently i update it i.o.s 7, then it was working.after i.o.s 7.0.3 came i again updeted it and now my phone network is not working.now phone is locked.pls help.

i have iphone 4 and i used it for a one and half years.i used it in sri lanka and doha qatar also..,recently i update it i.o.s 7, then it was working.after i.o.s 7.0.3 came i again updeted it and now my phone network is not working.now phone is locked.pls help.

I am seeing if I can get another battery even though I do not believe that is the issue. It keeps giving me vdd_under which I believe is under voltage, maybe it is just a faulty battery? It charges up like normal and functions normal (when plugged in, or above 90%) but it gives under voltage warnings and shuts down when in heavy use (using camera or going back and forth to imessage). When just sitting idle it doesn't seem to turn off until that 55-60% mark. It may just be a faulty battery because I feel I installed all of the other cables correctly when replacing the screen, and I don't think those connections should affect the battery anyway except for maybe the logic board cable (the 2nd cable to be unplugged after the battery cable) I guess I could clean that out as well with isopropyl just in case.
Any other suggestions would be helpful... and I will get back to you if a new battery helps. Thanks!

Bootstrap2/3 Menu not working now?

Similar Messages

Maybe you are looking for