What's the best way to horizontally align two logos in the navigation bar?

Has anyone successfully placed 2 logos on the navbar in Materialize Framework side by side?

I'm struggling to make it work and could use some help.

Here is my CodePen for reference.

I've experimented with the display property but haven't quite nailed it.

    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>

htmlcssmaterialize

Answer №1

I have successfully placed two logos next to each other in the navbar horizontally. I hope this solution works for you.

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

<head>
  <title>Hello World</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="logo1.png" alt="Logo 1" style="width:40px;">
      <img src="logo2.png" alt="Logo 2" 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>Welcome!</h1>
    <p>Have a great day!</p>
  </div>

</body>

</html>

Answer №2

Here is a simple way to achieve this:

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

You can adjust the value of 40px to suit your preferences

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display a popup notification when clicking in Angular 2

Can anyone help me with displaying a popup message when I click on the select button that says "you have selected this event"? I am using Angular 2. <button type="button" class="button event-buttons" [disabled]="!owned" style=""(click)="eventSet()"&g ...

javascripthtmlangulartypescript

What size should I use for creating a responsive website?

After scouring the internet, I stumbled upon numerous dimensions referred to as proper for developing responsive designs. However, I am specifically interested in identifying the ideal breakpoints, particularly for mobile devices with small screens like ...

htmlcssresponsive

How come the spacing between my columns decreases as I expand the width of my container?

I'm struggling to grasp the concept behind the column gap in a multi-column layout. Take a look at the HTML/CSS code snippet I have set up in this Fiddle: <div class="flex-container"> <div class="flex-item">1</div& ...

htmlcssflexboxcss-multicolumn-layout

Feeling puzzled by the concept of CSS Block Formatting Contexts (BFCs)

In the World Wide Web Consortium (W3C), the concept of Block Formatting Context (BFC) is explained as follows: Within a block formatting context, boxes are arranged one after another in a vertical manner, starting at the top of a containing block. The dist ...

cssblock

"The functionality of the express post method does not seem to be working properly when accessing

I am having trouble retrieving form data sent using the "POST" method from an HTML form in my app.post method. I am unable to access anything from req.body. Can anyone point out what mistake I might be making? Here is my HTML form - <form method=" ...

javascripthtmlnode.jsexpress

Updating the Position of an Element in ElectronJS (e.g. Button, Label, etc)

Is there a way to change the positioning of a button in a window using JavaScript and Electron? I am trying to create new input boxes next to existing ones, but they always appear below the last one created. Is it possible to specify x and y coordinates fo ...

javascripthtmlelectron

What is the best way to save geolocation coordinates in a Javascript array?

I am attempting to utilize HTML5 geolocation to determine a user's location and then store the latitude and longitude coordinates in an array for future use with Google Maps and SQL statements. However, when I attempt to add these coordinates to the a ...

javascriptarrayshtmlgeolocation

Show equally sized elements using a grid system

I need assistance with displaying fields in a row using CSS grid. I want to display 3 fields in a row with equal width, and if there are only 2 fields, they should also have equal widths. Additionally, if there is only one field, it should take up the full ...

cssreactjsmaterial-uicss-grid

The CSS slideshow is malfunctioning when displaying images retrieved from the database

I received a complimentary website layout to enhance my PHP skills. The website originally had slides on the index page, sourced directly from my computer when it was in index.html. However, now I have modified it to retrieve images from a database. Instea ...

phphtmlcssfunctionslide

Internet Explorer 11 has a problem with excessive shrinking of flex items

I have a flexbox setup with a left and right section, each of equal width. The left side displays an image and the right side contains text. While this layout works fine in Google Chrome, it does not wrap properly in Internet Explorer 11 when the width is ...

htmlcssgoogle-chromeflexboxinternet-explorer-11

Error in CSS Header - Position Shifts when Hovered Over

UPDATED HEADER HTML/CSS I am currently working on the header section of my website at . I encountered a bug where, upon hovering over the links in the header from right to left, the positions of the links become disorganized. I am unsure of what might be ...

jqueryhtmlcss

Using Javascript, delete all chosen HTML elements containing innerText

Looking to extract certain HTML tags from a block of code in TextArea1 and display the modified output in TextArea2 upon clicking a button. <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8&quo ...

javascripthtml

Creating a responsive single webpage using HTML/CSS

How can I make some div or img responsive for mobile format? <meta name="viewport" content="width=device-width, initial-scale=1" /> <div class="container"> <h1 class="title"> ...

htmlcss

Include text for both the button label before and after a bootstrap toggle button

Is there a way to change the button label on a bootstrap toggle switch/button before and after clicking it without using jquery or javascript? It seems like there should be a feature in bootstrap for this. Initially, the label reads: Show list After clic ...

cssbootstrap-5

Switching from a click event to a hover event in JavaScript

I've been experimenting with animating a burger bar on hover and came across an example online that I managed to adapt for mouseenter functionality. However, I'm struggling to make it revert back to the burger bar shape once the mouse leaves on m ...

javascriptjqueryhtmlcss

What is the best way to create a button that will trigger a modal window to display a message?

I am looking to create a button that will open a modal window displaying a message. However, when I tried to add a label and viewed the page, the desired window appeared on top of the rest of the content. But unfortunately, clicking the button did not prod ...

javascripthtmlcss

Using z-index to overlay a background image with transparency

I'm attempting to make a partially transparent div with text on top. My approach involves creating a parent tag with relative positioning. I have one child span with transparency set using the class .body-content-background and another child containi ...

htmlz-index

How can I ensure that my image remains responsive and aspect ratio-friendly?

Is there a way to accomplish this magical effect? I find myself in a similar situation. I require an image that remains centered while adjusting to fit the screen, all while maintaining its aspect ratio. ...

htmlcssimageaspect-ratio

Rendering the page using ReactDOM.render

Just started with ReactJS, I'm struggling to figure out why my page isn't displaying anything - <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ...

javascripthtmlreactjs

Tips for displaying the number of selected values in a select box label (e.g. Choose an Option)

I am currently using the jQuery multiselect API in my application to allow users to select multiple values. However, I am facing an issue where I need to fetch all the selected values when a button next to the multiselect box is clicked. Unfortunately, I h ...

javascriptjqueryhtmlcss