Effet de couverture CSS

Question

Sur ce site http://rushir.co/ Je voudrais que le titre (le slide.js) soit fixé, comme le fond, de sorte que lorsque vous faites défiler le "Who I Am" vient le couvrir. Que fais-je?

De même, j'ai réussi à faire en sorte que les liens Twitter et Email soient corrigés, mais je n'arrive pas à obtenir le "Who I Am" pour le couvrir quand il défile. Que dois-je faire?

Si la vue Source ne suffit pas que le code est sur GitHub ici https://github.com/rushir/rushir.github.io

Merci d'avance pour votre aide!

Answer 1

Pour résoudre votre problème vous à supprimer le "style = margin-top: -250px" de votre nav élément:

<nav style="margin-top: -250"> 

to 

<nav> 

Ensuite, mettez dans votre fichier css sur la fermeture de navigation: Position: fixe ou tout ce que vous voulez. Exemple:

nav {                      
     position:fixed; 
     margin-top:0;// Or what ever value you want                                            
     width: 100%;                       
     text-align: center;                     
     left:0;                        
     top:0;                        
} 

gauche: 0 et top: 0 est de rendre les éléments ne disparaitra pas dans firefox quand ils sont fixés positionnés.

C'est le genre de problème que nous avons lancé lorsque nous avons mis du code CSS en ligne dans nos balises html. Les propriétés qui sont déclarées dans les balises html ne peuvent pas être écrasées plus tard dans notre fichier .css à moins que nous ne modifions le fichier .html directement ou que nous l'écrasions en utilisant le hack! Important (qui n'est pas recomandable).

e).

supplémentaire: Pour centrer les liens sur le centre haut de la page, remplacer les blocs comme les mêmes sélecteurs avec les suivants et vous avez terminé:

nav { 
    position:fixed; 
    width:100%; 
    left:0; 
    top:0 
} 

nav ul { 
    display: block; 
    line-height: -20; 
    vertical-align: center; 
    width:inherit; 
    text-align:center; 
} 
nav ul li { 
     list-style: none; 
     margin: 30px 30px 50px; 
     margin: 1.875rem 1.875rem 3.125rem; 
     font-family: "Lato", Arial, sans-serif; 
     font-size: .8125em; 
     font-weight: 400; 
     text-transform: uppercase; 
     display:inline-block; 
} 

J'espère que cela a aidé :). À votre santé.