Menu icon Foundation
Help with Homepage

Can anyone provide guidance on how I can clean up my homepage?

I'm trying to create a main navigation menu that's separate from the top-bar and still collapses into a menu icon for mobile devices, however, I can't seem to get the main navigation menu to center the links on the page or change the background color for it. I tried fooling around in the CSS file but then it also changes the top-bar as well, which I have set the way I like...

Also, with the footer section -- I can't seem to get the links to center themselves at the bottom of the page!

And finally, one last question: If I want my slider to display across the full screen and not just "12-columns", should I download a custom version of Foundation so that I can set even more columns?

Any thoughts would be greatly appreciated!

Screen shot 2015 09 05 at 10.32.14 am

topbarnavigationtop-barfooterhtmlcss

Can anyone provide guidance on how I can clean up my homepage?

I'm trying to create a main navigation menu that's separate from the top-bar and still collapses into a menu icon for mobile devices, however, I can't seem to get the main navigation menu to center the links on the page or change the background color for it. I tried fooling around in the CSS file but then it also changes the top-bar as well, which I have set the way I like...

Also, with the footer section -- I can't seem to get the links to center themselves at the bottom of the page!

And finally, one last question: If I want my slider to display across the full screen and not just "12-columns", should I download a custom version of Foundation so that I can set even more columns?

Any thoughts would be greatly appreciated!

Screen shot 2015 09 05 at 10.32.14 am
Eugene Mont about 4 years ago

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="robots" content="noindex" />
    <title>Home | Interdepartmental Program in Film Studies | UMass Amherst</title>
    <link rel="stylesheet" href="css/foundation.css" />
    <link rel="stylesheet" href="webicons/webicons.css">
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>
    <script src="js/vendor/modernizr.js"></script>
  </head>
  <body>

    <link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">

<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>
  <div class="logo">
    <a href="http://www.umass.edu"><img src="img/UMassWordmark.png" /></a>
  </div>
  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="center-buttons">
      <li><a href="#">Advising</a></li>
      <li><a href="#">Apply</a></li>
      <li><a href="#">Courses</a></li>
      <li><a href="#">Contact Us</a></li>
      <li class="search">
        <form>
          <input type="search">
        </form>
      </li>
      <li class="has-button">
        <a class="small button" href="#">Search</a>
      </li>
    </ul>
  </section>
</nav>
<br>

<div class="row">
  <div class="small-12 columns">
    <div class="off-canvas-wrap" data-offcanvas>
      <div class="inner-wrap">
        <nav class="top-bar show-for-medium-up" data-topbar>
          <ul class="title-area">
            <li class="name">
            </li>
            <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
          </ul>

          <section class="top-bar-section">
            <!-- Right Nav Section -->
            <ul class="center-buttons">
              <li><a href="#">Program</a></li>
              <li><a href="#">People</a></li>
              <li><a href="#">Events</a></li>
              <li><a href="#">MMFF</a></li>
              <li><a href="#">Roif Awards</a></li>
              <li><a href="#">Opportunities</a></li>
            </ul>
          </section>
        </nav>


        <nav class="tab-bar2 show-for-small">
          <section class="left-small">
            <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
          </section>

          <section class="middle tab-bar-section">
            <h1 class="title">Menu</h1>
          </section>

        </nav>


        <aside class="left-off-canvas-menu">
          <ul class="off-canvas-list">
            <li><label>Film Studies</label></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Advising</a></li>
            <li><a href="#">Apply</a></li>
          </ul>
        </aside>

        </div>
      </div>
        </section>

      <a class="exit-off-canvas"></a>

      </div>
    </div>
  </div>
</div>

 <div class="row">
        <div class="large-12 columns">
        <div id="slider">
          <ul class="example-orbit" data-orbit>
          <li><img src="http://static.comicvine.com/uploads/original/11113/111130700/3855920-3041986330-x_men.jpg"/></li>
          <li><img src="http://www.wallpaperup.com/uploads/wallpapers/2014/10/30/500400/a93e607b50b5c57519291a4cb24f66c8.jpg"/></li>
          <li><img src="http://www.hdwallpaperup.com/wp-content/uploads/2015/06/Arrow-TV-Series-Wallpaper.jpg"/></li>
        </ul>
        </div>
        <hr/>
        </div>
      </div>

      <div class="row">
        <div class="large-4 columns">
          <img src="http://4.bp.blogspot.com/_WOWQJUlRtKQ/TRpHM9w3y_I/AAAAAAAABM8/DSCEnCvmk2Q/s1600/batman-3-movie+8.jpg"/>
          <h4>Batman Returns to Gotham</h4>
          <p>Ben Affleck will reportedly reprise his role as The Caped Crusader in an upcoming solo Batman project. The actor is also rumored to direct and co-write the film, which is tentatively set for release in 2018 following 2016's 'Batman v Superman: Dawn of Justice' and 2017's 'Justice League'.</p>
        </div>

        <div class="large-4 columns">
          <img src="http://www.highreshdwallpapers.com/wp-content/uploads/2014/04/the_avengers_hd_wallpaper_-1024x768.jpg"/>
          <h4>The Avengers Battle Ultron</h4>
          <p>Marvel Studios is set to release 'Avengers: Age of Ultron' this fall on Blu-Ray, DVD and Digital Copy, right in time for holiday shopping. The sequel to 2012's record breaking hit, 'Ultron' sets Earth's Mightiest Heroes on a path that can only lead to Civil War...</p>
        </div>

        <div class="large-4 columns">
          <img src="http://hdwallpaperexpert.com/wp-content/uploads/2015/02/Batman-vs-Superman-Dawn-of-justice-1024x768.jpg"/>
          <h4>Is Superman Corrupt?</h4>
          <p>In the latest effort from Warner Bros., the studio hopes to showcase the devastation caused by Superman in the 2013 blockbuster 'Man of Steel'. Citizens around the globe will question if Superman is Earth's savior or whether he will cause the planet's downfall. Find out in March of 2016.</p>
        </div>

        <div class="row">
        <div class="large-4 columns">
          <img src="http://4.bp.blogspot.com/_WOWQJUlRtKQ/TRpHM9w3y_I/AAAAAAAABM8/DSCEnCvmk2Q/s1600/batman-3-movie+8.jpg"/>
          <h4>Batman Returns to Gotham</h4>
          <p>Ben Affleck will reportedly reprise his role as The Caped Crusader in an upcoming solo Batman project. The actor is also rumored to direct and co-write the film, which is tentatively set for release in 2018 following 2016's 'Batman v Superman: Dawn of Justice' and 2017's 'Justice League'.</p>
        </div>

        <div class="large-4 columns">
          <img src="http://www.highreshdwallpapers.com/wp-content/uploads/2014/04/the_avengers_hd_wallpaper_-1024x768.jpg"/>
          <h4>The Avengers Battle Ultron</h4>
          <p>Marvel Studios is set to release 'Avengers: Age of Ultron' this fall on Blu-Ray, DVD and Digital Copy, right in time for holiday shopping. The sequel to 2012's record breaking hit, 'Ultron' sets Earth's Mightiest Heroes on a path that can only lead to Civil War...</p>
        </div>

        <div class="large-4 columns">
          <img src="http://hdwallpaperexpert.com/wp-content/uploads/2015/02/Batman-vs-Superman-Dawn-of-justice-1024x768.jpg"/>
          <h4>Is Superman Corrupt?</h4>
          <p>In the latest effort from Warner Bros., the studio hopes to showcase the devastation caused by Superman in the 2013 blockbuster 'Man of Steel'. Citizens around the globe will question if Superman is Earth's savior or whether he will cause the planet's downfall. Find out in March of 2016.</p>
        </div>



        </div>


      <div class="footer-bottom">
      <footer class="row">
        <div class="large-12 columns">
          <hr/>


          <div class="row">
            <div class="large-12 columns">
              <ul class="center">
                </li>
              <p>©2015 <a href="http://www.umass.edu">University of Massachusetts Amherst</a><a href="http://www.umass.edu/site-policies">Site Policies</a><a href="mailto:[email protected]">Site Contact</a></p>
              </li>
            </div>
            </div>
          </div>
        </div> 
      </footer>

  <script src="js/foundation/foundation.js"></script>
  <script src="js/foundation/foundation.section.js"></script>
    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
  </body>
</html>

Rafi Benkual about 4 years ago

Couple things that will help you out. You might be styling as you add components to a page. You're better off building a scaffold, no CSS, then styling after.

I mocked up a codepen with your setup here: http://codepen.io/rafibomb/pen/jbPLOK?editors=110

The main top-bar has a class of .main so you can style it different. I added the .show-for-medium-up on it to hide on small. The off-canvas needs to wrap all the content in the page. The off-canvas tab-bar has the .hide-for-medium-up class.

Rafi Benkual about 4 years ago

Something is odd about your scripts. Section is from Foundation 4 and you are loading the core foundation JS twice.

Should be

    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
  </body>
</html>

Rafi Benkual about 4 years ago

Your footer is missing a </div> tag and a closing </ul>

To make a ul centered, you make the ul text-align: center; and the li float none, display: inline-block;

You can use one of the premade footers we have created here: http://zurb.com/building-blocks/centered-footer

Here is your footer refactored - http://codepen.io/rafibomb/pen/EqCdJ?editors=110

Eugene Mont about 4 years ago

Hi Rafi,

I can't thank you enough for your help, I truly appreciate it! I'm looking forward to continuing work on the page!

Thank you!!

-Eugene