Menu icon Foundation
Side navigation bar that doesn't stick on the edge of the screen

Hi there,

I'm a beginner with Foundation and I'm kinda trying to build my very first website with it. I haven't been in any big trouble during my work but right now I'm struggling with a very annoying side navigation bar. Basically, my ul class=side-nav doesn't stick at the edge of my screen. It just floats next to a blank space. Of course I tried to fix it with some css positioning, padding and "left: -100px" but, obviously, when I reduce the screen size, my navbar disappears. One more thing that drives me crazy is that when I do reduce the screen size in order to see what i will look like on a smartphone, my navbar does stick at the edge of the screen !

It is the blue area on my screenshot that causing me troubles...

Annoying blank space

navbar

Hi there,

I'm a beginner with Foundation and I'm kinda trying to build my very first website with it. I haven't been in any big trouble during my work but right now I'm struggling with a very annoying side navigation bar. Basically, my ul class=side-nav doesn't stick at the edge of my screen. It just floats next to a blank space. Of course I tried to fix it with some css positioning, padding and "left: -100px" but, obviously, when I reduce the screen size, my navbar disappears. One more thing that drives me crazy is that when I do reduce the screen size in order to see what i will look like on a smartphone, my navbar does stick at the edge of the screen !

It is the blue area on my screenshot that causing me troubles...

Annoying blank space
Pierre Crochart over 4 years ago

I forgot, here's my HTML and CSS :

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fabulous Fab | Accueil</title>
    <link rel="stylesheet" href="css/foundation.css" />
    <link rel="stylesheet" href="css/style.css" />
    <script src="js/vendor/modernizr.js"></script>
  </head>
      <body>
          <div class="row">
            <div class="small-9 small-centered columns">
              <h1><img src="http://localhost/sites/Mise%20en%20pratique%20PHP/essai%203/img/fabfablogo.png"/>
              </h1>
            </div>
          </div>
          <div class="row">
            <div class="large-2 medium-3 columns">
              <div class="sidebar">
                <ul class="side-nav">
                 <li class="active"><a href="http://localhost/sites/Mise%20en%20pratique%20PHP/essai%203/index.html">Accueil</a></li>
                  <li><a href="http://localhost/sites/Mise%20en%20pratique%20PHP/essai%203/discographie.html">Discographie</a></li>
                  <li><a href="http://localhost/sites/Mise%20en%20pratique%20PHP/essai%203/bio.html">Bio</a></li>
                  <li><a href="http://localhost/sites/Mise%20en%20pratique%20PHP/essai%203/contact.php">Contact</a></li>
                <div class="social_bar"> 
                  <li><a href="http://deezer.com" class="socialbutton"><img src="http://localhost/sites/Mise%20en%20pratique%20PHP/essai%203/img/deezerbutton.png"/></a></li><li><a href="http://twitter.com" class="socialbutton"><img src="http://localhost/sites/Mise%20en%20pratique%20PHP/essai%203/img/twitterlogo.png"/></a></li>
                  <li><a href="http://facebook.com" class="socialbutton"><img src="http://localhost/sites/Mise%20en%20pratique%20PHP/essai%203/img/facebooklogo.png"/></a></li>
               </div>
             </ul>
             </div>
            </div>

                <!-- Tout ce qui est au-dessus de cette ligne est le squelette du site -->

  <div class="page-wrap"> <!-- sert uniquement pour le sticky footer -->

          <div class="large-10 medium-9 columns">
            <div id="header">   
            <!--<div class="panel"> pour afficher un encadré autour de la div-->
              <h3>On va y arriver ?</h3>
                <p>Random text blablablablabla et on parle pour rien dire lalala et on continue histoire de remplir la case blablabla juste pour écrire quelque chose et remplir que ça fasse un petit peu rempli lalala</p>
             </div>   
            </div>

        <div class="row">
          <div class="large-6 medium-5 columns">
            <div class="panel">
              <div id="news">
                <h2>Actualités</h2>
                  <p>Les dernières nouvelles concernant l'artiste se situeront dans cet encadré. On pourra également, à terme, les retrouver dans l'un des sous menus disponibles dans la bar de navigation à la gauche de la page</p>
                   <div class="row">
                     <div class="large-5 medium-4 columns">
                         <div id="social">
                           <h2>Social</h2>
                             <p>Regroupement des dernières publications de l'artiste sur les réseaux sociaux</p>
                          </div>
                         </div>
                     <div class="large-6 columns">
                         <div id="autre">
                           <h2>Autre chose</h2>
                             <p>Je ne sais pas encore ce qu'il y aura dans cette partie. Mais ce sera probablement génial.</p>
                          </div>
                         </div>
                     </div>                                        
              </div>
            </div>
          </div>


          <div class="large-3 columns">
            <div class="panel">
              <div id="news">
                <h2>Vidéos</h2>
                  <p>Regroupement des dernières vidéos et mixes de l'artiste. Il s'agira essentiellement d'intégration de lecteurs Soundcloud ou de vidéos YouTube</p>
                    <div class="flex-video">
                      <iframe width="560" height="315" src="https://www.youtube.com/embed/aiBt44rrslw" frameborder="0" allowfullscreen></iframe>
                    </div>
                    <div class="flex-video">
                      <iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/203475116&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>
                   </div>   
              </div>
            </div>
          </div>
        </div> 
    </div>
<!-- on va essayer de mettre un footer ici -->

    <footer class="site-footer">
      Peterline6© 2015.
    </footer>

body {
  /*background: linear-gradient(to right, rgba(53,106,160,1) 0%,rgba(53,106,160,1) 100%); /* CSS pour le dégradé de couleur en background http://www.colorzilla.com/gradient-editor/*/
  /*background: linear-gradient(to left, rgba(206,220,231,1) 0%,rgba(206,220,231,1) 0%,rgba(206,220,231,1) 5%,rgba(89,106,114,1) 100%);*/
  background-image: url('http://localhost/sites/Mise%20en%20pratique%20PHP/essai%203/img/Image-Background-Fab.png');
  background-color:#697680 ;
  background-position: center center;
  background-repeat: repeat-y;
  z-index: -1;
}

h1 {
  font-size:74px;
  color:rgba(255,255,255,254);
}

#header p {
  color:rgb(255, 239, 239);
}

.socialbutton img {

  height: 50%;
  width: 50%;
}
#header p, #header h3 {
  text-transform: uppercase;
}

.panel {
  border: none;
  border-radius: 7px;
background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 100%);
}

#news h2 {
  color:white;
}
#news p {
  color:black;
}
.sidebar {
  float: left;
  position: relative;

}
.side-nav {
  float: left;
  position: relative;

}
.side-nav li.active > a:first-child:not(.button) {
  color:#B8DBFF;
  text-transform: uppercase;
}
.side-nav li a:not(.button) {
  color:#859EB8;
  text-transform: uppercase;
}

/* Ci-dessous, essai footer */ 
* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: 10px; 
}
.page-wrap:after {
  content: "";
  display: block;
}

.site-footer {
  text-align:right;
}
.site-footer, .page-wrap:after {
  height: 10px; 
}

Visual Approch over 4 years ago

Bonjour

Dans cette configuration ce n'est pas possible.
Le site semble centré (.row{ max-width = 62.5 rem} ) et la largeur de la partie en bleu est fonction de la taille des différents écrans.
Pour avoir un site fluide sur 100% de la largeur passer la valeur de max-width à 100% et la barre de navigation sera le long du bord droit mais en fonction de la largeur des écrans ça peut donner des mises en page incontrôlées ...