CSS corrections to Catch Themes Catch Box, a feature and a not bug.

Posted on by — 3 Comments ↓

Currently (as of late 2012) this WordPress Blog in using the Catch Box theme. Catch Box is a simple, lightweight and box shaped responsive WordPress theme. And for the most part I have been very happy with it.

But it did fall short in 2 places, one a feature and one a bug one not a bug.

The missing feature was having the FalsePositives logo displayed in the Header. Not a biggie but a nicie. Note that their Simple Catch theme does a nice implementation of this feature.

In order do add this I added some custom CSS to add a background image of of the site-title id



1
 #site-title { background-image: url(/wp-content/uploads/2012/10/fp2.png); background-repeat: no-repeat; background-size: 56px; padding-left: 60px; line-height: 56px; } #site-description { padding-left: 60px; }

Note in the past I have edited the header.php to insert the image, but not this time.

The second issue I was having with the Catch Box looks like a bug (Update: NOT their bug, it was me!), since it works on their previews, which is to have the main menu site navigation change to a drop down menu on the narrower width (i.e. mobile and/or max-width: 767px in this case). Rather it was just disappearing 🙁 a bummer but not the end of the world, since it was only supplemental navigation.

what the wide menu nav looks like (as of now) :

wide menu

 

 

what is it supposed to look like on a narrow device :

drop down

It looks like the tinynav select elements are not being generated and/or inserted.

I finally got around to looking into it and noticed that the menu classes where getting a display:none applied to them, so my quick fix is to override that to display: block



1
 #branding ul.menu, #colophon #access-footer ul.menu, #access-secondary { display: block; }

So what it then looks like is (on a narrow device) :

high menu

which I can live with (although I may move it – via css – to below the main content).

Update : Many Thanks to @sakinshrestha and Catch Theme excellent wp Catch Box theme; with a little help from thier support forum, I was about to fixed the bug I was causing 🙁

3 Replies to “CSS corrections to Catch Themes Catch Box, a feature and a not bug.”

  1. Love your site…I’m stuck between Simple catch and Catch box. Hoping you could advise. Simple is not responsive to mobile devices its seems?

    Reply ↓

    • Simple is not responsive but has more Theme Options (Header Logo, Footer Logo, Fav Icon, Social Icons, Custom CSS Styles, Webmaster Tools) than Catch Box. (you can get some of those in Catch box with other plug-ins and hacking the code) I would have preferred Simple, but I also wanted/needed responsive. 🙂

      Reply ↓

  2. Hi

    Could you maybe help me with these problems

    I have two problems I would like some help with

    1) I can only see the full page if i ¨ Full Width Disable Sidebar Templete¨
    But i want my sidebar to show also… How do i do that????

    2) I can see my whole site on my mobile. It only show as much as the screen can show???
    I dont want a mobile theme. I just want my site to work on mobile…

    I hope you can help me

    Thanks

    Reply ↓

Leave a Reply