如何创建在移动设备和台式机之间动态更改的粘性标头（无汉堡包）

Question

I'd like to have a sticky header navigation menu that contains Text and an icon on a desktop browser, but only icons on a mobile device (as illustrated in my sketch at the bottom of this post - ignore colors used.) I've started writing the code here: https://codepen.io/jord8on/pen/pxgjZq

This article gives another exmaple of what I'd love to have. (specifically the 3rd of the "Tabbed Navigation" samples)

Here's what I need some help with:

1. When a browser width shrinks below 600px I'd like the labels/text next to the icons to disappear and only show the icons.
2. I want the .navbar to be sticky and remain atop the screen on desktop and mobile, when a users scrolls down.
3. I'd like to have the "active" menu item highlighted, depending on where a person is, in the site.
   1. Home, Courses, Resources, and Events are all going to be different areas within a Wordpress site.
   2. The Community tab will link to a subdomain which is running a Discourse community

Any help would be so much appreciated! 🙌

Current CSS/HTML:

 /* Style the navigation bar */ .navbar { width: 100%; background-color: #B7234C; overflow: auto; } /* Navbar links */ .navbar a { float: left; text-align: center; padding: 12px 0px; color: white; text-decoration: none; font-size: 17px; width: 20%; } /* Navbar links on mouse-over */ .navbar a:hover { background-color: #961d3f; } /* Current/active navbar link */ .active { background-color: #d6295a; } /* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */ @media screen and (max-width: 600px) { .navbar a { float: none; display: block; } } 

 <!-- Load font awesome icon library --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Load font awesome icon library --> <div class="navbar"> <a class="active" href="#"><i class="fa fa-fw fa-home"></i> Home</a> <a href="#"><i class="fa fa-fw fa-comments"></i> Community</a> <a href="#"><i class="fa fa-fw fa-edit"></i> Courses</a> <a href="#"><i class="fa fa-fw fa-star"></i> Resources</a> <a href="#"><i class="fa fa-fw fa-calendar"></i> Events</a> </div> 

Answer 1

I commented above, but here's an example:

@jord8on I added another attribute to the navbar in the code above. Keep in mind that you may need to add a top margin to any subsequent elements at an equal height to the navbar. Position fixed takes that element out of the flow of the DOM. As for the third part, is each page in a separate html file? Or how are you making the navbar globally available? You'll need to write some PHP to echo the "active" class into your links with Wordpress.

This got a bit lengthy for commenting, so here's the easier to read option. Sorry about that.

   /* Style the navigation bar */
   .navbar {
      width: 100%;
      background-color: #B7234C;
      overflow: auto;
      //Add this to the navbar element
      position: fixed;
   }
   @media screen and (max-width: 600px) {
      .navbar a {
        float: none;
        display: block;
      }
      .mob-off {
          display: none;
      }
    }

    <div class="navbar">
      <a class="active" href="#">
        <i class="fa fa-fw fa-home"></i> <span class="mob-off">Home</span>
      </a> 
      <a href="#">
        <i class="fa fa-fw fa-comments"></i> <span class="mob-off">Community</span>
      </a> 
      <a href="#"><i class="fa fa-fw fa-edit">
        </i> <span class="mob-off">Courses</span>
      </a> 
      <a href="#">
        <i class="fa fa-fw fa-star"></i> <span class="mob-off">Resources</span>
      </a>
      <a href="#">
        <i class="fa fa-fw fa-calendar"></i> <span class="mob-off">Events</span>
      </a>
    </div>

Answer 2

1. Put a span between your texts in your anchor tags and target it on the media query with a display none
2. Put a position fixed on your navbar you might need to reset the margins on the body. I added 4000px on height to reflect the sticky scroll.
3. Depending on the page change the class on the body tag and edit in the CSS when needed this example is targeting the events icon. Codepen Hope this helps.

 body{ margin: 0; height: 4000px; } /* Style the navigation bar */ .navbar { position: fixed; width: 100%; background-color: #B7234C; overflow: auto; } /* Navbar links */ .navbar a { float: left; text-align: center; padding: 12px 0px; color: white; text-decoration: none; font-size: 17px; width: 20%; } /* Navbar links on mouse-over */ .navbar a:hover { background-color: #961d3f; } /* Current/active navbar link */ /* In your html you change the body class and target it in here */ /* This example uses the events icon which is a child 5 in the navigation */ .events .navbar a:nth-child(5) { background-color: #d6295a; } /* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */ @media screen and (max-width: 700px) { .navbar{ display: flex; } .navbar span{ display: none; } } 

 <!-- Change the class name depending on the page that you're in then modify the css --> <body class="events"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Load font awesome icon library --> <div class="navbar"> <a class="active" href="#"><i class="fa fa-fw fa-home"></i><span> Home</span></a> <a href="#"><i class="fa fa-fw fa-comments"></i> <span>Community</span></a> <a href="#"><i class="fa fa-fw fa-edit"></i><span> Courses</span></a> <a href="#"><i class="fa fa-fw fa-star"></i> <span>Resources</span></a> <a href="#"><i class="fa fa-fw fa-calendar"></i><span> Events</span></a> </div> </body>