CODEWITHSUNDEEP
htmlcssmaterialize
David Selem
David Selem

Reputation: 121

How can I align two logos horizontally in the nav-bar?

I'm using Materialize Framework and I want to put 2 logos on the navbar, one next the other.

I'm having trouble trying to accomodate these elements.

This is the codepen

I've tried playing around with the display propertie, but I can't get it right.

    body {
      background-color: gray; 
    }

    .brand-logo {
        
      display: flex;
      flex-wrap: wrap;
    }

    .brand-logo > #logoUnacar,#svgUnacar {
      line-height: 40px;
      text-align: center;
    }
    
        #logoUnacar {
          order: 1;
          width: 12%;
        }
    
    
        #svgUnacar {
          order: 2;
          width: 50%;
        }
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>
    <body>
        <nav>
            <div class="nav-wrapper light-blue darken-4">
                <a href="#" class="brand-logo">
                    <img id="svgEscudo" src="https://svgshare.com/i/Bbx.svg">
                    <img id="svgUnacar" src="https://svgshare.com/i/BcX.svg">
                </a>
                <ul id="nav-mobile" class="right hide-on-med-and-down">
                    <li><a href="sass.html">Inicio </a>
                    </li>
                    <li><a href="badges.html">Registrar Proyecto</a>
                    </li>
                </ul>
            </div>
        </nav>
    </body>
    </html>

Upvotes: 1

Views: 1163

Answers (2)

Thomas Prince
Thomas Prince

Reputation: 332

You can do something like this:

.brand-logo > img {
   max-height: 40px;
}

Replace 40px with whatever looks good to you

Upvotes: 1

Lakshya Srivastava
Lakshya Srivastava

Reputation: 709

I have used two logos side to side in navbar horizontally. Hope this helps.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>yo</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>

  <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <!-- Brand/logo -->
    <a class="navbar-brand" href="#">
      <img src="download.png" alt="logo" style="width:40px;">
      <img src="download.png" alt="logo" style="width:40px;">
    </a>

    <!-- Links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link . . </a>
      </li>

    </ul>
  </nav>

  <div class="container-fluid">
    <h1>hey</h1>
    <p>GLHF</p>
  </div>

</body>

</html>

Upvotes: 2

Related Questions