Develop Reference

Mobile hamburger menu covers the hyperlinks on the pages and prevents users from clicking on them

mobile menu closed (the pink links are unclickable because of the menu)
html {
overflow-x: initial !important;
}
/*nav-bar-desktop*/
.mainNav {
display: none;
}
/*nav-bar-mobile*/
.page-header {
background: #322759;
width: 100%;
height: 20%;
position: fixed;
.logo {
position: fixed;
width: 35%;
margin-top: -28px;
margin-left: -40px;
}
.nav-bar {
z-index: -1;
}
.page-header-links {
z-index: 0;
}
}
.nav-bar-mobile {
position: relative;
display: block;
}
.nav-bar-mobile button {
position: fixed;
right: 40px;
top: 40px;
z-index: 2;
cursor: pointer;
background: transparent;
border: none;
}
.menuNav {
overflow-y: none;
list-style: none;
top: 0;
right: 0;
bottom: 0;
height: 100vh;
width: 0;
overflow: hidden;
max-width: 414px;
text-align: center;
}
.menuNav.showMenu {
width: 100%;
right: 0px;
height: 100vh;
padding-top: 200px;
position: fixed;
background: #322759;
.mobile-nav-monster {
position: fixed;
left: 0;
bottom: 0;
width: 65vw;
justify-content: flex-start;
}
}
.nav-tabs {
padding: 20px;
border-bottom: none !important;
text-decoration: none;
color: #D9D8D8;
}
.menuNav:link {
color: #D9D8D8;
}
.menuNav:visited {
color: #D9D8D8;
}
.menuNav:active {
color: #E87DA6;
}
.hamburger-close {
color: #FFFFFF;
width: 40px;
height: 40px;
margin-top: 10px;
transform: scale(1.7);
}
.hamburger-open {
color: #FFFFFF;
width: 40px;
height: 40px;
margin-top: 10px;
transform: scale(1.7);
}
}
This is my css file containing the styling for the mobile hamburger menu. The links are clickable when I set the display:none for either the nav-bar class (which is the styling for the grid containing the nav bar) or the menuNav (styling for the actual hamburger menu, note it is different from mainNav which is the desktop ver). I've been playing around with z-index but they don't really affect anything (assuming this is because I have to go through all the pages and make them a higher z index than the hamburger menu) but I was wondering if there was a different solution?

Check the position style and also check if you have set the z-index properly on the elements. The greater z-index appears in the front.

Css menu dropdown

I currently have a lack of idea on a css menu that I would like to realize. What I would like to do is that my menu is up and not down but that my TEST is at the top of my list and does not move until I no longer have my mouse on it. I don’t know how to do that right now, and if anyone has any ideas, I take it.Thank you for a good day.
.span1 {
background-color: #e83737;
color: white;
position: absolute;
text-align: center;
vertical-align: middle;
line-height: 60px;
top: 413px;
left: 120px;
width: 192px;
height: 68px;
font-size: 20px;
}
.span1:hover {
background-color: #e83737;
position: absolute;
left: 120px;
top: 123px;
width: 192px;
height: 68px;
font-size: 20px;
}
.dropdown ul li:hover ul {
height: initial;
bottom: 100%;
overflow: visible;
background: lightgray;
}
.dropdown-child {
display: none;
background-color: #f28c8c;
position: absolute;
width: 192px;
top: 190px;
left: 120px;
}
.dropdown-child a {
color: white;
padding: 20px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-child {
display: block;
}
<div class="dropdown">
<span class="span1">TEST</span>
<div class="dropdown-child">
abc
abc
abc
abc
</div>
</div>
Codepen demo: https://codepen.io/tiboo__/pen/XWjoeQB

Not sure if I got what you're trying to achieve but try to change .span1:hover { to .dropdown:hover .span1 {.

There must be a relative positioned parent for a child absolute block.
Add this to your css:
.dropdown {
position: relative;
}
And the positioning rules for .span1:
top: 0;
left: 0;
Also, some selectors contained extra rules and selectors.
.dropdown {
position: relative;
}
.span1 {
background-color: #e83737;
color: white;
position: absolute;
text-align: center;
vertical-align: middle;
line-height: 60px;
top: 0;
left: 0;
width: 192px;
height: 68px;
font-size: 20px;
}
.dropdown ul li:hover ul {
height: initial;
bottom: 100%;
overflow: visible;
background: lightgray;
}
.dropdown-child {
display: none;
background-color: #f28c8c;
width: 192px;
}
.dropdown-child a {
color: white;
padding: 20px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-child {
display: block;
}
<div class="dropdown">
<span class="span1">TEST</span>
<div class="dropdown-child">
abc
abc
abc
abc
</div>
</div>

How can I change the default image size of this lightbox #lightbox2?

I'm trying to build a gallery website an i'm using the lightbox2 of this guy: https://lokeshdhakar.com/projects/lightbox2/
Can somebody tell me, where I can change the default image size? I want the picture in full screen size. The default image size is to small.
JS:
I can't post the whole JS Code because it's to big and i don't know which part it is. But you can find the JS code here: https://github.com/lokesh/lightbox2/blob/dev/dist/js/lightbox-plus-jquery.min.js
CSS:
.lb-loader,
.lightbox {
text-align: center;
line-height: 0;
position: absolute;
left: 0
}
body.lb-disable-scrolling {
overflow: hidden
}
.lightboxOverlay {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color: #000;
filter: alpha(Opacity=80);
opacity: .8;
display: none
}
.lightbox {
width: 100%;
z-index: 10000;
font-weight: 400;
outline: 0
}
.lightbox .lb-image {
display: block;
height: auto;
max-width: inherit;
max-height: none;
border: 4px solid #fff
}
.lightbox a img {
border: none
}
.lb-outerContainer {
position: relative;
width: 250px;
height: 250px;
margin: 0 auto;
border-radius: 4px;
background-color: #fff
}
.lb-outerContainer:after {
content: "";
display: table;
clear: both
}
.lb-loader {
top: 43%;
height: 25%;
width: 100%
}
.lb-dataContainer {
margin: 0 auto;
padding-top: 5px;
width: 100%;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px
}
.lb-dataContainer:after {
content: "";
display: table;
clear: both
}
.lb-data {
padding: 0 4px;
color: #ccc
}
.lb-data .lb-details {
width: 85%;
float: left;
text-align: left;
line-height: 1.1em
}
.lb-data .lb-caption {
font-size: 13px;
font-weight: 700;
line-height: 1em
}

What if you change the options to fitImagesInViewport:true options are here
Or change the css to have responsive img based on the size of the container?
img{
width: 100%;
height: auto;
}
.image-container{
width: 100vw;
height: 100%;
}
html
<div class="image-container">
<img src="https://picsum.photos/id/1025/200/300" />
</div>

Why is the ::before pseudo element going on top on mobile menu?

I have a menu that has a png img as ::before pseudo-element, and instead of sticking next to menu items, it's going on top.
const menu_button = $('img');
const menu_nav = $('#myNav');
menu_button.click(function(){
menu_nav.toggleClass('menu_open')
});
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #d6cece;
overflow-y: auto;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 10%;
width: 100%;
margin-top: 50px;
}
.overlay a {
padding-left: 30px;
padding-bottom: 5px;
padding-top: 5px;
text-decoration: none;
font-size: 27px;
display: block;
transition: 0.3s;
font-style: italic;
color: black;
}
.overlay-content a:before {
width: 6px;
content: " ";
background-image: url(https://picsum.photos/5);
background-repeat: no-repeat;
position: absolute;
left: 18px;
top: 18px;
height: 20px;
}
.menu_open {
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://picsum.photos/100">
<div id="myNav" class="overlay">
<div class="overlay-content">
Test
Test
Test
Test
</div>
</div>
Why this behavior? It's working without the menu, but not when the elements are vertically aligned. Please check out the snippet I quickly made.

it should probably be something like this
.overlay-content > a:before {
content: "";
display: block;
background: url("https://picsum.photos/5") no-repeat;
width: 20px;
height: 20px;
float: left;
margin: 0 6px 0 0;
}
and then change this to
.overlay-content a:before {
width: 6px;
content: " ";
background-image: url(https://picsum.photos/5);
background-repeat: no-repeat;
position: absolute;
left: 18px;
top: 18px;
height: 20px;
}

the elements are going "on top" because you set top to 18px for all elements.
that wouldn't be a problem if the positioning context for absolute positioning, was set correctly (the a element instead of the overlay-content div).
you should set the positioning context to the a element itself:
.overlay a {
position: relative;
}

parallax background image is not display on iphone but it is display on android how can i fix this

i wanted to create a parallax, it display very well on android but when i open it on iphone or ios tablet the backgroun image dissapear. There is no problem on android or windows device. How can i fix this any idea and also when i click dropdown on android the dropdown menu works but on ios device it is not working. Here is domain. gokkar.com have a nice days thx
.parallaxSet{
background-attachment: fixed;/*background-size: 2261.76px 1178px;*/background-position: 50% -103.564px;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
}
<div class="parallax background section-height parallaxSet" style="background-image: url(assets/images/banner2.jpg);" data-diff="200">
<div class="parallax-wrapper">
<div class="parallax-scroll">
<div class="lastline">
<h5>GÖKKAR KURUMSAL</h5>
<h6>‘‘Şirketimiz 22 Aralık 1995 tarihinde kurulmuştur. 5 Ocak 1996 tarih ve 3951 sayılı Ticaret Sicili Gazetesi’nde yayımlanarak tescil edilmiştir.’’</h6>
İncele
</div>
</div>
</div>
</div>
<style>
.parallax {
width: 100%;
height: 100%;
overflow: hidden;
display: block;
margin: 50px 0 0 0;
position: relative;
}
.parallax:after {
bottom: 0;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-width: 60px;
margin-left: -60px;
z-index: 250;
}
.parallax.overflow,
.parallax.overflow .parallax-wrapper {
height: auto;
min-height: 100%;
}
.parallax.background {
background-repeat: no-repeat;
background-position: 50% 50%;
background-position: 50% 50%\9 !important;
}
.parallax.section-height {
height: 400px;
}
.parallax-wrapper {
display: table;
width: 100%;
height: 100%;
overflow: hidden;
}
.parallax-scroll {
display: block;
position: relative;
}
.lastline {
width: 60%;
display: block;
margin: 5px auto 50px auto;
text-align: center;
padding: 100px 0;
}
.lastline > h5 {
font-size: 50px;
font-weight: 700;
color: #fff;
margin: 0;
padding: 0;
}
.lastline > h6 {
font-size: 20px;
font-weight: 100;
color: #fff;
margin: 25px 0;
}
.lastline > a {
width: 300px;
height: 55px;
display: block;
line-height: 50px;
font-size: 20px;
margin: 35px auto;
border: 1px solid #fff;
background: #fff;
color: #000;
font-weight: 500;
text-align: center;
}
.lastline > a:hover {
background: none;
color: #fff;
}
</style>

You are changing your header from fixed to position: static on devices with max-width: 800px
change:
#media screen and (max-width: 800px)
header {
height: auto;
position: static;
overflow: hidden;
border-bottom: 1px solid #eee;
display: block;
}
To:
position: fixed;
You will also have to add some margin top so the background image doesn't sit under the header.

IOS deactivated the "background-attachment:fixed" feature to reduce the costs on mobile devices.
Your only option is to use background-attachment:scroll. That dosen't the same effect as you wanted but you could do a workaround with some JavaScript as you can see here
The better way:
Use a Media Query and show a Single image with a fixed position.