Menu icon Foundation
scss messing up top-bar functionality

  $primary: #00BFFF;
  $golden: gold;
  $clear: rgba(black, 0);


  .top-bar, .top-bar.expanded .title-area, .contain-to-grid, .top-bar-section li:not(.has-form) a:not(.button) {
    background-color: darken($primary, 10%);
    .top-bar {
      height: 90px;

    }
    .expanded {
      height: auto;
    }
    .top-bar-section {
      ul li {
        background: $clear;
      }

      li.active:not(.has-form) a:not(.button), li:not(.has-form) a:not(.button) {
        //top-bar menu items background color
        background: $clear;
      }
      li.active:not(.has-form) a:not(.button) {
        //active button background color
        border-bottom: thin solid white;
      }
      li:hover a:not(.button) {
        //hovered link item
        border-bottom: thin solid $golden;
      }
    }

    .toggle-topbar {
      span {
        color: white;
      }
      a span::after {
        box-shadow: 0 0px 0 1px white, 0 7px 0 1px white, 0 14px 0 1px white;
      }
    }

    .title-area, .right {
      //top margin for menu items
      margin-top: 20px;
    }
  }

  .top {
    height: 600px;
    background: $primary;
    .small-3 {
      margin-top: 150px;
    }
    img {
      margin-top: 125px;
    }
  }
            

         

I'm fairly new to scss and css in general but would like to know, when I make these scss changes to my topbar to style it the way I like. It seems to break the topbar as in, the toggle menu button doesn't work when the screen is small. Below is an example of my html markup nav element

    <div class="contain-to-grid sticky">
        <nav class="top-bar" data-topbar role="navigation">
            <ul class="title-area">
                <li class="name">
                    <h1><a href="#">DOMAIN</a></h1>
                </li>
                <li class="toggle-topbar menu-icon"><a href="#"><span>MENU</span></a></li>
            </ul>

            <section class="top-bar-section">
                <ul class="right">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Developers</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </section>
        </nav>
    </div>

scsstop-barcssnavigation

  $primary: #00BFFF;
  $golden: gold;
  $clear: rgba(black, 0);


  .top-bar, .top-bar.expanded .title-area, .contain-to-grid, .top-bar-section li:not(.has-form) a:not(.button) {
    background-color: darken($primary, 10%);
    .top-bar {
      height: 90px;

    }
    .expanded {
      height: auto;
    }
    .top-bar-section {
      ul li {
        background: $clear;
      }

      li.active:not(.has-form) a:not(.button), li:not(.has-form) a:not(.button) {
        //top-bar menu items background color
        background: $clear;
      }
      li.active:not(.has-form) a:not(.button) {
        //active button background color
        border-bottom: thin solid white;
      }
      li:hover a:not(.button) {
        //hovered link item
        border-bottom: thin solid $golden;
      }
    }

    .toggle-topbar {
      span {
        color: white;
      }
      a span::after {
        box-shadow: 0 0px 0 1px white, 0 7px 0 1px white, 0 14px 0 1px white;
      }
    }

    .title-area, .right {
      //top margin for menu items
      margin-top: 20px;
    }
  }

  .top {
    height: 600px;
    background: $primary;
    .small-3 {
      margin-top: 150px;
    }
    img {
      margin-top: 125px;
    }
  }
            

         

I'm fairly new to scss and css in general but would like to know, when I make these scss changes to my topbar to style it the way I like. It seems to break the topbar as in, the toggle menu button doesn't work when the screen is small. Below is an example of my html markup nav element

    <div class="contain-to-grid sticky">
        <nav class="top-bar" data-topbar role="navigation">
            <ul class="title-area">
                <li class="name">
                    <h1><a href="#">DOMAIN</a></h1>
                </li>
                <li class="toggle-topbar menu-icon"><a href="#"><span>MENU</span></a></li>
            </ul>

            <section class="top-bar-section">
                <ul class="right">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Developers</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </section>
        </nav>
    </div>
Rafi Benkual almost 5 years ago

Looks and works fine here. Does any JS work? What do the paths for the JS files at the bottom look like? Do you have any errors in the console inspector?

http://codepen.io/rafibomb/pen/kGlmK

Rafi Benkual almost 5 years ago

Also, the _settings.scss file has setting for top-bar height and other things so you dont have to write out all those classes. Doing it through the settings file also captures other automatic settings such as adjusting the link padding when you make top-bar taller.

OWEN ALANZO HOGARTH II almost 5 years ago

Rafi thank, it looks like i had my app.js in my header right below my other js files, moving it to right before the tag solved the issue.