Skip to content Skip to sidebar Skip to footer
Home / Css / Javascript

Adjusting Desktop Display For Responsive Site Navigation With Topnav And Event Listeners

Post a Comment
I've been working on this for almost the entire day. I'm almost there. Just need the finishing touches that I don't know how to implement. My navigation should look like this: Thi

Solution 1: 

    body, html {
        max-width: 100%;
        padding: 0vw;
        margin: 0vw;
    }
    
    .header {
    background-color: #ffffff;
    position: fixed;
    top: 0%;
    left: 0%;
    right: 0%;
    height: 10vh;
    z-index: 1;
    border-bottom: solid;
    }
    
    .headerfill {
    height: 10vh;
    border: none;
    }
    
    .header-container {
    width: 100%;
    height: auto;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    margin: auto;
    margin-left: auto;
    margin-right: auto;
    }
    
    .logo-container {
    float: left;
    width: 40%;
    padding-left: 1vh;
    display: flex;
    flex-flow: row nowrap;
    justify-content: left;
    }
    
    .navigation-container {
      width: 60%;
      display: flex;
      flex-flow: row nowrap;
      //justify-content: space-evenly; 
      margin: auto;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }
    .space-evenly {
      justify-content: space-evenly;
    }
    
    .logo {
    height:8vh;
    max-width: 80vw; 
    padding-top:1vh;
    padding-bottom:1vh;
    padding-left:4vh;
    display: block;
    object-fit: contain;
    }
    
    img{
    -webkit-user-drag: none;
    }
    
    .nav {
    font-family: 'Roboto', serif;
    font-size: 2vw;
    text-align: center;
    margin-top: auto;
    margin-bottom: auto;
    color: #000000;
    padding-left: auto;
    padding-right: auto;
    line-height: 1em;
    object-fit: contain;
    text-decoration: none;
    }
    
    
    @media only screen and (max-width: 500px) {
    .nav {
    font-family: 'Roboto', serif;
    font-size: 2.5vw;
    text-align: left;
    margin-top: auto;
    margin-bottom: auto;
    color: #000000;
    padding-left: auto;
    padding-right: auto;
    line-height: 1em;
    object-fit: contain;
    text-decoration: none;
    }
    }
    
    .nav:hover {
    color: #096e67;
    }
    
    a:link {
        color: #000000;
        text-decoration: none;
    }
    
    h1 {
    font-family: 'Roboto', serif;
    font-size: 4vw;
    text-align: left;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #000000;
    padding-left: 4vh;
    padding-right: 2vh;
    padding-bottom: 0.5vh;
    line-height: 1em;
    }
    
    @media only screen and (max-width: 500px) {
    h1 {
    font-family: 'Roboto', serif;
    font-size: 8vw;
    text-align: left;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #000000;
    padding-left: 2vh;
    padding-right: 2vh;
    padding-bottom: 0.5vh;
    line-height: 1em;
    }
    }
    
    
    
    button {
      display: none;
    }
    
    nav {
        display: flex;
        flex: 1;
        justify-content: space-evenly;
    }
    
    @media (max-width: 500px) {
      nav {
        position: relative;
        text-align: left;
        padding:10px;
        display: none;
      }
      nav.active {
        display: inline;
      }
      button {
        display: block;
        position: absolute;
        top: -27px;
        right: 10px;
        width: 25px;
        height: 25px;
      }
      button:before {
        font-family: FontAwesome;
        content: "\f0c9";
      }
      .header-container {
        flex-flow: row wrap;
      }
      .logo-container, .navigation-container {
        width: 100%;
      }
      .navigation-container {
        justify-content: flex-end;
        padding-right: 10px;
        position:relative;
      }
      .navigation-container.active {
        
      }
      .navigation-container.active button:before {
        font-family: FontAwesome;
        content: "\f00d";
      }
    } 
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <html lang="en-GB">
    <head>
    <meta charset="utf-8"/>
    <title>Website Header</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    </head>
    <body>
    
    <div class="header">
    <div class="header-container">
    <div class="logo-container">
    <img class="logo" src="/logo.png" alt="Logo">
    </div>
    <div class="navigation-container space-evenly">
      <button></button>
      <nav>
        <p class="nav">Page1</p>
        <p class="nav">Page2</p>
        <p class="nav">Page3</p>
        <p class="nav">Page4</p>
      </nav>
    </div>
    </div>
    </div>
    
      <script>
          let container = document.querySelector('.navigation-container');
        let menu = document.querySelector('nav');
        document.querySelector('button')
          .addEventListener('click', e => {
            menu.classList.toggle('active');
             container.classList.toggle('active')
          })
      </script>
    
    </body>
    </html>

https://jsfiddle.net/Sampath_Madhuranga/1cdu745t/39/

This works for you. I have added new styles for mobile and updated layout. Try my code. Thanks.


You may like these posts

Post a Comment for "Adjusting Desktop Display For Responsive Site Navigation With Topnav And Event Listeners"