stackoom
  简体   繁体   中英

Toggling nav icon in browser mobile screen size will make nav-list-items dissapear when readjusting browser screen to large size

 原文  2020-06-18 15:37:55  3   1    javascript/ html/ css/ navigation/ media-queries

Question

Hello my current issue is that when the page initially loads the navigation works and appears properly when the browser is enlarged, however when readjusting the browser window to a smaller size, toggling the nav menu icon works but however will either

a) readjust the layout in the larger web browser screen if the mobile menu was left open or b) navigation items will entirely disappear if the mobile menu was closed

when readjusting the browser window back to the larger screen size.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chispot_Blog</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://kit.fontawesome.com/a23422f356.js" crossorigin="anonymous"></script>
    <script type="text/javascript"> 
            function toggle_visibility(id) {
               var e = document.getElementById(id);
               if(e.style.display == 'block')
                  e.style.display = 'none';
               else
                  e.style.display = 'block';
            }

            // Trying to figure out toggling visibility issue with navigation when going back to large screen
            // let navi = document.getElementById("nav-list");

            // navi.addEventListener(onresize, toggle_visibility){
            //     display = "block";
            // };

    </script>
</head>
<!-- Hamburger Icon from font awesome -->
<!-- <i class="fas fa-bars"></i> -->
<body>
    <header>
        <nav>
            <a href="index.html"><img class="logo" src="images/Component 1.png" alt="blog spot logo">
            <ul id="nav-list">
                <li class="nav-list-item"><a href="index.html">home</a></li>
                <li class="nav-list-item"><a href="cafes.html">cafes</a></li>
                <li class="nav-list-item"><a href="views.html">views</a></li>
                <li class="nav-list-item"><a href="posts.html">posts</a></li>
            </ul>
        </nav>
        <div class="hide">
            <a href="#" onclick="toggle_visibility('nav-list');"><i class="fas fa-bars fa-lg hamburger ham-toggle"></i></a>
        </div>
    </header>

I have tried to put display:block property under the appropriate class selector inside the larger media query. Which didn't populate any nav-list-items, I kept the display:flex property because thats how I want the nav-list-items to be formatted in the larger layout.

/* general */
body{
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

img{
    width: 100%;
}

a:hover, a:focus{
    color: black;
}

a .icon:hover{
    color: yellow;
}

.logo{
    width: 12em;
    margin-top: .5em;
    margin-bottom: .5em;
}

.main-image{
    height: 80%;
    width: 95%;
    object-fit: cover;
    border: 1em;
    border-color: #111111;
    border-style: solid;
}

.featured-img{
    height: 90%;
    width: 100%;
    object-fit: cover;
    order: 1;
    padding: 1em;
    background-color: lightgray;
    margin-left:  auto;
    margin-right: auto;
    margin-bottom: 1em;
}

.secondary-featured-article-img{
    height: 75%;
    width: 90%;
    object-fit: cover;
    order: 1;
    padding: .75em;
    background-color: lightgray;
}

/* Typography */

h1{
    font-size: 8rem;
    text-align: center;
}

h3{
    font-size: 3rem;
    margin-bottom: 0;
}

h4{
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0;
    margin-top: 0;
}

h5{
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0;
}

.site-intro-body{
    font-size: 1.15rem;
    font-weight: lighter;
    justify-content: center;
    align-items: center;
    order: 2;

}

.secondary-featured-article-body{
    font-size: .9rem;
    font-weight: lighter;
}

footer{
    background-color: black;
    color: white;
}

.side-page-post-title{
    margin-top: .5em;
    margin-bottom: 0;
    padding-top: .25em;
    padding-bottom: .25em;
    background-color: black;
    color: white;
}

.side-page-post-body{
    margin-left: 6em;
    margin-right: 6em;
    margin-top: 2em;
    margin-bottom: 2em;
}
/* Layout Mobile Screen*/
header{
    background-color: #f8f8f8;
    width: 100%;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    z-index: 999;
}

header .hamburger{
    margin-top: 1em;
    margin-right: 1em;
    align-content: flex-start;
    /* visibility: hidden;  HIDE WHEN IN MEDIA QUERY */
}

nav{
    display: flex;
    width: 100%;
    flex-direction: column;
    padding-left: 2em;
    align-items: center;
    justify-content: center;

}

#nav-list{
    margin-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: row;
    list-style: none;
    margin-bottom: 0;
    display: none;
}

.nav-list-item{
    margin: .1em;
    font-size: 1.5rem;
    font-weight: 700;
}

a{
    text-decoration: none;
    color: darkgray;
}

main{
    display: flex;
    flex-direction: column;
    width: 100%;
}

.main-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 4em;
    background-color: black;
    color: white;
    margin-top: 0;
    padding-bottom: 3em;
    padding-top: 4em;
}

.site-intro{
    width: 90%;
    padding: 0 5em;
}

.site-intro p{
    column-count: 2;
}

.site-photo{
    height: 100%;
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    order: 1;
}

.article-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 5em;
    margin-top: 0;
}

.featured-article{
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    padding-right: 2em;
    padding-top: 2.5em;

}

.featured-article-body{
    width: 100%;
    order: 2;
    margin-top: 0;
    text-align: center;
}

.secondary-featured-article-section{
    width: 100%;
    display: flex;
    flex-direction: column;

}

.secondary-featured-article{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 2em;
    padding-top: 2em;
    margin-bottom: 0;

}

.secondary-featured-article-body{
    width: 95%;
    order: 2;
    margin-top: 0;
    text-align: center;

}

.secondary-featured-article-border{
    border-bottom: .15em lightgray solid;
}

footer{
    padding-top: 3em;
    padding-bottom: 3em;
}

.footer-body{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1em;
}

.social-media-icons{
    display: flex;
    justify-content: center;
    align-items: center;

}

.icon{
    margin-right: .5em;
}

.hide{
    height: 100%;
    align-self: flex-start;
}

.side-page-post-body{
    margin-top: 4em;
    margin-bottom: 4em;
}

.article-listings{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

.article-listing{
    display: flex;
    height: 45vh;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 2em;
    background-color: whitesmoke;
    padding-top: 2em;
    padding-bottom: 2em;
}

.article-blog-description{
    display: flex;
    width: 50%;
    height: 90%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    order: 2;
}

.article-listing-image{
    order: 1;
    width: 40%;
    height: 90%;
    object-fit: cover;
    align-items: center;
}

.article-listing-title{
    font-size: 1.75em;
    margin-bottom: .5em;
}

.article-listing-body{
    margin-top: 0;
    font-size: .9em;
}


/* Layout Large Screen*/
@media screen and (min-width: 760px){

        .main-image{
            height: 75vh;
            width: 90%;
            object-fit: cover;
            border: 1em;
            border-color: #111111;
            border-style: solid;
        }
        .featured-img{
            height: 70vh;
            width: 45%;
            object-fit: cover;
            order: 1;
            padding: 1em;
            background-color: lightgray;
        }

        .secondary-featured-article-img{
            height: 40vh;
            width: 45%;
            object-fit: cover;
            order: 1;
            padding: .75em;
            background-color: lightgray;
        }

        header{
            background-color: #f8f8f8;
            width:100%;
            margin-bottom:0;
            display:flex;
            justify-content:space-between;
            align-items:center;
            position: fixed;
        }

        header .hamburger{
            margin-top: auto;
            margin-bottom: auto;
            margin-right: 1em;
            visibility: hidden;  /*HIDE WHEN IN MEDIA QUERY */
        }

        nav{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            padding-left: 2em;
            align-items: center;
        }

        #nav-list{
            margin-top: 0;
            display: flex;
            flex-direction: row;
            justify-content: row;
            list-style: none;
            margin-bottom: 0;
            visibility: visible;

        }

        .nav-list-item{
            margin: 1em;
            font-size: 1.5rem;
            font-weight: 700;
        }

I'm currently using a simple script I had found on css-tricks but am open to alternative suggestions to resolve the problem of wanting to simply hide and show the nav menu without any issues affecting the other layout in the large media query.

1 answers

solution1
 0 ACCPTED  2020-06-18 18:09:33

You need set the display property of #nav-list back to flex when switching to larger viewport, since it's already overrided when mobile navigation is toggled.

@media screen and (min-width: 760px){
  #nav-list {
    display: flex!important;
  }
}

暂无
暂无

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.

Related Question Boostrap nav menu immediately disappearing on click on mobile/small screen size How to detect mobile browser for screen size? How to move nav items off the screen when viewing on mobile How to make a nav HREF load the link differently depending on browser size How to make electron browser fulle screen size? How to 'hide' html element content when the browser re-size to mobile screen size? Make Header dissapear when full screen mode is detected in browser (F11) responsive nav not toggling when i click the icon I want to move my Left nav bar menu <div> to Top when the screen size is 800px WordPress theme navbar stop Working when resizing the browser screen size
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM