# Dreamweaver mobile sample/template assistance required



## icp_nz (Apr 5, 2011)

Hi all

Ok so using Dreamweaver CS6, File > New > Page from Sample > Mobile Starters > jQuery Mobile

Have everything working great for a mobile site I need to create urgently bar one thing, I can't get what I want for the menu

Menu on the homepage - great. Easy enough to add the same menu to every page but that's no good, I want a collapsible menu to display on every other page bar the homepage so users don't have to go 'Back' to get to the menu. I'd like this menu to be collapsible and already collapsed on each sub-page (every non-homepage page) that can be tapped on to display each menu item

Is anyone able to assist? Do you need my mobile site code or can you work off the Mobile Starter Sample one that I'm using?

Cheers :banghead:


----------



## icp_nz (Apr 5, 2011)

Anyone?


----------



## icp_nz (Apr 5, 2011)

Used jQuery mmenu and got everything pretty much working bar the actual links themselves won't work - frick!!!!!!!!!

Can anyone assist? Either using mmenu or another way that actually works?

Cheers


----------



## DDAoN (Mar 19, 2011)

icp_nz, I'm sorry for not getting to this sooner. Things have been a bit...stressful lately. I'm not sure I'm following what it is that you're asking to do. It sounds like you got your menu bar just fine and can add it to your different pages (I still suggest you work on bringing your website out of the 20th century).

What part are you having trouble with?

I'm sorry for not grasping it from what you've posted, I may simply be too tired to have understood. ^^'


----------



## icp_nz (Apr 5, 2011)

What do you mean bringing it out of the 20th century??????????

I have a menu on the homepage, e.g.:








On all other pages I don't want this full menu, I want the hamburger button on the top left/right corner that when tapped will pop a menu out from the side for users to navigate

I don't know how to explain it any clearer :devil:


----------



## DDAoN (Mar 19, 2011)

icp_nz, I'm sorry. It was meant to be a bit of light humour, I meant no offense.

As for your collapsible navbar, are you currently using a premade framework (ie. Bootstrap or Boilerplate)? If so, they likely already have something for this. However, since you noted you were using a jQuery template from Dreamweaver, I'm going to assume you're not using a framework. So, here's a quick little solution for what you're asking:

```
<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="//code.jquery.com/jquery-git.js"></script>
    <style type="text/css">
      .sr-only {
        position: absolute;
        width: 0;
        height: 0;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        border: 0;
      }

      .navbar-toggle {
        margin: 0;
        overflow: visible;
        text-transform: none;
        cursor: pointer;
        padding: 9px 10px;
        margin-top: 8px;
        margin-right: 15px;
        margin-bottom: 8px;
        background-color: transparent;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 4px;
        border-color: #ddd;
      }

      .navbar-toggle .icon-bar {
        display: block;
        background-color: #ddd;
        height: 0.3em;
      }
    </style>
    <script type="text/javascript">
      $(function() {
        $('.navbar-toggle').click(function() {
          tar = $($(this).data('target'));
          if(tar.css('display') == 'none') {
            $(tar).css({display: 'initial'});
          } else {
            $(tar).css({display: 'none'});
          }
        });
      });
    </script>
  </head>

  <body>
    <div class="navbar-toggle" data-target="#navbar">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </div>
    <div id="navbar" style="display: none;">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
        <li><a href="#">Link 6</a></li>
      </ul>
    </div><!--/#navbar -->
  </body>
</html>
```
JSFiddle: Edit fiddle - JSFiddle

*Note*: I didn't apply any CSS to the actual navbar unordered list, but this code won't interfere with any styling you already use UNLESS it calls a specific path to a class/id.

This is using a structure similar to that found in Bootstrap framework, but the CSS for the "hamburger" button and jQuery were written by me. Sizing and coloring can be tweeked in the CSS and this allows you to have multiple collapsible contents. The data-target attribute of the button defines the id of the corresponding menu to show/hide. It also works whether the menu begins hidden (as is) or shown (remove the style attribute from the target navbar).

It is not position specific, so you can place the button wherever you'd like and the navbar on the opposite side of the page from the button and it would still work, though I'd recommend keeping them together.

Again, I'm sorry for offending you, that had not been my intent.


----------



## icp_nz (Apr 5, 2011)

Haha no worries no need to apologise !!

Looks good! But, before I implement it, is there a way to have it push across the screen from the side and place a shadow on the page itself and then push back? Save me doing it twice


----------



## DDAoN (Mar 19, 2011)

I'm sorry, I'm not following. Laying the navbar horizontally instead of vertically is a matter of applying CSS to the LI elements to display as inline-blocks (assuming I understood that part correctly). But I'm mostly confused about the shadow part. :S


----------



## icp_nz (Apr 5, 2011)

You know, like this..


----------



## DDAoN (Mar 19, 2011)

Alright, so, are you wanting this menu to act that way on both desktop and mobile?


----------



## icp_nz (Apr 5, 2011)

No, no, desktop is fine

I just want this menu on all sub-pages of our mobile site so the full menu as per screenshot #5 isn't on every mobile page

Note that we have only one index.php page for mobile site and all pages code is within so they aren't "separate" pages


----------



## DDAoN (Mar 19, 2011)

Here's a JSFiddle of what I believe matches your request: Edit fiddle - JSFiddle

It's a variation of the original I posted above, and, as before, the jQuery is entirely of my own writing, but it uses a bit more complex jQuery to provide the effect you're looking for. I also applied styling based upon the screenshot you provided (first, not the second). It's gradient *should* work in most browsers (even IE6 [don't hold your breathe for that version, though]).

I set it up so that you could apply a class of "left" or "right" to the menu and a CSS width value for the menus' id (not the class!) and the jQuery will do all the positioning. This will allow you to have multiple navbars, even on the same side, and there shouldn't be any issues with calling them (I didn't have a chance to do any thorough testing beyond making it work for your purposes).

Here's the single file equivalent to the JSFiddle:

```
<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
    <style type="text/css">
      body {
        overflow-x: hidden;
      }

      /* Screen Readers */
      .sr-only {
      position: absolute;
      width: 0;
      height: 0;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0,0,0,0);
      border: 0;
      }

      /* "Hamburger" Button */
      .navbar-toggle {
        margin: 0;
        overflow: visible;
        text-transform: none;
        cursor: pointer;
        padding: 9px 10px;
        margin-top: 8px;
        margin-right: 15px;
        margin-bottom: 8px;
        background-color: transparent;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 4px;
        border-color: #ddd;
        width: 1.5em;
      }

      /* "Hamburger" Button Bars */
      .navbar-toggle .icon-bar {
        display: block;
        background-color: #ddd;
        height: 0.3em;
        margin: .15em 0;
      }

      /* Menu Item Styling */
      #navbar {
        width: 15em;
        background-color: #ebebeb;
      }

      #navbar ul {
        padding: 0;
      }

      #navbar ul li {
        display: block;
        border-top: 1px solid #fefefe;
        border-bottom: 1px solid #cccccc;
      }

      /* Background gradient */
      #navbar ul li a {
        display: block;
        padding: .5em;
        color: #000000;
        text-decoration: none;
        font-weight: bold;
        font-family: Verdana, Geneva, sans-serif;
        background: #fcfcfc; /* Old browsers */
        background: -moz-linear-gradient(top,  #fcfcfc 0%, #eeeeee 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfcfc), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #fcfcfc 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #fcfcfc 0%,#eeeeee 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #fcfcfc 0%,#eeeeee 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #fcfcfc 0%,#eeeeee 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
      }

      #navbar ul li a:hover {
        background: #eeeeee; /* Old browsers */
        background: -moz-linear-gradient(top,  #eeeeee 0%, #fcfcfc 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#fcfcfc)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #eeeeee 0%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #eeeeee 0%,#fcfcfc 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #eeeeee 0%,#fcfcfc 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #eeeeee 0%,#fcfcfc 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */
      }
    </style>
    <script type="text/javascript">
      $(function() {
        defaultBodyMargin = $('body').css('margin');
        $('.slider').each(function() {
          id = '#' + $(this).attr('id');
          if($(this).hasClass('right')) {
            $(id).css({'margin-right': '-' + $(id).css('width'), position: 'absolute', top: 0, right: 0, bottom: 0});
          } else {
            $(id).css({'margin-left': '-' + $(id).css('width'), position: 'absolute', top: 0, bottom: 0, left: 0});
          }
        });
        $('.navbar-toggle').click(function() {
          tar = $($(this).data('target'));
          if($('body').css('margin') == defaultBodyMargin) {
            if(tar.hasClass('right')) {
              $('body').animate({'margin-right': (parseInt($('body').css('margin-right')) + parseInt(tar.css('width'))) + 'px'});
              tar.animate({'margin-right': 0});
            } else {
              $('body').animate({'margin-left': (parseInt($('body').css('margin-left')) + parseInt(tar.css('width'))) + 'px'});
              tar.animate({'margin-left': 0});
            }
          } else {
            $('body').animate({'margin': defaultBodyMargin});
            if(tar.hasClass('right')) {
              tar.animate({'margin-right': '-' + $(id).css('width'), position: 'absolute', top: 0, right: 0, bottom: 0});
            } else {
              tar.animate({'margin-left': '-' + $(id).css('width'), position: 'absolute', top: 0, bottom: 0, left: 0});
            }
          }
        });
      });
    </script>
  </head>

  <body>
    <div class="navbar-toggle" data-target="#navbar">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </div>
    <div id="navbar" class="slider">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
        <li><a href="#">Link 6</a></li>
      </ul>
    </div><!--/#navbar -->
  </body>
</html>
```
Styling of the bars and items is entirely customizable in the CSS, but you shouldn't do anything with the positioning. The jQuery will apply the positioning based upon whether you designate the class of "left" or "right" (defaulting to left). Basically, if you don't say it's goes of the right, it'll go on the left.

I hope this helps. ^^


----------



## icp_nz (Apr 5, 2011)

My man! That's what I'm talking about, but if I click the hamburger button it'll open the menu all nice and fancy, and when I click it again it doesn't close it it just pushes the hamburger button further across.. ?


----------



## DDAoN (Mar 19, 2011)

What browser/platform are you encountering this? It's not doing it on my Galaxy S4, Galaxy S6, and Galaxy Note 10.1 2014 in their stock browsers. I'd try on iOS devices, but I'd need to build a new image, my previous doesn't work with updated VM software. :S


----------



## icp_nz (Apr 5, 2011)

Just on the JSFiddle on PC

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

EDIT: Oh, and also when the main page is tapped can the menu also auto-hide again?


----------



## DDAoN (Mar 19, 2011)

Alright, I assume you're using IE, then. A little searching and I realized what the problem is: IE.

That's not ENTIRELY true, but, bleh. Long story short, officially the shorthand attributes of CSS are not supported by the .css() function of jQuery. However, in all major browsers (except IE) there rarely any issues with utilizing them.

So, I modified the jQuery to test specifically against the margin-right and margin-left attributes, rather than just margin. Here's the updated JSFiddle (tested in IE10 and IE11): Edit fiddle - JSFiddle

My apologies for overlooking that. As for the minimizing of the menu when clicking elsewhere, I'll see what I can do (there are premade solutions for all this, I'm toying around because I've never made one from scratch. ^^').


----------



## icp_nz (Apr 5, 2011)

Nope I'm not using IE I'm using FF and it happens 

New JSFiddle works  Thanks


----------



## DDAoN (Mar 19, 2011)

Interesting. I didn't have a problem in my FF. :S


----------



## icp_nz (Apr 5, 2011)

Can't seem to get your code or the one I was working on to work :S :S :S :S

Do you think I would be able to send you the zipped up files of the page and can you make the menu I created work? Failing that, then your one? My one works fine except the actual links don't take you to the section/page they're supposed so - they don't work at all - I think it may be a bug with mmenu jQuery script

Thank you again for all of your help!


----------



## DDAoN (Mar 19, 2011)

Go ahead, but I may not be able to get to it until tomorrow.


----------



## icp_nz (Apr 5, 2011)

That is absolutely fine. I will go through the files now, compress into a folder and send. How do you want me to send? PM attachment? Or link


----------



## icp_nz (Apr 5, 2011)

DDAoN said:


> Go ahead, but I may not be able to get to it until tomorrow.


Hey just wondering if you've had a chance to have a look at the file I sent you yet? 

Can I remove the zip file from our web server?


----------



## DDAoN (Mar 19, 2011)

Yes, I'm sorry. I've been without Internet all weekend. ISP kept saying they could see my modem but I still couldn't get a connection (even bypassing router). They finally just replaced the modem and I got back on yesterday afternoon. I'd've worked on it then, but I had schoolwork to take care of.

I have the archive, so you can feel free to remove it from your server. Work permitting, I'll take a look this afternoon.


----------



## icp_nz (Apr 5, 2011)

Oh no haha it sucks having no Internet! We rely on it so much these days!

Ok no worries - I'll wait to hear from you after you've had a look


----------



## DDAoN (Mar 19, 2011)

I'm sorry to say that it'll be a few days before I can get to it. I had a car accident yesterday. My left arm is entirely out of commission and my right hand is hindered by a brace. I'll get on this as soon as I'm able, but it's taken me 6 minutes just to type this. If you'd like, another of our programmers could take a look at it.


----------



## icp_nz (Apr 5, 2011)

Oh no that is not good news I hope you have a speedy recovery! It is up to you. If there is someone else who can help while you are recovering then that is ok or if I must wait I can wait.


----------



## wmorri (May 29, 2008)

Hi,

If you catch me up on your current situation I can take a look at it.


----------



## icp_nz (Apr 5, 2011)

Hi ok so I have developed a simple mobile website and have it correctly forwarding to this site from the full site when a mobile device is detected and then I use a cookie to force back to desktop from mobile if requested which expires on session end/web browser close

Now I just need a nice hamburger style menu for all sub-pages of the mobile site

Can I send you think link to download the mobile site so you can see the menu I have placed in there and how it isn't working correctly?


----------



## wmorri (May 29, 2008)

Sure shoot me a pm and I will take a look at it for you.


----------



## icp_nz (Apr 5, 2011)

Done 

Please let me know when downloaded so I can remove


----------



## wmorri (May 29, 2008)

Hi,

I downloaded your folder and have taken a look. It doesn't look like you have created pages for Services, Technology, About or Contact. I would start with just creating the menu for each and copying the parts that you need, and checking that they work. If I am missing something please let me know.

Other than that, please let me know if there is anything else I can help you with.


----------



## icp_nz (Apr 5, 2011)

Hi

All pages are within the one file, if you scroll down you can see the code broken into sections for each page. I used the mobile template from Dream Weaver CS6 and adapted to suit. It doesn't use separate page files.


----------



## icp_nz (Apr 5, 2011)

wmorri said:


> Hi,
> 
> I downloaded your folder and have taken a look. It doesn't look like you have created pages for Services, Technology, About or Contact. I would start with just creating the menu for each and copying the parts that you need, and checking that they work. If I am missing something please let me know.
> 
> Other than that, please let me know if there is anything else I can help you with.


Hey wmorri

Do you need any further information re; where the page content is in the index file? Or anything else?

Thank you


----------



## icp_nz (Apr 5, 2011)

Is anyone else able to assist?


----------



## DDAoN (Mar 19, 2011)

bleh, Stupid misclick cleared my original post. Short version:

I'm back and have had a look at the code. The issue is with the jquery.mmenu.min.all.js, which is preventing internal anchors. If you change the links to non-internal anchors the menu works perfectly. I could modify the JavaScript, or write a patch (maybe). The patch would allow you not have to edit your current code, with exception of adding a snippet.

Second, I noticed the targets of your links (ie. <div data-role="page" id="services"></div>) uses an id. Internal anchors require the targets to use a name, instead (ie. <div data-role="page" name="services"></div>). If I can get the patch working, it won't matter that an id is used, the patch would actually target that.

I'll let you know if I get it working.


----------



## icp_nz (Apr 5, 2011)

Hey mate, ah ok I completely missed that. JS isn't my forte 

Great, if you can get it working whatever way is easier and faster for you then I'm happy to go that route - as long as it works on all popular web browsers on computers and mobile devices

Cheers


----------



## DDAoN (Mar 19, 2011)

Alright, so it turned out to be a bit more complicated of a scenario than I expected (I [for some reason] didn't realize the content of the other "pages" was set to not display).

For the sake of other users, I'm going to clarify a little of the background of your situation, but I won't use any of your content/code.

*Situation*
Mobile site with all pages loaded into a single file with a jQuery collapsible menu display the pages. All other "pages" are have the CSS "display: none;" applied to prevent multiple pages from being visible at any given time. There's nothing particularly special about this set-up (actually quite common). Here's the layout of the site:

```
html
├head
│├Linked File: custom_styles.css
│├Linked File: jquery-1.6.4.min.js *
│├Linked File: jquery.min.js (1.7.2) *
│├Linked File: jquery.mobile-1.0.min.js **
│├Linked File: jquery.mmenu.all.css ***
│├Linked File: jquery.mmenu.min.all.js ***
│├Script: jquery.mmenu activation script
│├Linked File Archivo Narrow (font) ****
│├Linked File: Ubuntu (font) ****
│└Linked File: jquery.mobile.structure-1.0.min.css **
└body
 ├div#page1
 │├div#top-line
 ││└"Hamburger" Button
 │├img (Logo)
 │└div#page-padding
 │ └div#content
 │  ├nav#menu
 │  │├Link #1
 │  │├Link #2
 │  │├Link #3
 │  │├Link #4
 │  │└Link #5
 │  └{Page Content}
 ├div#page2
 │├div#top-line
 │├img (Logo)
 │└div#content
 │ └{Page Content}
 └div#page...

* - Official jQuery File
[b]Note[/b]: Please note that 1.7 had a "significant" update to syntax and acceptable code. The only time you should ever have 2 versions of jQuery are when you are using plug-ins that cross that threshold. If all your plug-ins are on either side of that threshold, I highly recommend utilizing only the newest version for that side.
** - Official jQuery Mobile File
*** - jQuery mmenu extension (https://github.com/jackncoke/jquery-mmenu)
**** - Google hosted File
```
The navigation collapses/expands as expected, but it can only navigate to non-internal anchors (meaning an anchor whose "href" is to a file or external website, not an elements' "name" [ie. href="page2.php" works, href="http://www.google.com/" works, href="#page2" does not work]).

*Problem Summary*

Given the intent of the website is to retain all content for the separate pages in a single file and to display only the selected page, the need isn't to move the browser to that section of the page (traditional method). Instead, we need to hide the section (page) previously visible while applying identical visibility settings to the selected section (to maintain uniformity of appearance).

*Play-by-Play of Resolution*
I wrote a jQuery snippet to "transfer" the attributes of the active "page" to the selected one. That worked.

However, I thought I'd broken it then (the menu option disappeared). Looking at your code, you structured it so the menu button is in every "page" instead of just in the "master" template. Huge no-no, especially since you had the actual menu in the first page also (once you goto another page it can't display a child element of a hidden parent). So, I moved that, too. Yeah, that worked!

Next was the positioning of the "pages". The jQuery you originally used gave your default CSS that positioned the page content at 0px from the top of the parent div. My reasoning for why you put the menu button is all the pages was to offset this. Well, I just added a tidbit of CSS so the pages are offset by the 50px (40px height + 10px margin-bottom). This didn't work. Looking then at the order of CSS applied, I found that your custom CSS was applied first, also a big no-no. I moved the stylesheet link so that your custom CSS applies last (overriding the other default values applied by your various other linked stylesheets). This worked.

*Note*: The logo could also me moved up there, but then you'd have to adjust the CSS for it's height and adjust any CSS that required the logo to be in that position of the HTML structure. I figured I'd just leave it since it has no affect of the functionality.

*Note*: Linked files are applied in the order to which they are linked. Therefore, if you link stylesheet1.css before stylesheet2.css, any CSS from stylesheet2.css that has corresponding CSS in stylesheet1.css will take priority (ie. If stylesheet1.css has "div { margin: 0 0 10em 0; }" and stylesheet2.css has "div { margin: 0; }", then "div { margin: 0; }" is what will be applied because it was loaded last.).

Then, the "Home" link made nothing appear! This was easy, I saw that the href was set to "#" instead of "#homepage".

Lastly, the navigation didn't auto-highlight the homepage link. I remedied that with another quick little tidbit.

So, I edited your "index (HiddenMenu-LinksNotWorkingYet).php" and "styles-mobile.css". I'll provide you with both via PM in a few minutes to test, but I claim it is working in IE11 and Chrome 43. I'd test it on a mobile device, but it's easier said than done with one hand. ^^'


----------



## DDAoN (Mar 19, 2011)

Slight update, as I was finalizing the files, I noticed anchors outside the navigation that point to other "pages". I had to modify my snippet to compensate for those, allowing their selections to update the selections on the collapsible menu, update the page, and still allow proper internal anchoring (target an element's name, rather than the id).

Basically, the JavaScript for the mmenu extension went from

```
$(function() {
  $('nav#menu').mmenu({
    "extensions": [
      "border-none",
      "effect-slide-menu",
      "effect-slide-panels-0",
      "pageshadow"
    ]
  });
});
```
to

```
$(function() {
  $('nav#menu').mmenu({
    "extensions": [
      "border-none",
      "effect-slide-menu",
      "effect-slide-panels-0",
      "pageshadow"
    ]
  });
  $('nav#menu ul li').first().addClass('mm-selected');
  $('a').on('click', function() {
    href = $(this).attr('href');
    if(href.match("^\#") && href != '#menu' && $('div' + href).length != 0) {
      if(!$(this).parents().is('#menu')) {
        $('nav#menu ul li.mm-selected').removeClass('mm-selected');
        $($($("nav#menu ul li a[href='" + href + "']").parent())).addClass('mm-selected');
      }
      $('.ui-page-active').removeAttr('tabindex style class');
      $(href).attr({
        tabindex: 0,
        class: "ui-page ui-page-active",
        style: "min-height: 460px;"
      });
    }
  });
});
```


----------



## icp_nz (Apr 5, 2011)

Hey, woah, a lot more complicated than I thought!

So do I just have to replace that top piece of code in post #38 with the bottom and it will work? No other changes?

Thank you


----------



## DDAoN (Mar 19, 2011)

No, I also moved the link for your custom CSS, added to the custom CSS, and modified the structure of the "pages" for the hamburger button isn't on all the pages (an 'id' should be unique, you have it in every "page"). I'm commenting the jQuery to make it easier to understand. Once I finish that I'll get it sent to you.


----------



## icp_nz (Apr 5, 2011)

Ok thanks my friend  I'll wait for the files and then go over them this weekend or next week and see what you did


----------



## icp_nz (Apr 5, 2011)

Ok menu working good but some styling is now lost - like on the Services page the lists are not in the right font. And all sub-pages under Index.php don't have page padding so the content touched the edge of the screen - too hard to read

Do you know why this is?


----------



## DDAoN (Mar 19, 2011)

My guess is improper control of your CSS. Bare in mind, I changed the order of your CSS load. Now, your custom CSS file overrides the settings of the non-custom CSS. You can swap them back around specifically to check which styles are set to the content and apply what you need to the custom styling. An easier option is to swap them back and apply "!important" to the CSS I had added. The use of "!important" is frowned upon because it improperly applies CSS when they should all build upon each other, but it is entirely valid.


----------



## icp_nz (Apr 5, 2011)

Now I'm confused 

If it's quick and easy could you do what you mention above? Otherwise, can you describe a little more clearly please and I'll try get it done today


----------



## icp_nz (Apr 5, 2011)

DDAoN said:


> My guess is improper control of your CSS. Bare in mind, I changed the order of your CSS load. Now, your custom CSS file overrides the settings of the non-custom CSS. You can swap them back around specifically to check which styles are set to the content and apply what you need to the custom styling. An easier option is to swap them back and apply "!important" to the CSS I had added. The use of "!important" is frowned upon because it improperly applies CSS when they should all build upon each other, but it is entirely valid.


Hello, are you still able to assist? Hope you are recovering well


----------

