seanmyers

Between the two of you, you have managed to fix this issue. Thank you so much for all the help and support, it is truly appreciated!

What have I learned from this? Use validators before asking questions!

Thank you again,
Sean

Hi,
Child theme is active, maybe I should explain in more detail.

My child theme stylesheet currently contains these styles:

/*
Theme Name: Function
Version: 1.0
Description: A child theme of Customizr
Template: customizr
Author: Administrator
*/
/* Your awesome customization starts here */

.tc-header{
	border-bottom: 5px solid #736357;
}

/* Adjust Menu colors - Normal */
.navbar .nav > li > a, .navbar .nav > li > a:first-letter {
	color: #736357;
}
/* Adjust Menu colors - Hover */
.navbar .nav > li > a:hover, .navbar .nav > li > a:hover:first-letter {
	color: #736357;
	text-decoration: underline;
}
/* Adjust Menu colors - Active */
.navbar .nav > li > a:active, .navbar .nav > li > a:active:first-letter,
.navbar .nav > li.current-menu-item > a,
.navbar .nav > li.current-menu-ancestor > a,
.navbar .nav > li.current-menu-item > a:first-letter,
.navbar .nav > li.current-menu-ancestor > a:first-letter {
	color: #736357;
	text-decoration: underline;
}

.social-block a{
	color: #736357;
	top:5px;
}

.social-block a:hover{
	color: #736357;
}

.my-social-menu-search {
	display: inline-block;
}

.my-social-menu-search .search-field {
	width: auto;
margin-top: 1%;
}

#menu-page-navigation-2{
	color: #736357;
}
.login-float-login a:hover, .login-float-register a:hover, .login-float-login a:focus, .login-float-register a:focus{
	color: #736357;
	text-decoration: underline;
}

.login-float-login a:active, .login-float-register a:active {
	color: #736357;
	text-decoration: underline;
}

.login-float-login a, .login-float-register a {
	color: #736357;
	font-weight: normal;
}

.login-float-container{
	border-top:none;
	height:35px;
	width:150px;
	min-height:30px;
	height:auto;
	min-width:150px;
	z-index:100;
	top:1%;
	text-align:center;
	font-size:17px;
	padding-top:15px;
	position: absolute;
    	right: 3%;
	color: #736357;
	font-weight: normal;
}
#prices{
	width:50%;
	margin-left:25%;
}
table, th, td{
	border: 1px solid black;
	border-collapse: collapse;
}

.navbar .nav > li > a {
	padding:0px;
	margin-left:20px;
}

.navbar div > ul.nav > .menu-item:first-child a{
	margin-left:0px;
}

/*Stop the display of the Search button */
.my-social-menu-search .search-submit {
    display: none;
}
/* The "Search for" text is needed for screen readers, but we move it off screen, so we won't see it */
.my-social-menu-search .search-form .screen-reader-text {
    position: absolute;
    left: -9999px;
    overflow: hidden;
}

// Style the search input textbox
.my-social-menu-search .search-field {
    background: white;
    color: #736357;
border: none;
    -webkit-box-shadow:    none;
    -moz-box-shadow:       none;
    box-shadow:            none;
    cursor: pointer;
    height: 26px;
    margin: 2px 0 2px 0;
    padding: 0 0 0 36px;
    -webkit-transition: width 400ms ease;
    -moz-transition:    width 400ms ease;
    -o-transition:      width 400ms ease;
    transition:         width 400ms ease;
	width: 500px;
}

.my-social-menu-search .search-field {
    color: #736357;
    /* change the colour above if you are working with a dark navbar background */
    border: 2px solid #736357;
    cursor: text;
    outline: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow:    none;
    box-shadow:         none;
    margin: 0;
}

/* Expand the search box when you click it */
.my-social-menu-search .search-field:active,
.my-social-menu-search .search-field:focus{
 color: #736357;
    /* change the colour above if you are working with a dark navbar background
    }

/* Add a magnifying glass background */
.my-social-menu-search .search-form:before {
    font-family: 'genericons';
    content: '\f400';
width: 5px;
position: absolute; /* this is the key to put it visually inside the search field */
    font-size: 19px;
    font-weight: bold;
    padding-top: 5px; /* tune this vertical alignment inside the search field, as needed */
    padding-left: 5px; /* tune this horizontal alignment inside the search field, as needed */
	color: #736357;
	z-index: 100;
}

.navbar-inner .social-block {
margin: 3px;
}

.uneditable-input:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime-local"]:focus, input[type="datetime"]:focus, input[type="email"]:focus, input[type="month"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="week"]:focus, textarea:focus {
    border-color: #736357;
}

button, input[type="button"], input[type="checkbox"], input[type="radio"], input[type="reset"], input[type="submit"], label, select {
    cursor: auto;

.uneditable-input:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime-local"]:focus, input[type="datetime"]:focus, input[type="email"]:focus, input[type="month"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="week"]:focus, textarea:focus {
	border-color: #736357;
}

//make appointment

.appointments-wrapper {
	width: 50%;
	background-color: white;
}

.cleanlogin-container{
	background-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/background-header-4.png");
}

However sometimes when adding new styling, I found this particularly with background changes and a few other bits, it would not appear. I therefore out these changes into the ‘edit CSS’ tab under appearance, rather than the child stylesheet. So far this is what is under the ‘Edit CSS’ section as it wasn’t working within the child:

/*
Welcome to Custom CSS!

CSS (Cascading Style Sheets) is a kind of code that tells the browser how
to render a web page. You may delete these comments and get started with
your customizations.

By default, your stylesheet will be loaded after the theme stylesheets,
which means that your rules can take precedence and override the theme CSS
rules. Just write here what you want to change, you don't need to copy all
your theme's stylesheet content.
*/
//new

.colophon {
	background-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/background-header-4.png");
	background-color: #cccccc;
}

.tc-header {
	background-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/background-header-4.png");
	background-color: #cccccc;
}

body {
	background-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/background-8.png");
	background-color: #cccccc;
}

footer#footer .colophon .social-block a {
	color: #736357;
}

footer#footer {
	border-width: 50px 0 0;
	border-style: solid;
	-moz-border-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/border-3.png") 300 0 round;
	-webkit-border-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/border-3.png") 300 0 round;
/* Safari 3.1-5 */
	-o-border-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/border-3.png") 300 0 round;
/* Opera 11-12.1 */
	border-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/border-3.png") 300 0 round;
	background-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/background-footer.png");
	background-color: #cccccc;
}

.entry-content {
	margin: auto;
	width: 75%;
}

.cleanlogin-container {
	background-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/background-header-4.png");
}

input[type="submit"] {
	background-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/background-footer.png");
}

.cleanlogin-container.cleanlogin-full-width {
	max-width: 450px;
}

#main-wrapper {
/* default fallback */
	background: rgb(255,255,255) transparent;
/* nice browsers */
	background: rgba(255,255,255,0.6);
/* IE 6/7 */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#99FFFFFF);
/* IE8 */
	-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#99FFFFFF);
	border: 2px solid #736357;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding: 5px;
}

.my-social-menu-search {
	display: inline-block;
}

.navbar-inner .social-block {
	margin: 0;
}

The website is here.
I believe you helped me with the search bar earlier today, now playing up a little with width etc. in the child stylesheet.

Any insight would be greatly helpful,
Sean

That’s great, just a little bit of styling left to do now and it will be back to how it was before. Thanks so much for your help!

Thanks for the reply, I had this implemented at one point and it worked. But I wasn’t sire how to actually get it inside the header section, rather that added the code after the header (below). Rather than using __after_header is there another hook to place it within the header? How would this work?

Any help is much appreciated,
Sean