acub

That code doesn’t work in all browsers. It has a lot of workarounds. You didn’t copy important parts of it.

Currently the minimised nav bar can take up a significant area with nothing on it except the 3 bar menu button – ie, even if the screen is wide enough to take the 9 items on chappie’s nav bar, it wont unless the logo will fit on the same horizontal line,

I really don’t think fitting the logo on the minimized navbar would change anything for the better. Most logos would be iconish to the point of not being important enough (they would look like an icon that is supposed to do something when clicked). Besides, the present menu makes very good use of page real estate. It looks good and, when pressed, it creates all the space it needs. The only problem with it is that some people don’t know what it is until they try it. So I’d leave the logo centered and important, above the menu, but i’d write on the menu, left aligned: “Menu:”. That would be good design. Looking good and being clear about the way it functions. While the looks are important, it’s how it functions that makes or breaks good design.

Giving a user the choice is normally done by having icons of phone, tablet, monitor which seems to work but can sometimes be counter productive – it uses real estate and requires that the user understands they have that choice.

How about writing “Full page” or “Full width” on that responsiveness button, having it fixed positioned in the right-bottom corner? I wouldn’t go so far as to differentiate between phones and tablets. It’s display width vs full width (~1000 px).

If you have a lengthy menu that you don’t want to break in two lines you have two options:

1. use a media query to lower the font size and padding of top-level menu elements for the portion between breaking in two lines and switching to mobile menu.
2. Reorganize your menu so it has fewer top-level elements (maybe register a second menu in the footer for things that are not really needed in top menu, or maybe groups some of the related top-level elements).

Or, of course, a combination of both.

However, I do feel Customizr is missing something in terms of responsiveness. There has been a lot of talk on whether responsiveness is a good practice or not, on whether the decision to shrink/exclude elements from the page should be taken by designer, page owner or customer. Presumably, the customer should take it.

If that’s the case, the best practice is to provide a responsiveness toggle button, which Customizr now lacks. My personal belief is that in half year’s time, the responsiveness toggle will be standard practice in responsive design.

Please put it between backticks, so it doesn’t get parsed by the wordpress forum. If you can’t put it between backticks I can’t help you.
One backtick on the line before the text and one backtick on the line after the text. This is how a backtick looks like: `
It’s on the key to the left of 1 on qwerty keyboards.
You have 30 minutes to edit your post after you posted it. If they pass, please input the text again, in another comment.

One mistake you have made is exiting php mode, using ?> at the end of the function. You don’t need to do that. If you have anything after exiting ?>, even spaces or empty lines, it will break your website. You should only enter php mode at the start of line, making sure there is nothing before that (no space, no empty line, no tab, nothing). And you should not exit php mode at all. If this is the only function you have in your functions.php, here’s how your file should look like:

<?php
add_filter('tc_credits_display', 'my_custom_credits');
function my_custom_credits(){
$credits = 'Customized by <a href="http://mywebsite.com" title="mywebsite.com">mywebsite.com</a>';
$newline_credits = '';
return '
<div class="span4 credits">
                    <p> · © '.esc_attr( date( 'Y' ) ).' <a href="'.esc_url( home_url() ).'" title="'.esc_attr(get_bloginfo()).'" rel="bookmark">'.esc_attr(get_bloginfo()).'</a> · '.($credits ? $credits : 'Designed by <a href="http://www.themesandco.com/">Themes & Co</a>').' ·'.($newline_credits ? '<br />· '.$newline_credits.' ·' : '').'</p>        </div>';
}

There is no need to change anything except the value of $credits, on line 4 (that means everything between the single quotes). Use html in that value, like I did in this example. If there are any single quotes in that html (assuming your title is something like “It’s good to be home”, you need to escape the single quote with a backslash, like this: “It\’s good to be home”. Try it, you’ll see it works.

Can you please copy-paste the code you’re putting in your child theme’s functions.php (that’s breaking your website) here? In order to display as code, you need to add 2 lines (one before the code and one after the code), each containing a single backtick (`).

Apparently you forgot to [install and] activate this plugin.

I personally use right-click > Inspect Element in Chrome. But I hear both Firefox and Safari have some neat element inspection tools, too.

Just sail up and down the DOM and find ids or classes to narrow down or widen up your selector, to suit your needs. Remember ids are strong and classes are weak.

An example: this html

<div id="one" class="one">
	<div class="two">
		<div class="three">some text
		</div>
	</div>
</div>

and this CSS

#one .three {
	color: red;
}
.one .two .three {
	color: blue;
}

will display “some text” in red color, as the #one .three selector is more powerful than .one .two .three. However, if you add the following rule:

#one .two .three {
	color: black;
}

the text will become black. It has 1 id + 2 classes, which takes precedence over 1 id + 1 class.

Much more about CSS selectors here.