My website has a hamburger menu made with only HTML and CSS. When the hamburger icon is clicked and the menu activated, the menu titles are displayed over the background image instead of having a white background. (The hamburger menu has a transparent background.) How do I make it so that the menu displays OVER whatever is in the background, with its own white background?`
<div class="nav">
<h1>MA</h1>
<label for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<div class="menu">
my work
about
contact
</div>
</div>
.nav {
text-align: right;
height: 50px;
line-height: 70px;
margin-bottom: 20px;
margin-top: 15px;
font-family: Gothic A1;
font-size: 20px;
color: black;
}
.menu {
margin: 0 30px 0 0;
background-color: white;
}
.menu a {
clear: right;
text-decoration: none;
color: black;
margin: 0 10px;
line-height: 70px;
padding-left: 30px;
}
.menu a:hover {
color: #edbecb;
text-decoration: none;
}
label {
margin: 0 30px 0 0;
font-size: 50px;
line-height: 70px;
display: none;
width: 26px;
float: right;
}
#toggle {
display: none;
}
#media only screen and (max-width: 500px) {
label {
display: block;
cursor: pointer;
padding-right: 30px;
}
.menu {
text-align: right;
width: 100%;
/* height: 1000px;*/
display: none;
background-color: white;
line-height: 50px;
margin-top: 0px;
padding-right: 30px;
}
.menu a {
display: block;
margin: 0;
background-color: white;
}
#toggle:checked + .menu {
display: block;
background-color: white;
position: absolute;
}
#toggle:checked + .menu a {
background-color: white;
position: absolute;
}
#toggle:checked + label {
background-color: white;
}
}
i'm trying to make landing page / with big hero picture (contains two png images over each other) and with some button and some text.
1.I try to create it with positioning absolute and relative / but these values gives me some problem with my responsive version. Also i got problem with other design stuff under the hero section. I really dont know how to sort section of landing page without positioning.
2.I also have small triangle in the middle of hero image / i use it as a pseudoelement / but when i use media queries this triangle floats instead of staying in the fix position.
Thank you very much for your advice.
<section class="header_container">
<div class="section_img">
<div class="bg_layer"><img src="images/main_bg.png" alt=""></div>
<div class="overlay"><img src="images/woman.png" alt=""></div>
</div>
<div class="header_wrapper hero">
<img src="images/logo_ap.svg" class="logo" alt="logo">
<h1>Lorem ipsum dolor sit amet consectetur,<br>
<span> adipisicing elit. Repellendus, nobis.</span></h1>
<button class="btn_main">Lorem ipsum</button>
<p class="btn_code">Lorem ipsum</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas ut corrupti laudantium.</p>
</div>
</section>
.header_container {
max-width: 1255px;
margin: 0 auto;
position: relative;
}
.bg_layer{
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.overlay{
width: 100%;
position: absolute;
top: 0;
}
.header_wrapper{
position: relative;
top: 520px;
left: 8rem;
}
.logo{
position: absolute;
top: -420px;
}
.header_wrapper.hero h1{
position: absolute;
top: -290px;
font-family: "Poppins", sans-serif;
font-size: 40px;
font-weight: 400;
color: #fff;
line-height: 1.2;
}
.header_wrapper h1 span{
font-weight: 900;
}
.btn_main {
position: absolute;
top: -130px;
font-size: 20px;
font-weight: 400;
padding: 15px 40px;
background-color: var(--green);
border-radius: 4px;
}
.header_wrapper .btn_code{
position: absolute;
top: -70px;
left: 50px;
font-size: 14px;
text-decoration: underline;
}
.btn_code a{
color: #ff7d7d;
}
.header_wrapper p{
position: absolute;
top: 40px;
font-size: 14px;
color: #ff7d7d;
line-height: 1.8;
}
.header_wrapper:after {
content:'';
position: absolute;
bottom: -180px;
left: 45%;
overflow: hidden;
border-top: solid 30px var(--red);
border-left: solid 30px transparent;
border-right: solid 30px transparent;
}
So, I am using flexbox for some columns. Basically column 1 is left-aligned, column two i centered, and column three is right-aligned. No big deal, or so I thought. In Chrome, everything looks fine, even when looking at things through Chrome's Inspect tool...but on my iPhone I can't get the right column to justify-content.
My code looks like:
<div id="nav">
<div class="wrap">
<div>
<p><i class="far fa-dot-circle"></i> Watch</p>
</div>
<div>
<p><img src="<?php bloginfo('template_directory'); ?>/images/logo.png" alt="" title="" /></p>
</div>
<div>
<p><i class="fas fa-donate"></i> Give</p>
</div>
</div>
</div>
The css looks like:
#nav div {
align-items: center;
display: flex;
flex: 1;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
letter-spacing: 2px;
line-height: 18px;
padding: 10px 20px 0;
text-transform: uppercase;
}
#nav > .wrap > div:nth-child(1) {
background: #00ff00;
justify-content: left;
}
#nav > .wrap > div:nth-child(2) {
background: #ff0000;
justify-content: center;
}
#nav > .wrap > div:nth-child(3) {
background: #0000ff;
justify-content: right;
}
#nav img {
max-width: 175px;
width: 100%;
}
#nav i {
color: #fff;
margin-right: 5px;
}
#nav a {
color: #fff;
text-decoration: none;
}
Here is the Fiddle: https://jsfiddle.net/1kw5g3h7/
I added the following code this morning and this works:
#nav > .wrap > div:nth-child(3) p {
text-align: right;
width: 100%;
}
I don't like this approach, it seems like to me the justify-content just isn't working is there a way to fix this using flexbox? I'm trying to understand why my original code isn't working on my iPhone? Maybe it's because I have Font Awesome icons in front of the text, I just don't know. Any ideas?
Thanks,
Josh
I didn't realize until now that I hadn't ever posted my final code. This is what I ended up with: https://jsfiddle.net/tc36e24s/2/
HTML:
<div id="head">
<div id="nav">
<i class="ion-android-close"></i>
<ul>
<li>Watch</li>
<li>Give</li>
<li><img src="images/logo.png" alt="Logo" title="Logo" /></li>
<li>Visitors</li>
<li>Contact</li>
</ul>
</div>
<div id="logo">
<p><img src="images/logo.png" alt="Logo" title="Logo" /></p>
<div onclick="openNav()" class="open">
<i class="ion-android-menu"></i>
</div>
</div>
</div>
CSS
body {
background: #009151;
}
#head {
display: flex;
flex-flow: column;
height: 100vh;
}
#nav ul {
flex: 0 1 auto;
}
#nav ul img {
max-width: 175px;
width: 100%;
}
#nav ul i {
color: #9ac2e7;
margin-right: 5px;
}
#nav li {
font-family: 'Open Sans', sans-serif;
letter-spacing: 2px;
line-height: 18px;
padding: 10px 20px 0;
text-align: center;
text-transform: uppercase;
}
#logo {
display: flex;
}
#logo img {
max-width: 200px;
margin: 20px 30px;
width: 100%;
}
#media screen and (max-width: 800px) {
#head .open {
color: #9ac2e7;
font-size: 30px;
margin: 20px 30px;
text-align: right;
width: 100%;
}
#head .open:hover {
cursor: pointer;
}
#nav {
background: #9ac2e7;
display: none;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
#nav ul {
align-items: center;
display: flex;
flex-flow: column;
height: 100%;
justify-content: center;
width: 100%;
}
#nav ul a {
color: #000;
text-decoration: none;
}
#nav li {
font-size: 20px;
padding: 10px 0;
}
#nav li:nth-child(3) {
display: none;
}
#nav .close {
color: #000;
font-size: 30px;
position: absolute;
right: 30px;
top: 20px;
}
}
#media screen and (min-width: 801px) {
#nav .close {
display: none;
}
#nav[style] {
display: block !important;
}
#nav ul {
align-items: center;
display: flex;
}
#nav ul a {
color: #9ac2e7;
text-decoration: none;
}
#nav li {
flex: 1;
font-size: 14px;
}
#logo {
display: none;
}
}
JS
function openNav() {
document.body.style.overflow="hidden";
document.getElementById("nav").style.display = "block";
}
function closeNav() {
document.body.style.overflow="scroll";
document.getElementById("nav").style.display = "none";
}
I added some JS to make my menu work on mobile, but other than that this is code I went with...which is pretty much the same as before except I added two additional links (one on each side of the logo).
Thanks,
Josh
When someone open the page with phone I want the menu to look like this:
#side-menu {
background-color: #581845;
padding: 0px;
}
#side-menu h1 {
color: #fff;
text-align: center;
margin-left: 10px 0px;
font-size: 25px;
}
#side-menu ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#side-menu a {
padding: 15px 20px;
text-decoration: none;
color: #fff;
font-weight: bold;
font-size: 16px;
display: block;
}
#side-menu .glyphicon {
margin-right: 6px;
}
#side-menu a:hover {
background-color: #000;
color: #fff;
display: block;
}
#side-menu .active a {
color: #fff;
background-color: #293846;
}
#side-menu .settings-btn {
background-color: #1ab394;
}
#side-menu .settings-btn a {
color: #fff;
}
#side-menu .settings-btn a:hover {
background-color: #1ab394;
}
#side-menu .collapseable li {
padding-left: 20px;
padding-top: 5px;
}
#side-menu .collapseable a {
color: #9fb1c2;
font-size: 13px;
padding: 5px 10px;
text-decoration: none;
display: block;
}
#side-menu .collapseable a:hover {
color: #fff;
}
#side-menu .collapseable {
border-left: 4px solid #1ab394;
background-color: #293846;
}
#side-menu .link>ul>li {
padding-bottom: 10px;
}
/*-- side-menu end --*/
.display-table {
display: table;
padding: 0px;
height: 100%;
width: 100%;
}
.display-table-row {
display: table-row;
height: 100%;
}
.display-table-cell {
display: table-cell;
float: none;
height: 100%;
}
.valign-top {
vertical-align: top;
}
#nav-header {
background-color: #000;
border-bottom: 10px solid #fff;
}
#nav-header #header-search-field {
padding-top: 17px;
vertical-align: center;
border: none;
width: 300px;
outline: none;
}
#nav-header ul {
margin: 0px;
padding: 0px;
list-style: none;
color: #676a6c;
}
#nav-header ul li {
float: right;
margin-left: 15px;
padding: 17px 0px;
}
#nav-header ul .glyphicon {
color: #676a6c;
}
.label-meassage {
background-color: #1ab394;
}
#nav-header ul a {
text-decoration: none;
}
#nav-header .logout {
color: #676a6c;
}
#nav-header .logout:hover {
color: #676a6c;
}
#nav-header #welcome {
margin-right: 20px;
}
#nav-header ul .label {
position: absolute;
margin-top: -10px;
margin-left: -5px;
}
#nav-header .fixed-width {
width: 35px;
}
.navbar-default {
background-color: #000;
}
.navbar-default .navbar-toggle {
border-color: #1ab394;
background-color: #1ab394;
}
.navbar-default .icon-bar {
border: 1px white solid;
}
.navbar-default .navbar-toggle:hover {
background-color: #1ab394;
}
.navbar-default .navbar-toggle:focus {
background-color: #1ab394;
}
#admin-footer {
position: absolute;
width: 100%;
bottom: 0px;
background-color: #fff;
padding: 10px;
font-size: 12px;
color: #676a6c;
}
<div class="container-fluid display-table">
<!-- start container-fluid -->
<div class="row display-table-row">
<!-- side menu -->
<div class="col-md-2 col-sm-1 hidden-xs display-table-cell valign-top" id="side-menu">
<h1 class="hidden-xs hidden-sm">test</h1>
<ul >
<li class="link">
<a href="index.php">
<span class="glyphicon glyphicon-th" aria-hidden="true"></span>
<span class="hidden-sm hidden-xs">test1</span>
</a>
</li>
<li class="link">
<a href="add.php">
<span class="glyphicon glyphicon-th" aria-hidden="true"></span>
<span class="hidden-sm hidden-xs">test2</span>
</a>
</li>
<li class="link">
<a href="#">
<span class="glyphicon glyphicon-th" aria-hidden="true"></span>
<span class="hidden-sm hidden-xs">test3</span>
</a>
</li>
</ul>
</div>
codepen.io
It's my first time here on the forum. I am a beginner in webdesign and encountered a problem I could not find correct answer to. So far I searched for my answer on mutliple sites but the closest to my problem was this;
Horizontal to vertical menu, on browser window resize.
My problem is as followed: my nav ul list gets stacked when I resize my browserwindow to small....I know it must be possible to let it all stay horizontally on a desktopscreen as it is...like on the page of APPLE store for example. I just have no clue what I am doing wrong.
Underneath is my code....hopefully someone can help me and filter out my errors.
HTML
<div id="navcontainer">
<div id="navlist">
<ul>
<li id="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
CSS
body {
margin: 200px 0px 10px 0px;
padding: 0px;
text-align: center;
background-image:url(../images/bg.jpg);
background-repeat: repeat;}
/***** HEADER *****/
#header {
width: 900px;
text-align: center;
font-family: Raleway;
font-size: 30px;
font-weight: bolder;
font-variant: normal;
color: rgba(51,51,51,1);
position: absolute;
display: block;
top: 0px;}
/***** NAVIGATION *****/
#navcontainer {
position: relative;
background-image: url(../images/navbar.png);
background-repeat: repeat-x;
height: 37px;
-o-box-shadow: 0em 0.2em 0.3em 0em rgba(51,51,51,0.8);
-moz-box-shadow: 0em 0.2em 0.3em 0em rgba(51,51,51,0.8);
-webkit-box-shadow: 0em 0.2em 0.3em 0em rgba(51,51,51,0.8);
-ms-box-shadow: 0em 0.2em 0.3em 0em rgba(51,51,51,0.8);
box-shadow: 0em 0.2em 0.3em 0em rgba(51,51,51,0.8);
font-family: Raleway;
display: block;
width: 100%; }
#navlist {
float:left;
position:relative;
left:50%;
padding-top: 1.5px;}
#navlist ul {
float:left; /* IE6 needs this */
position:relative;
left:-50%;
list-style:none;
margin: 0 auto;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 100%;
font-style: normal;
font-weight: bolder;
font-variant: normal;
text-decoration: none;
padding: 0px; }
#navlist li {
float:left;
display: inline;
padding-top: 6.8px;
padding-right: 25px;
padding-bottom: 6.8px;
padding-left: 25px;}
#navlist li a {
text-decoration: none;
color: #424242;
padding-top: 6.8px;
padding-right: 19px;
padding-bottom: 6.8px;
padding-left: 19px;}
#navlist li a:hover {
background-image: url(../images/navbar3.png);
background-repeat: no-repeat;
background-position: bottom;
padding-right: 19px;
paddin-left: 19px;}
#navlist li a:active {
background-image: url(../images/navbar1.png);
background-repeat: no-repeat;
background-position: bottom;
border-width: 1px;
border-top-style: inset;
border-right-style: inset;
border-bottom-style: none;
border-left-style: inset;
border-top-color: rgba(102,102,102,1);
border-right-color: rgba(153,153,153,1);
border-left-color: rgba(153,153,153,1); }
#navlist li a:visited {
text-decoration: none;
color: #424242;
padding-top: 6.8px;
padding-right: 0px;
padding-bottom: 6.8px;
padding-left: 0px;}
#navlist li a:focus {
background-image: url(../images/navbar1.png);
background-repeat: no-repeat;
background-position: bottom;
padding-right: 19px;
padding-left: 19px;
border-width: 1px;
border-top-style: inset;
border-right-style: inset;
border-bottom-style: none;
border-left-style: inset;
border-top-color: rgba(102,102,102,1);
border-right-color: rgba(153,153,153,1);
border-left-color: rgba(153,153,153,1);
text-shadow: 1px 1px #FFF, -0.3px -0.3px #000;}
I had this same problem with my navigation. My nav wasn't structured exactly like the solution below but applying the CSS accordingly worked great.
Here is the solution I found.
http://jsfiddle.net/9x7Am/5/
HTML
<ul id='navbar'>
<li><a href='#'> 1 </a></li>
<li><a href='#'> 2 </a></li>
<li><a href='#'> 3 </a></li>
<li><a href='#'> 4 </a></li>
<li><a href='#'> 5 </a></li>
<li><a href='#'> 6 </a></li>
</ul>
CSS
#navbar {margin:0; padding:0; overflow:hidden; width:100%;}
li {width:100%}
li a {padding: 6px 0; float:left; width:16%; text-align:center;}