1486 sujets

Web Mobile et responsive web design

Menu horizontal avec logo au centre

Bonjour
je voudrais mettre un deuxième menu horizontal avec un logo au centre
et qu'il soit responsive avec le reste de mon site
j'ai essayé plusieurs combinaisons mes la je trouve pas
merci pour votre aide cordialement

<!-- Body -->
<body>
  
  <!-- Header -->
  <div class="block">
    <header class="header">
      <nav class="header-menu">
            <a href="#"> Accueil</a>
            <a href="#"> Présentation</a>
            <a href="#"> Toilettage</a>
            <a href="#"> Self</a>
            <a href="#"> Nos tarifs</a>
            <a href="#"> Nos photos</a>
            <a href="#"> Contact</a>
      </nav>
    </header>
   </div>
   <!-- End header -->
   
   <!-- Banner -->
   <div class="block">
       <div class="banner">
          <img src="src/img/banner.jpg" alt="paysage avec des animaux" class="banner-image">
            <div class="banner-menu">
                    <a href="#">Accueil</a>
                    <a href="#">Présentation</a>
                    <a href="#">Toilettage</a>
                    <div class="medaillon"></div>      
                    <a href="#">Nos tarifs</a>
                    <a href="#">Nos photos</a>
                    <a href="#">Contact</a>
                 
            </div>
           
       </div>
   </div>
   <!-- End Banner -->
  
   <script src="src/js/jquery-3.3.1.min.js">
   </script>
   <script src="src/js/main.js">
   </script> 
</body>
<!-- end Body -->
</html>


body, html {
    background-image: url(../img/background.jpg);
    
}

body {
    font-family: 'Delius', cursive;
}

/*-- HEADER --*/
.header {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    height: 60px;
    line-height: 60px;
    background-color: black;
    position: fixed;
    top: 0;
    z-index: 1;
}

.header .header-menu {
    float: left;
    margin-left: 393px;
    
}

.header .header-menu a {
    margin-left: 44px;
    color: #ffffff;
    font-family: 'Delius', cursive;
}

.header .header-menu a:hover {
    color: darkgrey;
}

/*-- BANNER --*/

.banner {
    margin-top: 60px;
    z-index: 0;
}
.banner .banner-image {
    position: relative;
}

.banner .banner-menu{
    position: absolute;
    background-color: aqua;
    width: 393px;
    text-align: center;
    left: 393px;
    top: 250px

    
        
}
.banner .banner-menu a {
    margin-left: 44px;
    color: #ffffff;
    font-family: 'Delius', cursive;

}

 
.medaillon {
    background-image: url(../img/medaillon.png);
    width: 213px;
    height: 117px;
    
}
Sujet clos
Aller à