Stacking order for menu on the mobile friendly site isn't showing up correctly

[zbirmingham]

@jemuelyoung was wondering if you can help me figure out what's going on here. I'm trying to make the site responsive. Once the width goes below a certain point, the site is supposed to go into a mobile friendly version. I have the top menu showing as a drop down box, but the menu is appearing behind the search bar, also the menu button itself is supposed to appear behind the menu, but is showing in front of it. I'm sure it has something to with the z-index, but I can't figure it out.

[young]

Is the menu absolutely positioned?

[zbirmingham]

No, it's relatively positioned.

[young]

Is the z-index of the menu the highest index on the page? Do you have a working prototype that I can look at?

[zbirmingham]

It's z-index is currently set at 999, so it is the highest index on the page. If you pull down the latest version of the site, it's already merged to master.

[young]

So there's few things going wrong here. First off is that there's too many '!important' attributes which makes the css hard to understand and leads to undesirable behavior. You should only use '!important' to override a weird browser css implementation but ideally you should never use it.

The second problem is that you're using id selectors for all of your css. This is a bad practice as when the css parser is running, id's are given the highest priority so id > class. You can see that you're adding the 'visibility: hidden' attribute to the menu on hover but because it is being added as a class, it is getting overridden by the attributes you bound to the id selector.

The third thing is that you should offload more of the logic to css and less on jquery. I recommend using less (http://lesscss.org/) for your css as it will shorten your css files and make it vastly more readable. For instance, the menu logic in less would be something like: .menu {
.menu_button { display: inline; } .menu_list { display: none; } &:hover { .menu_button { display: none; } .menu_list { display: inline } }

[zbirmingham]

@jemuelyoung, so what do you think is a good approach to fixing this? Just start pulling out all of my ID tags and make them classes and then pull out the !important attributes?

[young]

Yes that's a good start. Ideally you pull all shared css into a main.css file so you don't have to keep defining things for each individual page. Things like background color, specific fonts, button styling etc should all be moved up in a main file so that each individual page can inherit from it and it will make developing each individual page simpler and easier.

[jakubzapletal]

I agree with @jemuelyoung at all. It's also important to use a suitable naming. For example I saw class "makevisible". You don't need to use a word "make" because everything makes sometihing :-) Only use "visible", "hidden" and so on. It's also a good practise to make general classes which deal common use cases as visibility, floating, alignment, font sizing etc. A good start to learn how can it looks like is http://getbootstrap.com/, where you can see how do they solve classes and their naming.

About issue with overlaping: you can figure it out by setting z-index higher then 1 on tag with id #menuwrapper, that's all :-)

[jakubzapletal]

@zbirmingham if you plan to have a look at LESS (http://lesscss.org/) as @jemuelyoung has mentioned, it's also good to have a look at SASS (http://sass-lang.com/) and STYLUS (http://learnboost.github.io/stylus/).

Unless LESS is more known it's good to say that SASS and STYLUS are better than LESS. They offer more functionality. SASS itself is not so good as STYLUS but thanks to COMPASS (http://compass-style.org/) it can compete STYLUS. LESS is like in case with VHS few decades ago, VHS wasn't the best solution but was the most widely used thanks to porn :-)

[young]

I'm fine with SASS, LESS, or STYLUS as all of these are better solutions than writing plain CSS

[zbirmingham]

At this point, I don't really have any plans of changing or implementing anything else. I've never used LESS, SASS or STYLUS, so if someone wants to take that on, go for it. I was just going to take on cleaning up the CSS.

[zbirmingham]

So at this point, I've cleaned up a bunch of the css on the branch I am working on which is clean_up_front_end-implement_handlebars.js and I'm still having the same issue. Wondering if someone can take a look at this.

[raynor85]

I really like the concept of LESS, but I had bad experience in the past when different web designers shared the same LESS file(s). I think LESS is good and handly for the one that implemented it, but if another developer try to edit or enhance the one(s) of someone else it's a mess. What do you think?