cant hide an <a> tag when the screen resolution is below 600px
Question
What i want to achieve is when i change the resolution of my browser to below 600px the tags except home will disappear. and only appear again when the sandwich button is clicked but the (admin control) and (sign out) is not disappearing. I think is because of i make the "display" attribute of both to "block" using javascript. that cause a conflict with the css code (.topnav a:not(:first){ display:none;}. i spend hours in fixing it and searching for a solution but with no luck. so any help and suggestion is greatly appreciated.
this is what it look like
here is the php
<?php
error_reporting(E_ALL & ~E_NOTICE);
error_reporting(E_ERROR | E_PARSE);
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="topnav" id="myTopnav">
<a href="index.php">Home</a>
<a href="speaker.php">Speakers</a>
<a href="about.php">About</a>
<a href="contact.php">Contact</a>
<a href="reservation.php">Reservation</a>
<a href="signOut.php" id="signOut" style="float:right">Sign Out</a>
<a href="myAccount.php" id="user" style="float:right; text-transform:capitalize;"><?php echo $_SESSION['firstname']; ?></a>
<a href="signUp.php" id="signUp" style="float:right">Sign Up</a>
<a href="signIn.php" id="signIn" style="float:right">Sign In</a>
<a href="adminControl.php" id="adminControl" style="float:right; width:110px;">Admin control</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
</div>
<div class="slideshow-container">
<div class="mySlides fade">
<img id="img1" src="img/homepage-image1.jpg">
<div class="text"></div>
</div>
<div class="mySlides fade">
<img id="img2" src="img/homepage-image2.jpg">
<div class="text"></div>
</div>
<div class="mySlides fade">
<img id="img3" src="img/homepage-image3.jpg">
<div class="text"></div>
</div>
<div id="dots">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<div id="index-welcome"><p>Welcome</p></div>
<div id="footer" >Copyright 2017</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 4000);
}
</script>
<script>
function ifAdmin()
{
document.getElementById("signIn").style.display = "none";
document.getElementById("signUp").style.display = "none";
document.getElementById("signOut").style.display = "block";
document.getElementById("adminControl").style.display = "block";
}
</script>
<script>
function ifNotAdmin()
{
document.getElementById("signIn").style.display = "none";
document.getElementById("signUp").style.display = "none";
document.getElementById("signOut").style.display = "block";
document.getElementById("adminControl").style.display = "none";
}
</script>
<script>
function ifNotLogin()
{
document.getElementById("user").style.display = "none";
document.getElementById("signOut").style.display = "none";
document.getElementById("adminControl").style.display = "none";
}
</script>
<script>
function myFunction()
{
var x = document.getElementById("myTopnav");
if (x.className === "topnav")
{
x.className += " responsive";
} else
{
x.className = "topnav";
}
}
</script>
<?php
if (isset($_SESSION['signedIn']) && $_SESSION['signedIn'] == true)
//if login
{
if($_SESSION['type'] == 1)
{
echo "<script type='text/javascript'>ifAdmin();</script>";
}
elseif($_SESSION['type'] == 0)
{
echo "<script type='text/javascript'>ifNotAdmin();</script>";
}
}
//if not login
else
{
echo "<script type='text/javascript'>ifNotLogin();</script>";
}
?>
</body>
</html>
css
@media screen and (max-width: 600px)
{
/*navbar*/
.topnav
{
height:auto;
width:100%;
overflow: hidden;
background-color: #4682B4;
position:fixed;
top:0;
z-index: 10;
}
.topnav a:not(:first-child)
{
display: none;
}
.topnav a.icon
{
float: right;
display: block;
height:15px;
}
.topnav a
{
height:15px;
width:auto;
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 16px 16px;
text-decoration: none;
font-size: 15px;
}
.topnav a:hover
{
background-color: lightblue;
color: black;
height:12px;
}
/*footer*/
#footer
{
background-color: #4682B4;
color: #f2f2f2;
text-align: center;
padding: 15px 25px;
font-size: 12px;
font-weight:bold;
position: absolute;
right: 0;
bottom: 0;
left: 0;
text-align: center;
}
}
@media screen and (max-width: 600px)
{
.topnav.responsive
{
position: relative;
}
.topnav.responsive .icon
{
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a
{
float: none;
display: block;
text-align: left;
}
}
please help i think im near it. i add display:none!important; in the css instead of "display:none" only, like chris Spil said but this happen. the "speaker tag" goes to the top besides "home tag".
this is what i change.
@media screen and (max-width: 600px)
{
/*navbar*/
.topnav
{
height:auto;
width:100%;
overflow: hidden;
background-color: #4682B4;
position:fixed;
top:0;
z-index: 10;
}
.topnav a#speaker
{
display:none;
}
.topnav a#about
{
display:none;
}
.topnav a#contact
{
display:none;
}
.topnav a#reservation
{
display:none;
}
.topnav a#user
{
display:none!important;
}
.topnav a#adminControl
{
display:none!important;
}
.topnav a#signOut
{
display:none!important;
}
.topnav a.icon
{
display:block;
float: right;
display: block;
height:15px;
}
.topnav a
{
height:15px;
width:auto;
float: left;
color: #f2f2f2;
text-align: center;
padding: 16px 16px;
text-decoration: none;
font-size: 15px;
}
.topnav a:hover
{
background-color: lightblue;
color: black;
height:12px;
}
@media screen and (max-width: 600px)
{
.topnav.responsive
{
position: relative;
}
.topnav.responsive .icon
{
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a#speaker
{
float: none;
display:block!important;
text-align: left;
}
.topnav.responsive a#about
{
float: none;
display:block!important;
text-align: left;
}
.topnav.responsive a#contact
{
float: none;
display:block!important;
text-align: left;
}
.topnav.responsive a#reservation
{
float: none;
display:block!important;
text-align: left;
}
.topnav.responsive a#user
{
float: none;
display:block!important;
text-align: left;
}
.topnav.responsive a#adminControl
{
float: none;
display:block!important;
text-align: left;
}
.topnav.responsive a#signOut
{
float: none;
display:block!important;
text-align: left;
}
}
3 answers
solution1
1 2017-07-31 19:47:28
can you try display:none!important; on your css code and let me know? Do you have this somewhere live?
solution2
1 2017-07-31 20:01:02
You can use onclick to set visibility and opacity in javascript.
To show you, I created this jsfiddle as an example.
EDIT: Updated the jsfiddle link.
solution3
0 2017-07-31 19:50:22
Looking at your HTML, you don't set the viewport in your <head> tag. Did you include this meta tag: <meta name="viewport" content="width=device-width, initial-scale=1.0"> .
This tag will give your browser instructions on how to control the dimensions and scaling of your page. More can be read about it here .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.