CSS & SASS 导航问题

Question

我一直在 HTML 中使用 Sass 和 CSS 为我尝试创建的网站创建导航栏，但只有导航栏的第一项栏正在显示并且与左侧对齐。我对编码相当陌生，所以它可能是非常基本的东西，但我正在尝试找到一种方法来拥有响应式工作导航栏。我的 HTML 中有 JavaScript，因为我正在使用 Github.io 来实现我的网站。我还通过 ruby 将我的 sass 转换为 css。有人知道我做错了什么吗？

As you can see in the picture, only the about me side is showing in the Navigation bar. the rest of the bar is missing

再次感谢大家的提前帮助。该网站对学习更多编码知识提供了巨大帮助，再次感谢您。

这里是 HTML:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
    <meta name="author" content="Clark Fennell">
    <meta name="description" content="Clark Fennell's Website">
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <link rel="stylesheet" type="text/css" href="/css/stylesass.css">
    <link rel="stylesheet" type="text/css" href="/css/.sass-cash/f438d035db857854fbdbe4096cf1f690c6912d06/style.sassc">
    <link rel="stylesheet" href="https://maxcdn.bottstrapcdn.com/bottstrap/3.3.7/css/bootstrap.min.css">
    <!--[if lt IE 9]><link rel="stylesheet" href="ie.css"><![endif]-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bottstrap/3.3.7/js/bootstrap.min.js">
    </script>
    <script type="text/JavaScript" src="/JS/mywebjscript.js">
    </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<Title>Clark Fennell's Website</title>
</head>
<header>
<div class="title">
        <p class="heading">CLARK FENNELL</p>
        <p class="heading2">WEBSITE</p>
        <script type="text/javascript">
          $(function () {
            count = 0;
            wordsArray = ["UX/UI DESIGNER", "FRONT-END DEVELOPER", "WEB DESIGNER", "SOFTWARE DEVELOPER"];
            setInterval(function () {
              count++;
              $("#word").fadeOut(400, function () {
                $(this).text(wordsArray[count % wordsArray.length]).fadeIn(400).addClass("small-heading");
              });
            }, 2000);
          });
        </script>
    <div id="word" class="small-heading">UX/UI DESIGNER</div>
</div>
</div>
<br>
<div>
<script type="text/javascript">
$(document).ready( function() {
  $('#content-reveal').hide();
  $('#aboutme').click( function() {
      $('#content-reveal').fadeOut( 500, function() {
          $('#content-reveal').html( '<div class="maindiv"><h2>ABOUT ME</h2><br><p>Age: 29<br>Location: Leeds<br><br>I am a developer specialising in HTML, CSS, JAVA, JaveScript, SQL, Command Line, Ruby and many more.<br><br>I am also well equpit at using Adobe programs, such as, PhotoShop, Dreamweaver, Illistrator, InDesign, and other software as well.<br><br>I like to board and video games, watching indepentdant professional wrestling & a nice cup of tea.</p></div>' );
          $('#content-reveal').fadeIn( 500 );
      } );
  } );
  $('#myhtmlcss').click( function() {
      $('#content-reveal').fadeOut( 500, function() {
          $('#content-reveal').html( '<div class="maindiv"><h2>HTML & CSS</h2><br><p>This site is just one example of my HTML, CSS & SCSS skills. The code for this website, plus plenty of other examples, are on my <a href="https://www.github.com/clarkfennell">GITHUB</a>.</p></div>' );
          $('#content-reveal').fadeIn( 500 );
      } );
  } );
  $('#myjscript').click( function() {
      $('#content-reveal').fadeOut( 500, function() {
          $('#content-reveal').html( '<div class="maindiv"><h2>JAVASCRIPT</h2><br><p>Below is a a Random Colour Generator created with JavaScript code. The code for this is located on my <a href="Https://github.com/clarkfennell/Random-Color-Generator-React-JS-Example">GITHUB</a></p><p>For more JavaScript, JQuery and AngularJS, please visit my <a href="https://www.github.com/clarkfennell">GITHUB</a>.</p></div>' );
          $('#content-reveal').fadeIn( 500 );
      } );
  } );
  $('#mycv').click( function() {
      $('#content-reveal').fadeOut( 500, function() {
          $('#content-reveal').html( '<div class="maindiv"><h2>MY CV</h2><br><img src="/images/NEWCVClarkFennell.jpg"></div>' );
          $('#content-reveal').fadeIn( 500 );
      } );
  } );
  $('#mycv').click( function() {
      $('#content-reveal').fadeOut( 500, function() {
          $('#content-reveal').html( '<div class="maindiv"><h2>CONTACT</h2></div>' );
          $('#content-reveal').fadeIn( 500 );
      } );
  } );
} );
</script>
<ul class="PrimaryNav with-indicator">
  <li class="Nav-item" id="aboutme">ABOUT ME</li>
  <li class="Nav-item" id="myhtmlcss">HTML & CSS</li>
  <li class="Nav-item is-active" id="myjscript">JAVASCRIPT</li>
  <li class="Nav-item" id="mycv">MY CV</li>
  <li class="Nav-item" id="contactme">CONTACT</li>
</ul>
</div>
</header>
</body>

这里是 SASS:

$menu-items: 5
$width: (100/$menu-items) * 1%

$background-color: #121212
$indicator-color: #363151

.PrimaryNav
  list-style: none
  margin: 50px auto
  max-width: 720px
  padding: 0
  width: 100%


.Nav-item
  background: #363151
  display: block
  float: left
  margin: 0
  padding: 0
  text-align: center
  width: $width


  &:first-child
    border-radius: 3px 0 0 3px


  &:last-child
    border-radius: 0 3px 3px 0


  &.is-active a
    color: $indicator-color


  a
    color: $background-color
    display: block
    padding-top: 20px
    padding-bottom: 20px
    text-decoration: none

    &:hover
      color: $indicator-color



.with-indicator
  position: relative

.Nav-item:last-child
  &:before, &:after
    content: ''
    display: block
    position: absolute


  &:before
    width: 0
    height: 0
    border: 6px solid transparent
    border-top-color: $color-indicator
    top: 0
    left: 12.5%
    margin-left: -3px


  &:after
    width: $width
    background: $indicator-color
    top: -6px
    bottom: -6px
    left: 0
    z-index: -1



$menu-items: 5
$menu-items-loop-offset: $menu-items - 1
$width: (100/$menu-items) * 1%

.with-indicator
  @for $i from 1 through $menu-items-loop-offset
    .Nav-item:nth-child(#{$i}).is-active ~ .Nav-item:last-child:after
      left:($width*$i)-$width
    .Nav-item:nth-child(#{$i}).is-active ~ .Nav-item:last-child:before
      left:($width*$i)+($width/2)-$width



  @for $i from 1 through $menu-items-loop-offset
    .Nav-item:nth-child(#{$i}):hover ~ .Nav-item:last-child:after
      left:($width*$i)-$width !important
    .Nav-item:nth-child(#{$i}):hover ~ .Nav-item:last-child:before
      left:($width*$i)+($width/2)-$width !important


.Nav-item
    &:last-child
      &:hover, &.is-active
        &:before
          left: (100%-$width)+($width/2) !important
        &:after
          left: 100%-$width !important

这是CSS:

/*RESET*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}

/*MAIN*/
@font-face {
    font-family: "Etna";
    src:url("/Fonts/enta.eot");
    src:url("/Fonts/enta.otf") format("opentype"),
            url("/Fonts/etna.woff") format("woff"),
            url("/Fonts/etna.svg") format("svg"),
            url("/Fonts/etna.ttf") format("ttf");
}

@import url('https//fonts.googleapis.com/css?family=Bungee|Bungee+Shade|Titllium+Web');

html, body {
    background-color: #EEEAE3;
    font-family: 'Titllium Web', sans-serif;
}

h2 {
        font-size: 1.15em;
        color: #24282B;
        font-family: 'Etna', Helvetica, sans-serif;
        text-align: left;
}

p {
    font-size: 1em;
    color: #24282B;
    text-align: left;
    font-family: 'Titllium Web', sans-serif;
}

.heading {
    font-family:'Etna', San-serif;
    text-align: center;
    color: #363151;
    font-size: 3.50em;
}

.heading2 {
    font-family:'Etna', San-serif;
    text-align: center;
    color: #363151;
    font-size: 1.70em;
}

.small-heading {
    font-family:'Etna', San-serif;
    text-align: center;
    color: #363151;
    font-size: 1.15em;
}

.copywrite {
    font-size: 0.6em;
    opacity: 0.25:
}

#wrapper {
    width: 450px;
    height: 281px;
    margin: 0 auto 10px;
    align-items: center;
}

#aboutme {background-color: #EEEAE3;}
#myhtmlcss {background-color: #EEEAE3; display: none;}
#myjscript {background-color: #EEEAE3; display: none;}
#mycv {background-color: #EEEAE3; display: none;}
#contactme {background-color: #EEEAE3; display: none;}

再次感谢

Answer 1

您通过 Css

隐藏了其他导航项

#myhtmlcss {background-color: #EEEAE3; display: none;}
#myjscript {background-color: #EEEAE3; display: none;}
#mycv {background-color: #EEEAE3; display: none;}
#contactme {background-color: #EEEAE3; display: none;}

如果你想给他们看你可以替换成

#myhtmlcss {background-color: #EEEAE3;}
#myjscript {background-color: #EEEAE3;}
#mycv {background-color: #EEEAE3;}
#contactme {background-color: #EEEAE3;}

CSS & SASS 导航问题

CSS & SASS Nav Issue

html

css

navigation

sass

nav