Voici le résultat de ce bout de code : entrez la description de l'image ici

J'ai essayé d'utiliser

float: right;

Voici mon code html:

    @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap');

     /*COLOR SCHEME*/
     :root {
       --grey: rgb(26, 26, 26);
       --light-grey: rgb(82, 82, 82);
       --blue: #0066ff;
       --white: white;
     }

     /*BACKGROUND COLOR*/
     body {
       background-color: var(--grey);
       margin-left: 1.5em;
       margin-right: 1.5em;
     }
     
     /*---------------------------------------NAVBAR----------------------------------------*/
     .navbar {/*NAVBAR*/
       border-bottom: 1px solid var(--light-grey);
       padding: 1em;
       position: fixed;
     }
     .logo{/*KRIMAN LOGO*/
       position: relative;
       max-width: 200px;
       max-height: 200px;
     }
     span {/*THE 'MAN' IN THE KRIMAN LOGO*/
       color: var(--blue);
     }
     .logo:hover {/*THE LINK FOR THE KRIMAN LOGO*/
       cursor: pointer;
       text-decoration: none;
     }

     .menu:hover {
       cursor: pointer;
     }
     .menu {
       margin: auto 5px;
       float: right;
       width: 35px;
       height: 24.5px;
       display: inline-flex;
       margin-top: 5px;
     }
<!DOCTYPE html>
     <html>
       <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width">
         <title>Kriman</title>
         <link href="style.css" rel="stylesheet" type="text/css" />
       </head>
       <body>
         <script src="script.js"></script>
         <div class="navbar">
           <img class="logo" src="images/Kriman_Logo-Text.jpg" alt="">
           <img class="menu" src="images/menu.png" alt="menu">
         </div>
       </body>
     </html>
0
Mantra Patel 19 mars 2021 à 15:23

2 réponses

Meilleure réponse

Vous devez ajouter width pour .navbar. J'ai trouvé 100vw-4.5em pour être une bonne largeur

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap');

     /*COLOR SCHEME*/
     :root {
       --grey: rgb(26, 26, 26);
       --light-grey: rgb(82, 82, 82);
       --blue: #0066ff;
       --white: white;
     }

     /*BACKGROUND COLOR*/
     body {
       background-color: var(--grey);
       margin-left: 1.5em;
       margin-right: 1.5em;
     }
     
     /*---------------------------------------NAVBAR----------------------------------------*/
     .navbar {/*NAVBAR*/
       border-bottom: 1px solid var(--light-grey);
       padding: 1em;
       position: fixed;
       width: calc(100vw - 4.5em);
     }
     .logo{/*KRIMAN LOGO*/
       position: relative;
       max-width: 200px;
       max-height: 200px;
     }
     span {/*THE 'MAN' IN THE KRIMAN LOGO*/
       color: var(--blue);
     }
     .logo:hover {/*THE LINK FOR THE KRIMAN LOGO*/
       cursor: pointer;
       text-decoration: none;
     }

     .menu:hover {
       cursor: pointer;
     }
     .menu {
       margin: auto 5px;
       float: right;
       width: 35px;
       height: 24.5px;
       display: inline-flex;
       margin-top: 5px;
     }
<!DOCTYPE html>
     <html>
       <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width">
         <title>Kriman</title>
         <link href="style.css" rel="stylesheet" type="text/css" />
       </head>
       <body>
         <script src="script.js"></script>
         <div class="navbar">
           <img class="logo" src="images/Kriman_Logo-Text.jpg" alt="">
           <img class="menu" src="images/menu.png" alt="menu">
         </div>
       </body>
     </html>
0
Rojo 19 mars 2021 à 12:38

Pour laisser le logo à gauche et déplacer l'icône du hamburger à l'extrême droite, vous pouvez appliquer display: flex; justify-content: space-between; à la barre de navigation, et vous devez définir son width en conséquence (voir ci-dessous - je l'ai mis à 100% moins 5em pour les remplissages et les marges):

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap');

     /*COLOR SCHEME*/
     :root {
       --grey: rgb(26, 26, 26);
       --light-grey: rgb(82, 82, 82);
       --blue: #0066ff;
       --white: white;
     }

     /*BACKGROUND COLOR*/
     body {
       background-color: #ddd;
       margin-left: 1.5em;
       margin-right: 1.5em;
     }
     
     /*---------------------------------------NAVBAR----------------------------------------*/
     .navbar {/*NAVBAR*/
       border-bottom: 1px solid var(--light-grey);
       padding: 1em;
       position: fixed;
       width: calc(100% - 5em);
       display: flex;
       justify-content: space-between;
     }
     .logo{/*KRIMAN LOGO*/
       position: relative;
       max-width: 200px;
       max-height: 200px;
     }
     span {/*THE 'MAN' IN THE KRIMAN LOGO*/
       color: var(--blue);
     }
     .logo:hover {/*THE LINK FOR THE KRIMAN LOGO*/
       cursor: pointer;
       text-decoration: none;
     }

     .menu:hover {
       cursor: pointer;
     }
     .menu {
       margin: auto 5px;
       float: right;
       width: 35px;
       height: 24.5px;
       display: inline-flex;
       margin-top: 5px;
     }
<!DOCTYPE html>
     <html>
       <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width">
         <title>Kriman</title>
         <link href="style.css" rel="stylesheet" type="text/css" />
       </head>
       <body>
         <script src="script.js"></script>
         <div class="navbar">
           <img class="logo" src="images/Kriman_Logo-Text.jpg" alt="logo">
           <img class="menu" src="images/menu.png" alt="menu">
         </div>
       </body>
     </html>
0
Johannes 19 mars 2021 à 13:30