Grow your CSS skills. Land your dream job.

Responsive Mobile Navigation In WordPress

  • # March 31, 2013 at 11:36 am

    I am a bit of a hack when it comes to css. I dont know that I always do things the “right way”, but I try to take what I can from all the CSS wizards like Chris and the folks he has on shoptalkshow.com.

    I was looking at the WordPress twenty twelve theme to see how they constructed the css for responsive design. Right away I seen that they’re using “display:none;” on the menu button for the mobile menu switcher.

    A while back Chris had Laura Kalbag on shoptalkshow.com and she then put out this article about using display: none; in responsive web design. I read through that, probably need to get a refresher. But when should you or shouldn’t you use it?

    I have been trying to get my own little library of css for responsive design to implement on my small projects. I have tried adapting some of bootstrap and the HTML5 boiler plate code but working with the WordPress menu can be tricky at times. Everything I build is always around WordPress for my little world of web design. And before reading the article mentioned above, I was using display none A LOT!.

    What type of advice would you guys have one tackling this? I feel the rest of the theme structure is easy. We all know that nav menu’s can be pretty difficult to begin with.

    Thanks, Clayton

    # April 1, 2013 at 6:24 pm

    I don’t think it’s quite a case of “NEVER USE DISPLAY:NONE!”. It might fall in the category of ID’s versus classes. It’s usually never a good idea to use ID’s instead of classes, but there are those rare occasions where it might make sense. I don’t personally think that display:none is bad markup, but it could lead to problems down the road because you bypassed usability just to get it done.

    You probably should generally stay away from just hiding everything so it appears correctly on mobile. But there have been instances where I’ve created a mobile and desktop version of a menu that is called using media queries. So I’m a proponent of having in your toolbox, but more than likely you can get it done a better way.

    The one thing I’m not 100% sure about is Laura’s comment in her blog saying that using display:none is a performance hit. I was under the impression display:none doesn’t even load the device. Images don’t load and then hide – they just don’t load at all, right? I remember a video of Chris’ once where he was experimenting with it and I thought that was the case there as well.

    # April 2, 2013 at 7:27 pm

    Thanks for the reply. Even the ID’s vs classes kind of confuses me a bit. I heard them on the shoptalk show talking about it. But what is the real reason why you shouldn’t use ID’s often?

    And about the performance hit on display:none from what I have read it does still load images. They just dont display.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".