Nav bar not working when published

Hi,
I used a bootstrap nav bar which looks just the job when I preview the page, but doesn’t come out right at all when published to host. Have I deleted something vital?

Thanks for any help

Hi @beckysquire,

Your CSS is missing on the Home page.

David

Thank you David, I’ll have to figure that one out - now I know what to look for!!

Just copy it from a other page to the home page.

Hi David,
Please excuse my ignorance, when I look in the tree version of my index file the css style sheet is shown as a link. Other pages do not seem to be any different, so I’m not sure what css style sheet I’m copying from where and to where. I’m sure it is obvious, but I haven’t worked it out yet.

Hi Becky,

You talk about bootstrap, but no bootstrap file is uploaded to your server!

You can check you code in Pinegrow by clicking the <> (code) icon.

On all pages except for the home page you have:

 <link rel="stylesheet" type="text/css" href="wpscripts/wpstyles.css">

And some inline css that better be copied to a external .css file and linked from all pages like the above link for example wpscripts/my-new-styles-sheet.css presuming that you put the css file in the folder wpscripts or just copy past the underneath code and above link to the home page in the <head>:

 <style type="text/css">
      .OBJ-1 { background:transparent url('wpimages/wpc5a9eef4_06.png') no-repeat 8px 15px; }
      .OBJ-2,.OBJ-2:link,.OBJ-2:visited { background-color:transparent;text-decoration:none;display:block;position:absolute; }
      .OBJ-2:focus { outline-style:none; }
      button.OBJ-2 { background-color:transparent;border:none 0px;padding:0;display:inline-block;cursor:pointer; }
      button.OBJ-2:disabled { pointer-events:none; }
      .OBJ-2.Inline { display:inline-block;position:relative;line-height:normal; }
      .OBJ-2 span,.OBJ-2:link span,.OBJ-2:visited span { color:#ffffff;font-family:Arial,sans-serif;font-weight:normal;text-decoration:none;text-align:center;text-transform:none;font-style:normal;left:4px;top:4px;width:76px;height:25px;line-height:25px;font-size:20px;display:block;position:absolute;cursor:pointer; }
      .OBJ-2:hover span { color:#b3b3b3; }
      .OBJ-2:active span,a:link.OBJ-2.Activated span,a:link.OBJ-2.Down span,a:visited.OBJ-2.Activated span,a:visited.OBJ-2.Down span,.OBJ-2.Activated span,.OBJ-2.Down span { color:#b3b3b3; }
      .OBJ-2.Disabled span,a:link.OBJ-2.Disabled span,a:visited.OBJ-2.Disabled span,a:hover.OBJ-2.Disabled span,a:active.OBJ-2.Disabled span { color:#b3b3b3; }
      .OBJ-3 { line-height:31px; }
      .OBJ-4,.OBJ-4:link,.OBJ-4:visited { background-color:transparent;text-decoration:none;display:block;position:absolute; }
      .OBJ-4:focus { outline-style:none; }
      button.OBJ-4 { background-color:transparent;border:none 0px;padding:0;display:inline-block;cursor:pointer; }
      button.OBJ-4:disabled { pointer-events:none; }
      .OBJ-4.Inline { display:inline-block;position:relative;line-height:normal; }
      .OBJ-4 span,.OBJ-4:link span,.OBJ-4:visited span { color:#ffffff;font-family:Arial,sans-serif;font-weight:normal;text-decoration:none;text-align:center;text-transform:none;font-style:normal;left:4px;top:4px;width:124px;height:25px;line-height:25px;font-size:20px;display:block;position:absolute;cursor:pointer; }
      .OBJ-4:hover span { color:#b3b3b3; }
      .OBJ-4:active span,a:link.OBJ-4.Activated span,a:link.OBJ-4.Down span,a:visited.OBJ-4.Activated span,a:visited.OBJ-4.Down span,.OBJ-4.Activated span,.OBJ-4.Down span { color:#b3b3b3; }
      .OBJ-4.Disabled span,a:link.OBJ-4.Disabled span,a:visited.OBJ-4.Disabled span,a:hover.OBJ-4.Disabled span,a:active.OBJ-4.Disabled span { color:#b3b3b3; }
      .OBJ-5,.OBJ-5:link,.OBJ-5:visited { background-color:transparent;text-decoration:none;display:block;position:absolute; }
      .OBJ-5:focus { outline-style:none; }
      button.OBJ-5 { background-color:transparent;border:none 0px;padding:0;display:inline-block;cursor:pointer; }
      button.OBJ-5:disabled { pointer-events:none; }
      .OBJ-5.Inline { display:inline-block;position:relative;line-height:normal; }
      .OBJ-5 span,.OBJ-5:link span,.OBJ-5:visited span { color:#ffffff;font-family:Arial,sans-serif;font-weight:normal;text-decoration:none;text-align:center;text-transform:none;font-style:normal;left:4px;top:4px;width:192px;height:25px;line-height:25px;font-size:20px;display:block;position:absolute;cursor:pointer; }
      .OBJ-5:hover span { color:#b3b3b3; }
      .OBJ-5:active span,a:link.OBJ-5.Activated span,a:link.OBJ-5.Down span,a:visited.OBJ-5.Activated span,a:visited.OBJ-5.Down span,.OBJ-5.Activated span,.OBJ-5.Down span { color:#b3b3b3; }
      .OBJ-5.Disabled span,a:link.OBJ-5.Disabled span,a:visited.OBJ-5.Disabled span,a:hover.OBJ-5.Disabled span,a:active.OBJ-5.Disabled span { color:#b3b3b3; }
      .OBJ-6,.OBJ-6:link,.OBJ-6:visited { background-image:url('wpimages/wp8655ec5b_06.png');background-repeat:no-repeat;background-position:0px 0px;text-decoration:none;display:block;position:absolute; }
      .OBJ-6:focus { outline-style:none; }
      button.OBJ-6 { background-color:transparent;border:none 0px;padding:0;display:inline-block;cursor:pointer; }
      button.OBJ-6:disabled { pointer-events:none; }
      .OBJ-6.Inline { display:inline-block;position:relative;line-height:normal; }
      .OBJ-6 span,.OBJ-6:link span,.OBJ-6:visited span { color:#ffffff;font-family:Arial,sans-serif;font-weight:normal;text-decoration:none;text-align:center;text-transform:none;font-style:normal;left:4px;top:4px;width:81px;height:25px;line-height:25px;font-size:20px;display:block;position:absolute;cursor:pointer; }
      .OBJ-6:hover span { color:#b3b3b3; }
      .OBJ-6:active span,a:link.OBJ-6.Activated span,a:link.OBJ-6.Down span,a:visited.OBJ-6.Activated span,a:visited.OBJ-6.Down span,.OBJ-6.Activated span,.OBJ-6.Down span { color:#b3b3b3; }
      .OBJ-6.Disabled span,a:link.OBJ-6.Disabled span,a:visited.OBJ-6.Disabled span,a:hover.OBJ-6.Disabled span,a:active.OBJ-6.Disabled span { color:#b3b3b3; }
      .OBJ-7,.OBJ-7:link,.OBJ-7:visited { background-color:transparent;text-decoration:none;display:block;position:absolute; }
      .OBJ-7:focus { outline-style:none; }
      button.OBJ-7 { background-color:transparent;border:none 0px;padding:0;display:inline-block;cursor:pointer; }
      button.OBJ-7:disabled { pointer-events:none; }
      .OBJ-7.Inline { display:inline-block;position:relative;line-height:normal; }
      .OBJ-7 span,.OBJ-7:link span,.OBJ-7:visited span { color:#ffffff;font-family:Arial,sans-serif;font-weight:normal;text-decoration:none;text-align:center;text-transform:none;font-style:normal;left:4px;top:4px;width:84px;height:25px;line-height:25px;font-size:20px;display:block;position:absolute;cursor:pointer; }
      .OBJ-7:hover span { color:#b3b3b3; }
      .OBJ-7:active span,a:link.OBJ-7.Activated span,a:link.OBJ-7.Down span,a:visited.OBJ-7.Activated span,a:visited.OBJ-7.Down span,.OBJ-7.Activated span,.OBJ-7.Down span { color:#b3b3b3; }
      .OBJ-7.Disabled span,a:link.OBJ-7.Disabled span,a:visited.OBJ-7.Disabled span,a:hover.OBJ-7.Disabled span,a:active.OBJ-7.Disabled span { color:#b3b3b3; }
      .C-1 { line-height:57.00px;font-family:"Times New Roman", serif;font-style:normal;font-weight:700;color:#000000;background-color:transparent;text-decoration:none;font-variant:normal;font-size:48.0px;vertical-align:0; }
      .C-2 { line-height:47.00px;font-family:"Times New Roman", serif;font-style:normal;font-weight:700;color:#000000;background-color:transparent;text-decoration:none;font-variant:normal;font-size:40.0px;vertical-align:0; }
      .P-1 { text-align:center;margin-bottom:0.0px;line-height:1px;font-family:"Times New Roman", serif;font-style:normal;font-weight:normal;color:#000000;background-color:transparent;font-variant:normal;font-size:14.0px;vertical-align:0; }
      .C-3 { line-height:25.50px;font-family:"Times New Roman", serif;font-style:normal;font-weight:normal;color:#000000;background-color:transparent;text-decoration:none;font-variant:normal;font-size:14.0px;vertical-align:0; }
      .OBJ-8 { background:#ffffff;padding-top:10px;padding-bottom:10px; }
      .P-2 { text-align:center;margin-bottom:4.0px;line-height:1px;font-family:"Times New Roman", serif;font-style:normal;font-weight:700;color:#000000;background-color:transparent;font-variant:normal;font-size:40.0px;vertical-align:0; }
      .C-4 { line-height:21.00px;font-family:"Times New Roman", serif;font-style:normal;font-weight:700;color:#000000;background-color:transparent;text-decoration:none;font-variant:normal;font-size:26.7px;vertical-align:40%; }
      .P-3 { text-align:center;margin-bottom:4.0px;line-height:1px;font-family:"Times New Roman", serif;font-style:normal;font-weight:700;color:#000000;background-color:transparent;font-variant:normal;font-size:27.0px;vertical-align:0; }
      .C-5 { line-height:48.00px;font-family:"Times New Roman", serif;font-style:normal;font-weight:700;color:#000000;background-color:transparent;text-decoration:none;font-variant:normal;font-size:26.7px;vertical-align:0; }
      .OBJ-9 { background:#ffffff;padding:10px; }
      .P-4 { text-align:center;line-height:1px;font-family:"Trebuchet MS", sans-serif;font-style:normal;font-weight:normal;color:#000000;background-color:transparent;font-variant:normal;font-size:24.0px;vertical-align:0; }
      .C-6 { line-height:43.50px;font-family:"Trebuchet MS", sans-serif;font-style:normal;font-weight:normal;color:#000000;background-color:transparent;text-decoration:none;font-variant:normal;font-size:24.0px;vertical-align:0; }
      .P-5 { text-align:center;line-height:1px;font-family:"Trebuchet MS", sans-serif;font-style:normal;font-weight:normal;color:#000000;background-color:transparent;font-variant:normal;font-size:21.0px;vertical-align:0; }
      .C-7 { line-height:40.50px;font-family:"Trebuchet MS", sans-serif;font-style:normal;font-weight:normal;color:#000000;background-color:transparent;text-decoration:none;font-variant:normal;font-size:21.3px;vertical-align:0; }
      .C-8 { line-height:36.00px;font-family:"Trebuchet MS", sans-serif;font-style:normal;font-weight:normal;color:#000000;background-color:transparent;text-decoration:none;font-variant:normal;font-size:18.7px;vertical-align:0; }
      .P-6 { text-align:center;line-height:1px;font-family:"Trebuchet MS", sans-serif;font-style:normal;font-weight:normal;color:#000000;background-color:transparent;font-variant:normal;font-size:19.0px;vertical-align:0; }
      .P-7 { text-align:center;margin-bottom:0.0px;line-height:1px;font-family:"Trebuchet MS", sans-serif;font-style:normal;font-weight:normal;color:#000000;background-color:transparent;font-variant:normal;font-size:21.0px;vertical-align:0; }
      .C-9 { line-height:27.00px;font-family:"Trebuchet MS", sans-serif;font-style:normal;font-weight:normal;color:#000000;background-color:transparent;text-decoration:none;font-variant:normal;font-size:21.3px;vertical-align:0; }
      .C-10 { line-height:24.00px;font-family:"Trebuchet MS", sans-serif;font-style:normal;font-weight:normal;color:#000000;background-color:transparent;text-decoration:none;font-variant:normal;font-size:18.7px;vertical-align:0; }
      .C-11 { line-height:24.00px;font-family:"Trebuchet MS", sans-serif;font-style:normal;font-weight:normal;color:#000000;background-color:transparent;text-decoration:none;font-variant:normal;font-size:18.7px;vertical-align:0; }
      a.C-11:link, a:link .C-11, a.C-11:visited, a:visited .C-11, a.C-11:hover, a:hover .C-11, a.C-11:active, a:active .C-11 { color:#004200;text-decoration:underline; }
      .OBJ-10 { background:#ffffff; }
    </style>

This needs to be in the head or at the bottom:

<script type="text/javascript" src="[wpscripts/jquery.js](http://knightonconcerts.co.uk/wpscripts/jquery.js)"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a.ActiveButton").bind({ mousedown:function(){if ( $(this).attr('disabled') === undefined ) $(this).addClass('Activated');}, mouseleave:function(){ if ( $(this).attr('disabled') === undefined ) $(this).removeClass('Activated');}, mouseup:function(){ if ( $(this).attr('disabled') === undefined ) $(this).removeClass('Activated');}});
});
</script>

This needs to be at the bottom:

type or paste code here
<script type="text/javascript" src="[wpscripts/jsMenu.js](http://knightonconcerts.co.uk/wpscripts/jsMenu.js)"></script>
<script type="text/javascript">
wpmenustack.setRollovers([['nav_3_B1',''],['nav_3_B2',''],['nav_3_B3',''],['nav_3_B4','nav_3_B4M',{"m_vertical":true}],['nav_3_B5','']]);
wpmenustack.setMenus(['nav_3_B4M'],{"m_vOffset":5,"m_vAlignment":3,"m_menuStyle":{"border":"0px none"},"m_rowStyle":{"border":"0px none"},"m_linkNormalStyle":{"fontSize":"13px","fontFamily":"\"Trebuchet MS\",sans-serif","textAlign":"center","color":"#e6e6e6","backgroundColor":"#000000","fontWeight":"normal","textDecoration":"none","fontStyle":"normal"},"m_linkRolloverStyle":{"color":"#333333","backgroundColor":"#777777","textDecoration":"none"},"m_linkPopupStyle":{"backgroundImage":"url(wpimages/wp41d4fac7.gif)"},"m_linkRolloverPopupStyle":{"backgroundImage":"url(wpimages/wpc17dd3a5.gif)"}});
</script>