Skip to main content
J
jbenham10
Inspiring
May 10, 2017
Question

Navbar - change from scroll to click?

  • May 10, 2017
  • 2 replies
  • 352 views

I have a navigation bar on a website I am building and have I noticed that it is notoriously difficult to navigate on mobile devices due to the navbar menu options opening and closing based on scrolling on and off of them. Is there way I can essentially easily convert the functionality to open and close via clicking rather than scrolling?

It is a navbar made using a ul from scratch not using Bootstrap.

I would provide a link however the hosting site I am using is experiencing problems for free users and the site cannot be viewed currently online.

HTML:

<div id="navbar">

   <nav>

    <meta charset="utf-8">

    <ul>

      <li><a href="https://uklivesound.000webhostapp.com/aboutus.html">About Us</a></li>

      <li><a>Rehearsals</a>

        <ul>

          <li><a href="https://uklivesound.000webhostapp.com/liveroom.html" class="sub">Live Room</a></li>

          <li><a href="https://uklivesound.000webhostapp.com/isolationroom.html" class="sub">Isolation Room</a></li>

        </ul>

      </li>

      <li><a>For Hire</a>

        <ul>

          <li><a href="https://uklivesound.000webhostapp.com/hirepackages.html" class="sub">Event Packages</a></li>

          <li><a href="https://uklivesound.000webhostapp.com/largeevents.html" class="sub">Large Events</a></li>

          <li><a href="https://uklivesound.000webhostapp.com/equipmenthire.html" class="sub">Equipment</a></li>

          <li><a href="https://uklivesound.000webhostapp.com/bandhire.html" class="sub">Bands</a></li>

        </ul>

      </li>

      <li><a>Recording</a>

        <ul>

          <li><a href="https://uklivesound.000webhostapp.com/audiorecording.html" class="sub">Audio</a></li>

          <li><a href="https://uklivesound.000webhostapp.com/videorecording.html" class="sub">Video</a></li>

        </ul>

      </li>

      <li><a>Other Services</a>

        <ul>

          <li><a href="https://uklivesound.000webhostapp.com/buyandsell.html" class="sub">Buy/Sell</a></li>

          <li><a href="https://uklivesound.000webhostapp.com/repairs.html" class="sub">Repairs</a></li>

        </ul>

      </li>

      <li><a href="https://uklivesound.000webhostapp.com/contact.html">Contact Us</a></li>

    </ul>

    </nav>

</div>

CSS

#navbar * {

    -webkit-text-size-adjust: 100%;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    padding: 0;

    margin: 0;

    position: relative;

    z-index:20;

}

   

body {background-color:#79c5f4;}

nav ul { list-style:none;

}

li:nth-child(1) {background-color:#71aace;}

li:nth-child(2) {background-color:#6c73b1;}

li:nth-child(3) {background-color:#d3c530;}

li:nth-child(4) {background-color:#82c845;}

li:nth-child(5) {background-color:#8f65a1;}

li:nth-child(6) {background-color:#d84e92;}

li:nth-child(7) {background-color:#444080;}

nav ul li {

    display:block;

    float:left;

    text-align:center;

    width:16.667%;

    position: absolute;

    z-index:11;

}

nav ul li:hover {background-color:white;}

nav a {

    display:block;

    height:100%;

    font-family:'Impact', sans-serif;

    font-size:2.0vw;

    color:white;

    text-decoration:none;

    color:white;

    position: relative;

    z-index:9;

   

}

nav ul li ul {display:none;}

nav ul li:hover ul {display:block;}

nav ul li:hover :first-child:not(.sub) {color:black;}

nav ul li ul li {

    float:none;

    width:100%;

    position: absolute;

    z-index:10;

}

nav .sub:hover {color:black;}

Thanks!

    This topic has been closed for replies.

    2 replies

    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community Expert
    May 10, 2017

    A quick and dirty way to fix the issue would be to make a media query for the smaller phone size, then add a selector that changes the hover from display:block to display:none for the drop menus within that small screen media query. That way, nothing pops up as you try to tap-drag to scroll (which is firing the hover).

      O
      osgood_
      Legend
      May 10, 2017

      This may help, it may not help in terms of a Bootstrapless mobile navigation:

      <!DOCTYPE html>

      <html>

      <head>

      <meta charset="UTF-8" />

      <title>Mobile Navigation</title>

      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

      <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

      </head>

      <body>

      <style>

      body {

      margin: 0;

          }

      .main-navigation-wrapper {

      background-color: #BBB65B;

      }

      .main-navigation {

      margin: 0;

      padding: 0;

      display: flex;

      justify-content: center;

      font-size: 18px;

      line-height: 28px;

      }

      .main-navigation li {

      margin: 0;

      padding: 0;

      list-style: none;

      position: relative;

      text-align: center;

      width: 16.66%;

      }

      .main-navigation li i {

      font-size: 25px;

      margin: 0 0 0 5px;

      padding: 0;

      }

      .main-navigation a {

      text-decoration: none;

      color: #fff;

      display: block;

      padding: 15px 0;

      display: flex;

      justify-content: center;

      }

      .main-navigation a:hover {

      background-color: #000;

      }

      /* drop menu */

      .main-navigation .drop-menu {

      position: absolute;

      top: 3em;

      left: 0;

      background-color: #BBB65B;

      margin: 0;

      padding: 0;

      width: 100%;

      }

      .drop-menu li {

      width: 100%;

      }

      .drop-menu a {

      padding: 10px 15px;

      color: #000;

      }

      .drop-menu a:hover {

      color: #fff;

      }

      /* end drop menu */

      .mobile-menu-icon {

      display: none;

      }

      @media screen and (max-width: 960px) {

      .main-navigation {

      display: none;

      }

      .mobile-menu-icon {

      display: block;

      text-align: right;

      color: #fff;

      padding: 15px 40px;

      font-size: 20px;

      }

      .main-navigation li {

      width: 100%;

      }

      /* drop menu */

      .main-navigation .drop-menu {

      position: static;

      }

      /* end drop menu */

      </style>

      <script>

      $(document).ready(function(){

      //hide drop menu

      $('.drop-menu').hide();

      //show drop menu

      $('.main-navigation li').css('cursor', 'pointer').click(function() {

      $(this).find('ul').slideToggle().end().siblings().find('ul').hide();

      });

      //drop menu slide up if window width more than 960px

      $('.drop-menu').mouseleave(function(){

      if ($(window).width() > 960) {

      $('.drop-menu').slideUp();

      }                             

      });

      // show mobile menu icon at 960px window width

      $('.mobile-menu-icon').css('cursor','pointer').click(function(){

      $('.main-navigation').slideToggle();

      });

      //realign main-navigation and hide drop menu at 960px window width

      $(window).resize(function(){

      if ($(window).width() > 960) {

      $('.main-navigation').css('display', 'flex');

      $('.drop-menu').hide();

      }

      else if ($(window).width() < 960) {

      $('.main-navigation').css('display', 'none');

      }

      });

      });

      </script>

      <nav class="main-navigation-wrapper">

      <div class="mobile-menu-icon"><i class="fa fa-bars"></i></div>

      <ul class="main-navigation">

      <li><a href="#">About Us</a></li>

      <li><a href="#">Rehearsals<i class="fa fa-angle-down" aria-hidden="true"></i>

      </a>

      <ul class="drop-menu">

      <li><a href="#">Live Room</a></li>

      <li><a href="#">Isolation Room</a></li>

      </ul>

      <!-- end drop=menu -->

      </li>

      <li><a href="#">For Hire<i class="fa fa-angle-down" aria-hidden="true"></i></a>

      <ul class="drop-menu">

      <li><a href="#">Event Packages</a></li>

      <li><a href="#">Large Events</a></li>

      <li><a href="#">Equipment</a></li>

      <li><a href="#">Bands</a></li>

      </ul>

      <!-- end drop=menu -->

      </li>

      <li><a href="#">Recording<i class="fa fa-angle-down" aria-hidden="true"></i></a>

      <ul class="drop-menu">

      <li><a href="#">Audio</a></li>

      <li><a href="#">Video</a></li>

      </ul>

      <!-- end drop=menu -->

      </li>

      <li><a href="#">Other Services<i class="fa fa-angle-down" aria-hidden="true"></i></a>

      <ul class="drop-menu">

      <li><a href="#">Buy/Sell</a></li>

      <li><a href="#">Repairs</a></li>

      </ul>

      <!-- end drop=menu -->

      </li>

      <li><a href="#">Contact Us</a></li>

      </ul> <!--end main-navigation-->

      </nav>

      <!-- end main-navigation-wrapper -->

      </body>

      </html>

        Firefly Community Gallery
        Adobe Firefly

        Remix with Firefly Community Gallery

        Thousands of free creations to fall in love with and remix in Firefly.

        Explore now
        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices