Develop Reference

I am not able to create transition in input box by transforming label

the input box is using focus already,input and label tags are not using the css style provided earlier in style tag?
transform not working :(
i have bold where i am not getting,
i have provided my css and html
i used input and label> then style them in css but it doesnot work then I created transition and it does not work more over it took it as default in page
Code I tried:
.main {
display: flex;
flex-direction: column;
height: 400px;
width: 200px;
margin: auto;
border: 2px solid black;
align-items: center;
justify-content: center;
}
.searchdiv {
position: relative;
width: 100%;
/* border: 2px solid red; */
}
.search {
width: 100%;
border: 0px;
border-bottom: rgba(22, 22, 22, 0.349);
background: rgba(211, 210, 210, 0.705);
}
label {
position: absolute;
top: 0%;
left: 0%;
transition: 0.3s ease;
}
.search:focus,
.search:valid {
outline: none;
background-color: rgba(85, 206, 247, 0.699);
}
#searchbar:focus~label,
#searchbar:valid~label {
transform: translatey(-10px);
}
<div class="main">
<div class="searchdiv">
<input type="text" id="searchbar" class="search"><label for="searchbar">Search</label>
</div>
<div><button class="btn srchbtn">SEARCH</button></div>
</div>

I hope I understood correctly what you want to do
Option 1 - CSS
The changes made are in .search:focus and #searchbar:focus+label
But after the input field is out of focus the inscription "Search" will return to its original place.
If you want the change to happen once view Option 2 below
.main {
display: flex;
flex-direction: column;
height: 400px;
width: 200px;
margin: auto;
border: 2px solid black;
align-items: center;
justify-content: center;
}
.searchdiv {
position: relative;
width: 100%;
/* border: 2px solid red; */
}
.search {
width: 100%;
border: 0px;
border-bottom: rgba(22, 22, 22, 0.349);
background: rgba(211, 210, 210, 0.705);
}
label {
position: absolute;
top: 0%;
left: 0%;
transition: 0.3s ease;
}
.search:focus {
outline: none;
background-color: rgba(85, 206, 247, 0.699);
}
#searchbar:focus + label {
transform: translatey(-20px);
}
<div class="main">
<div class="searchdiv">
<input type="text" id="searchbar" class="search">
<label for="searchbar">Search</label>
</div>
<div><button class="btn srchbtn">SEARCH</button></div>
</div>
Option 2 - JS and CSS
If you want the transition to be one-time after clicking the in input element you must use JS. This script will add style to the label element with id searchbarLabel when clicked into the input element with id searchbar.
document.getElementById("searchbar").addEventListener("click", function () {
var y = document.getElementById("searchbarLabel");
y.setAttribute('style', 'transform: translatey(-20px);')
});
.main {
display: flex;
flex-direction: column;
height: 400px;
width: 200px;
margin: auto;
border: 2px solid black;
align-items: center;
justify-content: center;
}
.searchdiv {
position: relative;
width: 100%;
/* border: 2px solid red; */
}
.search {
width: 100%;
border: 0px;
border-bottom: rgba(22, 22, 22, 0.349);
background: rgba(211, 210, 210, 0.705);
}
label {
position: absolute;
top: 0%;
left: 0%;
transition: 0.3s ease;
}
.search:focus {
outline: none;
background-color: rgba(85, 206, 247, 0.699);
}
/*
#searchbar:focus+label {
transform: translatey(-20px);
}
<div class="main">
<div class="searchdiv">
<input type="text" id="searchbar" class="search">
<label for="searchbar" id="searchbarLabel">Search</label>
</div>
<div><button class="btn srchbtn">SEARCH</button></div>
</div>

Something that is better practice is too not put label inside input and also in the css try making it more specific like :
.main . searchdiv input /* for example */
other than that I can't really help if you repost with cleaner code and better code maybe we can help.

As far as I can see, the transform works. If you think its your browser settings, try adding a reset.css similar to this:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

Centering DIV, but with other CSS That won't allow it

I want to center a div inside of <body>, but I just can't figure out how. I have tried flexboxes and the old margin: 0 auto; trick. Here is my code:
<link href="https://fonts.googleapis.com/css?family=Comfortaa|Cutive+Mono|Oswald" rel="stylesheet">
<link href="../css/ham.css" rel="stylesheet">
<link rel="stylesheet" href="../css/main.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script type="text/javascript">
//Unselctable Function
$.fn.extend({
disableSelection: function() {
this.each(function() {
if (typeof this.onselectstart != 'undefined') {
this.onselectstart = function() { return false; };
} else if (typeof this.style.MozUserSelect != 'undefined') {
this.style.MozUserSelect = 'none';
} else {
this.onmousedown = function() { return false; };
}
});
}
});
$(document).ready(function() {
//NAVBAR HIDE
$('nav').hide();
//UNSELECTABLE
$('.unselectable').disableSelection();
//HAMBURGERS
var $hamburger = $(".hamburger");
$hamburger.on("click", function(e) {
$hamburger.toggleClass("is-active");
$('nav').slideToggle();
});
});
</script>
</head>
<body>
<nav>
<ul>
<li>home</li>
<li>work</li>
<li>contact</li>
</ul>
</nav>
<button class="hamburger hamburger--spin" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<div>center this</div>
It's literally just </body> after and my closing html - no scripts after that.
Here is my CSS:
/* FONTS
font-family: 'Comfortaa', cursive;
font-family: 'Oswald', sans-serif;
font-family: 'Cutive Mono', monospace;
*/
/*RESET*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
a {
text-decoration: none;
color: white;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*STYLES*/
.unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
body {
background-color: black;
background-image: url(../images/bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: inherit;
background-color: #212121;
}
li {
float: left;
color: #fff;
cursor: pointer;
}
li a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: 'Comfortaa', cursive;
/*transition*/
-webkit-transition: color 0.2s; /* Safari */
transition: color 0.2s;
}
li a:hover {
color: #BDBDBD;
}
.hamburger {
position: absolute;
}
button:focus {
outline: none;
}
#media only screen and (max-width: 768px) {
/* For mobile phones: */
* {
width: 100%;
}
li a {
padding: 0;
padding-top: 14px;
text-align: center;
}
li:last-child {
padding-bottom: 14px;
}
}
.content {
margin: 0 auto;
width: 100px;
}
^ .content is what I would like to Center Both Vertically and Horizontally in the page.
I should say, I am also using https://jonsuh.com/hamburgers/ - which is an excellent library by the way.
Sorry if this Question has been answered before, but I just couldn't find it anywhere.
Thanks
Alistair

you can center any div by css giving it a fixed width and margin(Standard way).
.any{
width:300px;/* use your required wid and height */
height:300px;
background:red; /* Just for example */
margin :0px auto;
}
you can even have a look at this bin:
https://jsbin.com/rewayuwoso/edit?html,css,output

You have omitted to put the content class in your div html.
It should read <div class="content">center this</div>
then it will be centered. Hope this helps.
However, using margin:0 auto only centers it horizontally.

Responsive Grid with right side gap appearing

Hi I have tried to develop off of the Skeleton Framework and have adjusted the grid design. Although everything is slow falling into place I cannot find where this small gap is coming from on the right hand side. See below picture for what I mean. I have attached the CSS and HTML page. Apologies for the mess of CSS its three style sheets in one. Any suggestion would be great as I feel I may not be able to see the trees through the forest at this point.
/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/
/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
position: relative;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
.column,
.columns {
width: 100%;
float: left;
box-sizing: border-box;
}
/* For devices larger than 400px */
#media (min-width: 400px) {
.container {
width: 85%;
padding: 0;
}
}
/* For devices larger than 550px */
#media (min-width: 1050px) {
.container {
width: 80%;
}
.column,
.columns {
margin-left: 0;
}
.column:first-child,
.columns:first-child {
margin-left: 0;
}
.one.column,
.one.columns {
width: 8.333%;
}
.two.columns {
width: 16.66%;
}
.three.columns {
width: 25%;
}
.four.columns {
width: 33.33%;
}
.five.columns {
width: 41.66%;
}
.six.columns {
width: 50%;
}
.seven.columns {
width: 58.33%;
}
.eight.columns {
width: 66.663%;
}
.nine.columns {
width: 75%;
}
.ten.columns {
width: 83.33%;
}
.eleven.columns {
width: 91.66%;
}
.twelve.columns {
width: 100%;
margin-left: 0;
}
.one-third.column {
width: 30.6666666667%;
}
.two-thirds.column {
width: 65.3333333333%;
}
.one-half.column {
width: 48%;
}
/* Offsets */
.offset-by-one.column,
.offset-by-one.columns {
margin-left: 8.66666666667%;
}
.offset-by-two.column,
.offset-by-two.columns {
margin-left: 17.3333333333%;
}
.offset-by-three.column,
.offset-by-three.columns {
margin-left: 26%;
}
.offset-by-four.column,
.offset-by-four.columns {
margin-left: 34.6666666667%;
}
.offset-by-five.column,
.offset-by-five.columns {
margin-left: 43.3333333333%;
}
.offset-by-six.column,
.offset-by-six.columns {
margin-left: 52%;
}
.offset-by-seven.column,
.offset-by-seven.columns {
margin-left: 60.6666666667%;
}
.offset-by-eight.column,
.offset-by-eight.columns {
margin-left: 69.3333333333%;
}
.offset-by-nine.column,
.offset-by-nine.columns {
margin-left: 78.0%;
}
.offset-by-ten.column,
.offset-by-ten.columns {
margin-left: 86.6666666667%;
}
.offset-by-eleven.column,
.offset-by-eleven.columns {
margin-left: 95.3333333333%;
}
.offset-by-one-third.column,
.offset-by-one-third.columns {
margin-left: 34.6666666667%;
}
.offset-by-two-thirds.column,
.offset-by-two-thirds.columns {
margin-left: 69.3333333333%;
}
.offset-by-one-half.column,
.offset-by-one-half.columns {
margin-left: 52%;
}
}
/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
font-size: 62.5%;
}
body {
font-size: 1.5em;
/* currently ems cause chrome bug misinterpreting rems on body element */
line-height: 1.6;
font-weight: 400;
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #222;
}
/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
margin-bottom: 2rem;
font-weight: 300;
}
h1 {
font-size: 4.0rem;
line-height: 1.2;
letter-spacing: -.1rem;
}
h2 {
font-size: 3.6rem;
line-height: 1.25;
letter-spacing: -.1rem;
}
h3 {
font-size: 3.0rem;
line-height: 1.3;
letter-spacing: -.1rem;
}
h4 {
font-size: 2.4rem;
line-height: 1.35;
letter-spacing: -.08rem;
}
h5 {
font-size: 1.8rem;
line-height: 1.5;
letter-spacing: -.05rem;
}
h6 {
font-size: 1.5rem;
line-height: 1.6;
letter-spacing: 0;
}
/* Larger than phablet */
#media (min-width: 550px) {
h1 {
font-size: 5.0rem;
}
h2 {
font-size: 4.2rem;
}
h3 {
font-size: 3.6rem;
}
h4 {
font-size: 3.0rem;
}
h5 {
font-size: 2.4rem;
}
h6 {
font-size: 1.5rem;
}
}
p {
margin-top: 0;
}
/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
color: #1EAEDB;
}
a:hover {
color: #0FA0CE;
}
/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
display: inline-block;
height: 38px;
padding: 0 30px;
color: #555;
text-align: center;
font-size: 11px;
font-weight: 600;
line-height: 38px;
letter-spacing: .1rem;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
background-color: transparent;
border-radius: 4px;
border: 1px solid #bbb;
cursor: pointer;
box-sizing: border-box;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
color: #333;
border-color: #888;
outline: 0;
}
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
color: #FFF;
background-color: #33C3F0;
border-color: #33C3F0;
}
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
color: #FFF;
background-color: #1EAEDB;
border-color: #1EAEDB;
}
/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
height: 38px;
padding: 6px 10px;
/* The 6px vertically centers text on FF, ignored by Webkit */
background-color: #fff;
border: 1px solid #D1D1D1;
border-radius: 4px;
box-shadow: none;
box-sizing: border-box;
}
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
textarea {
min-height: 65px;
padding-top: 6px;
padding-bottom: 6px;
}
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
border: 1px solid #33C3F0;
outline: 0;
}
label,
legend {
display: block;
margin-bottom: .5rem;
font-weight: 600;
}
fieldset {
padding: 0;
border-width: 0;
}
input[type="checkbox"],
input[type="radio"] {
display: inline;
}
label > .label-body {
display: inline-block;
margin-left: .5rem;
font-weight: normal;
}
/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
list-style: circle inside;
}
ol {
list-style: decimal inside;
}
ol,
ul {
padding-left: 0;
margin-top: 0;
}
ul ul,
ul ol,
ol ol,
ol ul {
margin: 1.5rem 0 1.5rem 3rem;
font-size: 90%;
}
/*li {
margin-bottom: 1rem; }*/
/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
padding: .2rem .5rem;
margin: 0 .2rem;
font-size: 90%;
white-space: nowrap;
background: #F1F1F1;
border: 1px solid #E1E1E1;
border-radius: 4px;
}
pre > code {
display: block;
padding: 1rem 1.5rem;
white-space: pre;
}
/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #E1E1E1;
}
th:first-child,
td:first-child {
padding-left: 0;
}
th:last-child,
td:last-child {
padding-right: 0;
}
/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
margin-bottom: 1rem;
}
input,
textarea,
select,
fieldset {
margin-bottom: 1.5rem;
}
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
margin-bottom: 2.5rem;
}
/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
width: 100%;
box-sizing: border-box;
}
.u-max-full-width {
max-width: 100%;
box-sizing: border-box;
}
.u-pull-right {
float: right;
}
.u-pull-left {
float: left;
}
/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
margin-top: 3rem;
margin-bottom: 3.5rem;
border-width: 0;
border-top: 1px solid #E1E1E1;
}
/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
content: "";
display: table;
clear: both;
}
/* Navigation Bar
-------------------------------------------------- */
/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
/* Float the list items side by side */
ul.topnav li {
float: left;
}
/* Style the links inside the list items */
ul.topnav li a {
display: inline-block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of links on hover */
ul.topnav li a:hover {
background-color: #111;
}
/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {
display: none;
}
/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
#media screen and (max-width: 680px) {
ul.topnav li:not(:first-child) {
display: none;
}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
#media screen and (max-width: 680px) {
ul.topnav.responsive {
position: relative;
}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/
/* Larger than mobile */
#media (min-width: 400px) {}
/* Larger than phablet (also point when grid becomes active) */
#media (min-width: 550px) {}
/* Larger than tablet */
#media (min-width: 750px) {}
/* Larger than desktop */
#media (min-width: 1000px) {}
/* Larger than Desktop HD */
#media (min-width: 1200px) {} .full-width-container {
width:100%;
max-width:100%;
clear:both;
margin:0 auto;
}
/* CSS Document */
.cBox {
border-right:2px #DADADA solid;
}
.cBoxCenter {
text-align:center;
border-right:2px #DADADA solid;
padding:1%;
}
.cBoxMain {
border-top:2px #DADADA solid;
}
.cBoxEnd {
text-align: center;
}
button {
color: white;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff6e00+0,cc0600+100 */
background: #ff6e00;
/* Old browsers */
background: -moz-linear-gradient(top, #ff6e00 0%, #cc0600 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #ff6e00 0%, #cc0600 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ff6e00 0%, #cc0600 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff6e00', endColorstr='#cc0600', GradientType=0);
/* IE6-9 */
border: 0;
}
.content {
background-image: url(../img/hbg.png);
}
.subcontent {
background-image: url(../img/hbg.png);
}
.columns img {
max-width: 100%;
}
.content .columns {
padding: 2%;
}
.columns {} .row {
box-sizing: border-box;
display: -webkit-flex;
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
-webkit-box-flex: 0;
flex: 0 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.fillimage {
background-image: url(../img/ldn.jpg);
background-position: center;
background-size: cover;
}
#charset "utf-8";
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,400italic,700,700italic);
/* CSS Document */
html,
body {
background-image: url(../img/bg.png);
font-family: 'Open Sans', sans-serif;
height: 100%;
}
.head {
background-image: url(../img/hbg.png);
}
.head img {
max-width: 100%;
}
.logo {
padding: 2rem;
}
.logo img {
display: block;
margin: auto;
display: block;
margin: auto;
float: left;
max-height: 100%;
}
.headerimage {} .headerimage img {
display: block;
margin: auto;
float: left;
max-height: 100%;
}
/* ----- Contract Form ---- */
#form {
min-width: 300px;
max-width: 600px;
margin: auto;
font-family: sans-serif;
}
#form h2 {
color: #27748A;
font-size: 35px;
margin: 0;
}
#form p {
font-size: 20px;
color: #222222;
}
#form div {
margin-top: 10px;
}
#form input,
textarea,
button {
width: 50%;
padding: 3px 5px;
}
#form label {
font-weight: bold;
font-size: 20px;
color: #184552;
}
#form button {} #form button:hover {
background-color: #CBEAF2;
}
.required {
color: #dd6666;
}
#footer {
background-image: url(../img/bg2.png);
display: block;
color: white;
}
#footer .columns {
padding: 2%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>Central Computers</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/ccframe.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/content.css">
</head>
<body>
<!-- Primary Page Layout -->
<div class="container">
<!-- Header -->
<div class="row">
<div class="columns head">
<div class="four columns logo">
<img src="img/logo.png" alt="Logo">
</div>
<div class="eight columns headerimage">
<img src="img/london.png" alt="London">
</div>
</div>
</div>
<!-- Header -->
<!-- Nav Bar -->
<div class="row">
<div class="twelve columns">
<ul class="topnav">
<li>Home</li>
<li>Buyers</li>
<li>Sellers</li>
<li>Student Property</li>
<li>Hotels</li>
<li>News</li>
<li>Contact</li>
<li class="icon">
☰
</li>
</ul>
</div>
</div>
<!-- Nav Bar -->
<!-- Content -->
<div class="row subcontent ">
<div class="four columns cBoxCenter">
<h3>BUYERS</h3>
<p>
If you are a Buyer, looking for Off-Market Properties in prime central locations, then please get in contact with …
</p>
<button>Learn More</button>
</div>
<div class="four columns cBoxCenter ">
<h3>SELLERS</h3>
<p>
If you have properties you wish to sell privately through our off-market collection, we can promote them for you …
</p>
<button>Learn More</button>
</div>
<div class="four columns cBoxEnd fillimage">
</div>
</div>
<div class="row content">
<div class="eight columns cBoxMain cBox">
<h2>Off-Market Properties UK</h2>
<p>If you are looking to buy or sell off-market properties, then you certainly have come to the right place. Off-Market Properties UK has over 30 years of experience in the global property business and we have many clients with an appetite for off-market properties to whom we already offer an expanding portfolio of outstanding development opportunities. Many of the off-market properties we listed this year sold within one month.</p>
<p>Our service is completely bespoke and our task is to connect buyers to sellers with maximum discretion, confidentiality and with minimum fuss. Even though Off-Market Properties UK’s core market is central London, including: Belgravia, Knightsbridge, Kensington, Chelsea, Notting Hill, Covent Garden, Earls Court, we also have properties and development opportunities in other parts of the UK. Basically, wherever the market is most dynamic. If you own a property in an area where we do not yet cover, still try us.</p>
<p>Why go off market? We understand that many property owners prefer to sell their properties privately and not publicly. Confidentiality is usually the reason, perhaps for family reasons or because the owner has a high profile. An advantage to owners is that interest in off market properties tend often to come from serious investors able to exchange quickly.</p>
</div>
<div class="four columns cBoxMain">
<h3>Contact Us</h3>
<form id="form" action="/process.php" method="post">
<p>Use the form below to get in touch, or give us a call on xxx-xxx-xxx
<!--fields-->
</form>
<div>
<label for='name'>Name<span class='required'>(required)</span></label>
<input type='text' name='name' placeholder='your name here' required />
</div>
<div>
<label for='tel'>Tel</label>
<input type='tel' name='tel' placeholder='your telephone here' />
</div>
<div>
<label for='email'>Email <span class='required'>(required)</span></label>
<input type='email' name='email' placeholder='you#yourdomain.com' required />
</div>
<div>
<label for='message'>Message <span class='required'>(required)</span></label>
<textarea name='message' required></textarea>
</div>
<div>
<button type='submit'>Send Message</button>
</div>
</div>
</div>
<!-- Content -->
</div>
<!-- Container -->
<!-- Footer -->
<div class="full full-width-container" id="footer">
<div class="container">
<div class="row">
<div class="four columns">
<h4>Contact Us</h4>
<p>Please get in contact with us to learn more about our Off-Market Properties:</p>
<p>Tel: +44 208 920 9414<br>
Mob: +44 7463 424 888<br>
Email: om#offmarketpropertiesuk.com</p>
<p><img src="img/logo.png" width="300" height="85"></p>
</div>
<div class="four columns">
<h4>Off Market Properties UK</h4>
<p>If you are looking to buy or sell an off-market properties, then you certainly have come to the right place. </p>
<p>Our service is completely bespoke and our task is to connect buyers to sellers with maximum discretion, confidentiality and with minimum fuss. Even though Off Market Properties UK’s core market is central London, including: Belgravia, Knightsbridge, Kensington, Chelsea, Notting Hill, Covent Garden, Earls Court, we also have properties in other parts of the UK.</p>
</div>
<div class="four columns" style="overflow:hidden;">
<h3>Contact Us</h3>
<form id="form" action="/process.php" method="post">
<p>Use the form below to get in touch, or give us a call on xxx-xxx-xxx
<!--fields-->
</form>
<div>
<label for='name'>Name<span class='required'>(required)</span></label>
<input type='text' name='name' placeholder='your name here' required />
</div>
<div>
<label for='tel'>Tel</label>
<input type='tel' name='tel' placeholder='your telephone here' />
</div>
<div>
<label for='email'>Email <span class='required'>(required)</span></label>
<input type='email' name='email' placeholder='you#yourdomain.com' required />
</div>
<div>
<button type='submit'>Send Message</button>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
<script src="js/menu.js"></script>
</html>

You should remove container width from here
#media (min-width: 400px) {.container {
// width: 85%; //commented width
padding: 0;
}
}

Turns out after much more thinking and banging of the head and desk I realized my calculations are off by a fraction.
Turns out I forgot to round up the final decimal digit place.
.one.column,
.one.columns { width: 8.33333333333%; }
.two.columns { width: 16.6666666667%; }
.three.columns { width: 25.0%; }
.four.columns { width: 33.3333333333%; }
.five.columns { width: 41.6666666667%; }
.six.columns { width: 50.0%; }
.seven.columns { width: 58.3333333333%; }
.eight.columns { width: 66.6666666667%; }
.nine.columns { width: 75.0%; }
.ten.columns { width: 83.3333333333%; }
.eleven.columns { width: 91.6666666667%; }
.twelve.columns { width: 100%; margin-left: 0; }
.one-third.column { width: 30.6666666667%; }
.two-thirds.column { width: 65.3333333333%; }
.one-half.column { width: 48%; }

How can one select a parent element several levels above the child element utilizing the 'hover' selector and ':has()'?

I realize that this may not be possible, so I am also open to modifying the code for the sake of functionality.
Here is my css and html:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: 'Raleway Webfont';
}
body {
margin: 0;
padding: 0;
height: 4000px;
font-size: 16px;
line-height: 1.5;
}
ul, li, h1, h2, p, a, .logo {
font-family: 'Raleway Webfont';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: black;
font-weight: 200;
margin: 0;
padding: 0;
}
header {
position: fixed;
width: 100%;
padding-top: 0px;
background: #e5e5e5;
transition:.25s;
z-index: 100;
border-bottom-style: solid;
border-width: 1px;
box-shadow: 0 0 15px 0 rgba(0,0,0,0.9);
}
.inner {
width: 800px;
position: relative;
margin: 0 auto;
}
nav {
overflow: hidden;
}
nav ul {
float: right;
}
nav li {
display: inline;
float: left;
list-style: none;
}
nav a {
display: inline-block;
color: #fff;
text-decoration: none;
padding: 25px 15px;
transition:.25s;
}
nav a:hover {
margin: -8px 0 0 0;
}
nav ul li:first-child a {
background:#b7b7b7 !important;
}
nav ul li:nth-child(2) a {
background:#a0a0a0 !important;
}
nav ul li:nth-child(3) a {
background:#898989 !important;
}
nav ul li:nth-child(4) a {
background:#727272 !important;
}
nav ul li:nth-child(5) a {
background:#5b5b5b !important;
}
nav ul li:first-child:hover header {
background: #b7b7b7;
}
nav ul li:nth-child(2):hover header {
background: #a0a0a0;
}
nav ul li:nth-child(3):hover header {
background: #898989;
}
nav ul li:nth-child(4):hover header {
background: #727272;
}
nav ul li:nth-child(5):hover header {
background: #5b5b5b;
}
.logo {
float: left;
color: #000;
font-size: 30px;
font-weight: 300;
text-decoration: none;
line-height: 70px;
}
section .inner {
padding-top: 125px;
}
p {
padding-top: 25px;
font-weight: 400;
}
h1 {
text-align: center;
}
<header>
<div class="inner">
<div>
<a class="logo" href="Home.html">W </a>
</div>
<nav role='navigation'>
<ul>
<li>ME</li>
<li>CV</li>
<li>RD</li>
<li>AV</li>
<li>RR</li>
</ul>
</nav>
</div>
</header>
<section>
<div class="inner">
<h1>about me</h1>
<p><span> A work in progress.</span>
</p>
</div>
</section>
I truly thought that I could get away with selecting a parent element by utilizing the :hover selector, but, obviously I was mistaken. I have already visited "Is there a CSS parent selector?", as well as most of the other queries referencing this issue. My specific need, however, still confuses me.
Essentially, is it possible to manipulate the background: of <header> utilizing the in-place -child arrangement, the :hover selector (what I want stylistically), and some method to extend that selector back up to the <header>? The :has() method seems to be a likely candidate, but I cannot figure out how to implement it here for the life of me. If any structure can/must be altered while maintaining the aesthetic, then I am certainly open to implementing it as well. Thank you in advance!

I don't know of a way using pure CSS, however if you want to change the <header> background based on which link in your navigation is hovered, you can use this in jQuery (be sure to run at load, or place at the end of your body just before </body>):
$('[role=navigation] a').hover(function(){
$(this).closest('header').css('background-color', $(this).css('background-color'));
},function(){
$(this).closest('header').css('background-color', '#e5e5e5');
});
https://jsfiddle.net/5d1tvnwh/

Hide website navigation from the home page

I created a site in wordpress and I want to hide the menu from this page
http://www.dawaf.co.uk/es/
but keep it visible on all of the other pages once you click on the logo in the top left to take you through to the site
http://www.dawaf.co.uk/es/portraits
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
border: 0;
font-family: BebasRegular;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
body {
background: #FFFFFF;
padding: 0px;
}
h1.entry-title {
display: none;
}
#page.hfeed {
margin: 0px;
}
/*Header
------------------------------------------------------------ */
#branding {
border: 0px;
}
#branding #searchform {
display: none;
}
.site-title {
width: 300px;
height: 132px;
}
/*Nav
------------------------------------------------------------ */
#access {
background: transparent;
-webkit-box-shadow: none;
box-shadow: none;
width: 140px;
margin-left: 20px;
}
#access a {
color: #8E8E8E;
padding: 0px;
line-height: 2.2;
}
#access li {
font-size: 11px;
}
#access li:hover > a, #access a:focus {
background: #FFFFFF;
}
#access .current-menu-item > a, #access .current-menu-ancestor > a, #access .current_page_item > a, #access .current_page_ancestor > a {
font-weight: normal;
}
/*Photospace
------------------------------------------------------------ */
.photospace {
margin: 0px !important;
top: -236px;
left: 175px;
}
.nav-controls {
font-size: 11px;
}
.ss-controls {
font-size: 11px;
}
.photospace .gal_content a:hover{
text-decoration: none !important;
}
/*Super Sized Splash Page
------------------------------------------------------------ */
#supersized {
display: block;
position: fixed;
left: 0;
top: 0;
overflow: hidden;
z-index: -999;
height: 100%;
width: 100%;
}
#page.hfeed {
background: transparent;
}
.widget_search form {
display: none;
}
form#searchform {
display: none;
}
/*Footer
------------------------------------------------------------ */
#colophon {
display: none;
}
#post-0 .entry-content {
display: none;
}

You'll notice that your main page has a class of home which is unique to that section. This makes it real simple to do something like:
.home nav{
display:none;
}
or if you need something more specific:
.home nav#access{
display:none;
}

I'd edit the theme and check is_home() to hide the menu.
if( !is_home() )
{
# Show your menu on pages that are not the home page
}

You could hide it from the home page by doing the following css
.home #access {
display: none;
}
It will still appear on all of your other pages once you enter via the logo.