Navigation Collapse Help Needed

Discussion in 'Programming' started by Nasliko, May 11, 2017.

  1. Hello, I am trying to get my navigation bar to collapse when the screen is resized. I have looked up how to do it on Google, but I am not experienced with CSS, so everything I try does not work.

    Live website link

    Here is the HTML and CSS for the navigation stuff
    HTML
    Code (Text):
    <div class="navigation">
    <div class="pageWidthnav">
            <ul class="menu">
               
                <div class="logobg">
                    <a href="{$mybb->settings['bburl']}/index.php" class="logo">{$mybb->settings['bbname']}</a>
                </div>
               
                <li id="nav-home"><a class="navbarlinks" href="index.php">Home</a></li>
                <li id="nav-forums"><a class="navbarlinks" href="forums.php">Forums</a></li>
                <li><a class="navbarlinks" href="http://skyisles-mc.buycraft.net/">Store</a></li>
                <li id="nav-members"><a class="navbarlinks" href="memberlist.php">Members</a></li>
                <li id="nav-vote"><a class="navbarlinks" href="vote.php">Vote</a></li>
                <li id="nav-help"><a class="navbarlinks" href="misc.php?action=help">Help</a></li>
               
                {$quicksearch}
            </ul>
    </div>
    </div>
    CSS
    Code (Text):
    .header {
      background: #262626;
      height: 40px;
      box-shadow: 0 3px 3px rgba(0,0,0,.2);
      overflow: visible;

    }

    .navigation {
      background: #fff;
      height: 80px;
      border-bottom: 0px solid #2a5f8c;
      box-shadow: 0 3px 3px rgba(0,0,0,.2);
      clear: both;
      overflow: visible;
    }

    .navigation .pageWidthnav {
      background: url(images/audentio/glowing/bokeh.png) no-repeat center left;
      height: 80px;
      width: calc(100% - 100px);
    }

    .menu {
      list-style: none;
      padding: 0;
      margin: 0;
      text-transform: uppercase;
    }

    .menu li {
      display: block;
      float: left;
    }

    .menu li a {
        transition:.5s;
    }
    .menu li a:hover {
        color: #2f6a9c !important;
        /* background: rgba(0,0,0,0.1); */
        box-shadow:0 -3px #FDFF8D inset;
    }

    .menu a {
      display: block;
      padding: 0 30px;
      font-size: 14px;
      font-family: Open Sans;
      letter-spacing: 1px;
      font-weight: 300;
      color: #97B4CD;
      height: 80px;
      line-height: 80px;
      text-shadow: 0px 0px 0 #467F01;
    }

    .menu i,.guestBit i {
      display: inline-block;
      margin-right: 7px;
      color: #97B4CD;
      text-shadow: 0px 0px 0 rgba(255,255,255,.1);
    }

    If I did not include any needed information, let me know. Thanks!
     
  2. Help still needed!
     
  3. Still needing some help
     
  4. You will have to work with media queries to make the design reponsive. There are a few tutorials on youtube for example, just google 'media queries css' or 'responsive web design'. I am using my phone now but tomorrow i ll be able to help you better