Help with a responsive theme

[Frank Roper]

I'm new to WP (and the group I attended my first meeting last week). I've just designed a site for a client (and friend actually) http://www.hilaryrock.co.uk/ using WP.

The problem is that some how I managed to loose the nice menu icon that's supposed to appear when you browse at mobile phone width and all I'm getting is the word Navigate - note that the client is happy with this it's just me who isn't.

I used the premium theme Origami - yes I know I should have used a base theme to develop but I'm new to this so this seemed easier - and like all the advice you get I created a child theme. So far so good - except that you can't change the page-width using child-theme custom CSS so I have to hack that manually when there's an update.

Origami uses a centred menu but the client wanted a left aligned menu so I custom CSSed that which is where I suspect the trouble started. Looking at what happens I think there's a javascript call to a mobile nav CSS when the browser width gets smaller than whatever it's set to.

My best guess is that the CSS file the javascript calls is hardcoded to the folder - this under some complex set of folders called upgrade and extras in the main Origami theme folder - where the mobile nav CSS sits but I've tried some things without success and I'm worried about breaking the whole thing.

So I tried copying all the what I considered appropriate folders into my child theme and then hacking the CSS - no joy as I think it's calling back to the main theme folder.

Does anyone have any suggestions.

Many thanks

Frank

[Simon Mason]

Hi Frank,

You've got a span with the class - mobilenav-icon - which is what the original theme will have used to put the nav icon in place. However, you have no CSS rules hooked to this class. 

Best guess is the original css is will have been something along the lines of:

.mobilenav-icon {

  width: 32px; // The width of the nav icon (this is just a guess)

  height: 32px; // The height of the nav icon (again just a guess)

  background: url('/the-path-to-the-icon-image.png') no-repeat; // You need to add the path - url - of the image, most likely a png or svg

  font-size: 0; // This will hide the "Navigation" text

}

If you link to a mobile nav icon using the above css in your stylesheet it will work again.

Cheers

Simon

--
See the group blog at http://mwug.info
 
You received this message because you are subscribed to the Google
Groups "Manchester WordPress User Group" group.
To post to this group, send email to
manchester-word...@googlegroups.com
To unsubscribe from this group, send email to
manchester-wordpress-...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/manchester-wordpress-user-group
---
You received this message because you are subscribed to the Google Groups "Manchester WordPress User Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to manchester-wordpress-...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
Simon Mason

Head of Studio

Tel: 01298 938426

http://mmandbstudio.co.uk

[Frank Roper]

Hi Simon

Thank you so much for this.

However I tried this and got no joy. So I decided to go digging.

First I found I do have this in the main Origami stylesheet

#menu .mobilenav-main-link .mobile-nav-icon {
width: 13px;
height: 20px;
background: green;
 background: url(./images/navigate.png) no-repeat;
display: inline-block;
margin: 0 7px -3px 0;
}

Copying this into the custom css for my child theme and adding font-size; 0 as you suggested doesn't do anything

Next I found that the js that prebends the style is part of a js that constructs the mobile nav - this is working even though it's in the main Origami Theme folders not in my child theme so my best guess is that this is fine.

I then tried swapping out - in order - my custom css, random changes to the CSS. etc.

However in a last and final attempt I decided to take out the page-width change I made in the main style sheet and upload the original style sheet from Origami - put my page-width custom css in the custom css and - drum roll - it's back up and working.

Just to check I compared the style sheet I edited and the original and the ONLY thing that was different was the page width nothing else. So why this happened is a complete mystery to me. It might not even have anything to do with the original style sheet upload and just to do with reverting back to the original theme and re-applying the child - who knows.

Anyway it's been a useful learning experience!

Frank

[Simon Mason]

Hi Frank,

Perhaps your page width declaration was affecting the media-queries (these control different styles at different page widths).

Looks good now.

Cheers

Simon