hi its a bit too late i know but i have a sidenav menu but when i open it on iphone its half when i open it on android its normal whats the problem.
There is no way we could possibly even know where to begin to help you without seeing your code. Do you have this project up somewhere where we can view it?
import React from 'react'
import "./Header.css"
import { GiHamburgerMenu } from 'react-icons/gi';
import { AiOutlineClose } from 'react-icons/ai';
import Fade from 'react-reveal/Fade';
import { Link } from 'react-router-dom'
import productpage from "./productpage"
import { FaShoppingCart } from 'react-icons/fa';
import { useStateValue } from './StateProvider'
function Header() {
const [{ basket }] = useStateValue();
return (
<Fade top delay={250}>
<div id="discount">
<p>61% Discount ending soon!</p>
<a className="closedis" ><AiOutlineClose onClick={() => closeDiscount()}/></a>
</div>
<nav id="Header">
<img className="logo" src="./assets/logo.png" alt=""/>
<span id="asda"onClick={() => openNav()}><GiHamburgerMenu id="hambur"/></span>
<div id="mySidenav" className="sidenav">
<a className="closebtn" onClick={() => closeNav()}><AiOutlineClose /></a>
<a href="/">Home</a>
<a href="/productpage">Product Page</a>
<a href="/cart">Cart</a>
<a href="/Faq">FAQs</a>
<a href="#">Contact</a>
</div>
<a href="/cart" className="cart-system">
<div className="headeroption">
<FaShoppingCart id="shop"/>
<span className="headeroptline2 basketcount">{basket.lenght}</span>
</div>
</a>
</nav>
</Fade>
)
function openNav() {
document.getElementById('mySidenav').style.width='250px';
document.getElementById('mySidenav').style.height='100%';
}
function closeNav() {
document.getElementById('mySidenav').style.width='0px';
}
function closeDiscount() {
document.getElementById('Header').style.marginTop = "0px";
document.getElementById('discount').style.display = 'none';
}
}
export default Header
this is css
@import url('https://fonts.googleapis.com/css2?family=Mulish&display=swap');
#Header{
background-color: transparent;
align-items: center;
width: 100%;
display: flex;
position: sticky;
top: 0;
margin-top:40px;
z-index: 300;
justify-content: center;
box-sizing: border-box;
}
.logo{
width: 100%;
object-fit: contain;
max-width: 170px;
}
.asda{
color: white;
}
#hambur{
color: white;
cursor: pointer;
font-size: 36px;
position: absolute;
top: 35%;
left: 9%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin-right: 0;
}
body {
font-family: "Lato", sans-serif;
}
.sidenav {
width: 0;
position: fixed;
z-index: 500;
top: 30;
left: 0;
background-color: white;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
overflow-y: hidden;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 4vh;
color: black;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.sidenav2 {
width: 0;
position: relative;
z-index: 500;
top: 0;
left: 0;
background-color: white;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav2 a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: black;
display: block;
transition: 0.3s;
}
.sidenav2 a:hover {
color: #f1f1f1;
}
.sidenav2 .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#cart-icon{
color: white;
text-decoration: none;
font-size: 5vh;
cursor: pointer;
position: absolute;
top: 39%;
right: 6%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin-left: 0;
}
#cart-icon a{
color: white;
}
.sidecart{
width: 0;
background-color: white;
position: absolute;
left: 91%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin-left: 0;
}
#discount{
position: absolute;
top: 0%;
background-color: white;
width: 100%;
height: 50px;
text-align: center;
font-family: Mulish;
font-size: 5.9vw;
display: block;
transition-duration: 2s;
}
#discount p{
padding-top: 10px;
}
.closedis{
position: absolute;
top: 50%;
left: 93%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#shop{
color: white;
font-size: 5vh;
}
.cart-system{
position: absolute;
top: 40%;
left: 93%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-decoration: none;
}
.basketcount{
color: white;
font-size: 3vw;
margin-left: 2vh;
}
@media only screen and (min-width: 768px) {
.logo{
width: 100%;
object-fit: contain;
max-width: 230px;
}
}
Sorry, I don’t feel like trying to build your project in order to see it. You need to provide us with a link to a working app that we can look at to see what is going on. There are a ton of free sites you can host it on.
like can you please give an example
Here’s the link to my drum machine project:
Provide a similar link to your project.
thanks see you tomorrow its late good night.
Sounds like the container is not growing to full height and you are hiding the overflow. Maybe try giving the container height 100% or a min-height large enough to contain all the child elements.
But that’s all just a shot in the dark. As said, without seeing a working example (especially as you are using React and we can’t just copy-paste the code you posted) we really have no way of seeing what is wrong.