https://codepen.io/stephepush/pen/WKMqwG
I’m having issues with something I’m trying to put together in html and css. An element that I coded way after the header element is somehow above the header element!
video {
display: block;
z-index: -200;
width: 100%;
overflow: hidden;
}
$orange: rgb(255, 89, 0);
body {
background: green;
}
/* navigation styles start here */
header > img {
height: 2.5rem;
}
header {
background-color: rgba(0, 0, 0, 0.25);
z-index: 999;
text-align: center;
position: fixed;
width: 100%;
display: block;
}
.logo {
margin: 20px;
}
nav {
background-color: rgba(0, 0, 0, 0.25);
position: absolute;
text-align: left;
top: 100%;
left: 0;
width: 100%;
transform: scale(1, 0);
transform-origin: top;
transition: transform 400ms ease-in-out;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
margin-bottom: 1em;
margin-left: 1em;
}
nav a {
color: white;
text-decoration: none;
font-size: 1.2rem;
opacity: 0;
transition: opacity 150ms ease-in-out;
}
nav a:hover {
color: $orange;
}
@media screen and (min-width: 600px) {
.nav-toggle-label {
display: none;
}
header {
display: grid;
grid-template-columns: 1fr auto minmax(600px, 3fr);
grid-gap: 1em;
display: block;
}
.logo {
grid-column: 1/ span 1;
}
nav {
all: unset;
grid-column: 2 / 4;
display: flex;
justify-content: space-evenly;
align-items: center;
display: block;
}
nav a {
opacity: 1;
}
nav ul {
display: flex;
}
}
/*
Nav toggle/hamburger
*/
.nav-toggle:checked ~ nav {
transform: scale(1, 1);
}
.nav-toggle:checked ~ nav a {
opacity: 1;
transition: opacity 150ms ease-in-out 250ms;
}
.nav-toggle {
display: none;
}
.nav-toggle-label {
position: absolute;
top: 0;
left: 0;
margin-left: 1em;
height: 100%;
display: flex;
align-items: center;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
width: 2em;
height: 2px;
display: block;
background: white;
border-radius: 2px;
position: relative;
}
.nav-toggle-label span::before,
.nav-toggle-label span::after {
content: "";
position: absolute;
}
.nav-toggle-label span::before {
bottom: 7px;
}
.nav-toggle-label span::after {
top: 7px;
}
/*
End of Nav toggle/hamburger
*/
video {
display: block;
z-index: -200;
width: 100%;
overflow: hidden;
}
.cards {
display: flex;
}
#show-selection {
width: 100%;
background-color: red;
display: block;
}
#splash {
background-image: url("https://res.cloudinary.com/dmkct6wfu/image/upload/v1533162642/pexels-photo-1277019_xha4yl.jpg");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
Hello! I need some help, I can't pass Basic HTML and HTML5: Declare the Doctype of an HTML Document
with this code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Lorem Header</h1>
</body>
</html>
The output says
// running test
The html tags should wrap around one h1 element.
// tests completed
<div id="toolbar">Editor<i onClick={ this.handleClick } className="far fa-edit"></i></div>
<Editor className= { this.state.condition ? "textarea-normal textarea-bigger" : "textarea-normal" } input = {this.state.input} handleChange={this.handleChange} />
.textarea-normal{
textarea:100px;
}
.textarea-bigger{
textarea:360px;
}
height: 100px
if you want to set the height of textarea
<div class="page-content">
<?php
$vorespartnere = get_posts( array(
'showposts' => -1,
'post_type' => 'partnere',
'orderby' => 'order',
'suppress_filters' => false,
) );
$terms = get_terms( array(
'taxonomy' => 'partnere-kategorier',
'hide_empty' => false,
) );
?>
<div class="container">
<!-- This is the container for the pictures -->
<?php
if ( ! empty( $vorespartnere ) ) {
foreach ( $vorespartnere as $partnere ){
$image = get_field( 'partner_logo', $partnere );
$text = get_field( 'partner_beskrivelse', $partnere );
$overskrift = get_field( 'partner_overskrift', $partnere );
?>
<?php
if ( ! empty( $image ) && ! is_wp_error() ) {
?>
<div class="col-lg-4">
<img src="<?php echo $image['url']; ?>" alt=""> </div>
<?php
}
if ( ! empty( $text ) && ! is_wp_error() ) {
echo $text;
}
if ( ! empty( $overskrift ) && ! is_wp_error() ) {
echo $overskrift;
}
}
}
createBoard() {
var div = [];
// for (let i = 0; i < 3; i++) {
// let children = [];
// for (let j = 0; i < 3; j++) {
// children.push(this.renderSquare( i * 3 + j));
// }
// children = <div className="board-row">{children}</div>;
// div.push(children);
// }
// return div;
let children1 = [];
let children2 = [];
let children3 = [];
children1.push(this.renderSquare(0));
children1.push(this.renderSquare(1));
children1.push(this.renderSquare(2));
children1 = <div className="board-row">{children1}</div>;
children2.push(this.renderSquare(3));
children2.push(this.renderSquare(4));
children2.push(this.renderSquare(5));
children2 = <div className="board-row">{children2}</div>;
children3.push(this.renderSquare(6));
children3.push(this.renderSquare(7));
children3.push(this.renderSquare(8));
children3 = <div className="board-row">{children3}</div>;
div.push(children1, children2, children3);
return div;
}
render() {
return (
<div>{this.createBoard()}</div>
);
}
}
Good evening,
in the following codepen I am trying to add a bottom-border to all my .nav-link elements but the border doesn't get displayed. Does anyone know why that is?
https://codepen.io/bradley1492/pen/pZrXQz?editors=1000
Hm funnily only border-left works, but it then also behaves in a funny way
for (let j = 0; i < 3; j++)
, i < 3
will make the loop infinite.
j < 3
instead of i < 3
in the second loopfor (let j = 0; j < 3; j++) {
children.push(this.renderSquare( i * 3 + j));
}
text-decoration: none
from your CSS for .nav-link
.nav-link>li {
border-bottom: 10px solid black;
}
Hello I am looking for recources on how to create a navbar that becomes scrollable when the page turns into mobile view.
I would like to create something similar to the effect that can be seen here when toggling down to a smaller screen size with the scrolling menu: