How to Display a Logo with CSS

What is the proper way to display a logo with CSS?

The correct way to display a Logo is with an <img> element. If you haven't studied logos and logotype, you might not realize that a logo has its own semantics and is required to be presented in a very specific manner. It may also have a required interpretation, which is what should be used in the [alt] attribute.

If that required interpretation is legitimately a heading in the page, it would be semantically correct to add it to a <h#> element:

<h1>
    <img src="logo.png" alt="Foo Co.: Where everyone can fizz the buzz" />
</h1>

Typically the logo is used as a link, so it's common to see:

<a href="/">
    <img src="logo.png"... />
</a>

Additionally the logo can be emphasized (could be either <strong> or <em> depending on degree):

<strong>
    <a href="/">
        <img src="logo.png" ... />
    </a>
</strong>

To understand the semantics of a logo. If you're referencing the Coca-cola company, the logo for the brand would not, and should not change if you swapped out, or removed a stylesheet. Most people understand that semantically,

the Coca-Cola logo

is different from

the Pepsi logo

Display Logo inline with menu items in HTML and CSS

In your CSS. change the style for #Logo to #Logo img{}. you have to set the width to img tag. Not its parent container.

#Logo img{
width:100px;
height:30px;
float: left;
margin-top: 5px;
}

JS Fiddle

How to align logo and menu items in one line?

Here's a start with flexbox.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

body {
  background-color: #ffffff;
}

#wrapper {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.top-menu {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu {
  display: flex;
  align-items: center;
}

.logo {
  width: 40px;
  height: 40px;
}

.menu ul li {
  display: inline;
  list-style: none;
}

.menu ul li a {
  text-decoration: none;
  color: #303030;
  font: 14px lato;
}

<div id="wrapper">
  <header>
    <div class="top-menu clearfix">
      <div class="menu">
        <div class="logo">
          <a href=""><img src="https://via.placeholder.com/50" alt="Sample Image"></a>
        </div>

        <ul>
          <li><a href="">Women</a></li>
          <li><a href="">Men</a></li>
          <li><a href="">Kids</a></li>
          <li><a href="">Coming Soon</a></li>
          <li><a href="">About</a></li>
        </ul>
      </div>

      <div class="menu">
        <ul>
          <li>
            <a href=""><img src="https://via.placeholder.com/10" alt="Sample Image"> Login</a>
          </li>
          <li>
            <a href=""><img src="https://via.placeholder.com/10" alt="Sample Image"> Basket</a>
          </li>
        </ul>

        <div class="search-container">
          <form action="/action_page.php">
            <button type="submit"><i class="fa fa-search">s</i></button>
          </form>
        </div>
      </div>
    </div>
  </header>

How do I add corner logos into Footer using Html & CSS?

I think a solution can be the use of display:flex

And to be more clean try to use also the widgets, you can see in this example how it works.

.footer {
  background-color: #035642;
  margin-top: 10px;
  height: 60px;
  color: #efe5d0;
  text-align: center;
  padding: 15px;
  font-size: 100%;
  font-family: Arial;  
  display: block;
}

.footer ul {
  padding: 5px;
  list-style-type: none;
  text-align: center;
  margin: 10px;
  overflow: hidden;
}

.footer li {
  text-decoration: none;
  text-align: center;
  font-family: arial;
  font-weight: bold;
  list-style-type: none;
  display: inline-block;
}

.footer ul li {
  display: inline-block;
}

.footer ul li a {
  text-decoration: none;
  padding: .2em 1em;
  color: #efe5d0;
  background-color: #5c755e;
  text-align: center;
  font-family: arial;
  font-weight: bold;
}

.footer ul li a:hover {
  color: #000;
  background-color: #fff;
}

#footer-right {
  height: 50px;
  width: auto;
  position: fixed;
  float: right;
}

/*my-edit*/
#the-footer{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  height: auto;
  margin: 0;
  padding: 10px;
}
#the-footer .widget{
  width: 30%;
}
#the-footer .widget.left{
  text-align: left;
}
#the-footer .widget.right{
  text-align: right;
}
#the-footer .widget.center{
  text-align: center;
}
#the-footer .widget .title{
  font-weight: bold;
  letter-spacing: 2px;
}
#the-footer .widget .logo-link{
  color:#fff;
  display: inline-block;
  text-decoration: none;
  max-width:150px;
}
#the-footer .widget .logo-link:hover{
  color:#000;
}

<div class="footer" id="the-footer">
  <div class="widget left">
    <a class="logo-link" href="#" target="_blank">Sponsored by HP omen gaming</a>
  </div>
  <div class="widget center">
    <div class="title">WBHS ESPORTS</div>
    <ul class="footer-nav">
      <li><a href="#" target="_blank">Facebook</a></li>
      <li>|</li>
      <li><a href="#" target="_blank">YouTube</a></li>
      <li>|</li>
      <li><a href="#" target="_blank">Twitch</a></li>
    </ul>
  </div>
  <div class="widget right">
    <a class="logo-link" href="#" target="_blank"><img class="logo-footer" src="https://via.placeholder.com/60" alt="logo"></a>
  </div>
</div>

how to display logo and text side to side in bootstrap

I created a container around the logo and the text, than defined it as a flexbox with vertical alignment.

.nav-logo {display: flex;align-items: center;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /><nav class="navbar navbar-inverse" role="navigation">  <div class="container">    <!-- Brand and toggle get grouped for better mobile display -->    <div class="navbar-header">      <button type="button" class="navbar-toggle" data- toggle="collapse" data-target="#bs-example-navbar-collapse-1">                <span class="sr-only">Toggle navigation</span>                <span class="icon-bar"></span>                <span class="icon-bar"></span>                <span class="icon-bar"></span>            </button>      <div class="nav-logo">        <span> <img src="http://placehold.it/200x100" height="100" alt="logo" /> </span>        <h2>MyWebiste</h2>      </div>
    </div>  </div></nav>

CSS / HTML Navigation and Logo on same line

The <ul> is by default a block element, make it inline-block instead:

.navigation-bar ul {
  padding: 0px;
  margin: 0px;
  text-align: center;
  display:inline-block;
  vertical-align:top;
}