Insert a Logo on navbar without bootstrap

user_17782713 0
Viewed 479

I just created a navbar using html and css, but I want to add a small logo (clickable) on the left of my navbar to make it look better. I want to ask also how to set the navbar sticky on the page. Thank you for your help! I will write the code below.

*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}
body{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-image: linear-gradient( 89.8deg,  rgba(222,74,74,1) 4.7%, rgba(30,29,29,1) 120.3% );
}
nav{
    background:rgb(53, 66, 185);
    height: 70px;
    width: 100%;
    
}

nav ul{
    float: right;
    margin-right: 20px;
}
nav ul li{
    display: inline-block;
    line-height: 80px;
    margin: 0 5px;
}
nav ul li a{
    color: white;
    font-size: 17px;
    text-transform: uppercase;
    padding: 7px 13px;
    border-radius: 7px;


}
a.active, a:hover{
    background: turquoise;
    transition: .5s;
}
<body>
    <nav>  
         
       <ul>
        
            <li> <a href="link">HOME/BIGLIETTERIA</a></li>
            <li> <a href="link">FILM</a></li>
            <li> <a href="link">DOVE SIAMO</a></li>
            <li> <a href="link">INFO E REGOLAMENTO</a></li>
            <li> <a href="link">ACCEDI/REGISTRATI</a></li>
        </ul>
    </nav>
</body>

css html
3 Answers

Simply nest the logo image into the nav and give it a class. I called it logo. Then you can position it wherever you desire using absolute positioning. In this demonstration, I positioned it in top left corner using top & left values under logo.

You can nest in an a href to make it "clickable"

* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-image: linear-gradient( 89.8deg, rgba(222, 74, 74, 1) 4.7%, rgba(30, 29, 29, 1) 120.3%);
}

nav {
  background: rgb(53, 66, 185);
  height: 70px;
  width: 100%;
}

nav ul {
  float: right;
  margin-right: 20px;
}

nav ul li {
  display: inline-block;
  line-height: 80px;
  margin: 0 5px;
}

nav ul li a {
  color: white;
  font-size: 17px;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: 7px;
}

a.active,
a:hover {
  background: turquoise;
  transition: .5s;
}

.logo {
  width: 100px;
  height: 50px;
  position: absolute;
  top: 10px;
  left: 5px;
}
<body>
  <nav>
    <a href="#home">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTEkYgCth5MCuFtmT_dV3T2erG1nLltT1A0Gg&usqp=CAU" alt="logo" class="logo" />
    </a>
    <ul>

      <li> <a href="link">HOME/BIGLIETTERIA</a></li>
      <li> <a href="link">FILM</a></li>
      <li> <a href="link">DOVE SIAMO</a></li>
      <li> <a href="link">INFO E REGOLAMENTO</a></li>
      <li> <a href="link">ACCEDI/REGISTRATI</a></li>
    </ul>
  </nav>
</body>

user_164963570

Try using the placing the logo between the anchor tags

css

*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}
body{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-image: linear-gradient( 89.8deg,  rgba(222,74,74,1) 4.7%, rgba(30,29,29,1) 120.3% );
}
nav{
    background:rgb(53, 66, 185);
    height: 70px;
    width: 100%;
    
}

nav ul{
    float: right;
    margin-right: 20px;
}
nav ul li{
    display: inline-block;
    line-height: 80px;
    margin: 0 5px;
}
nav ul li a{
    color: white;
    font-size: 17px;
    text-transform: uppercase;
    padding: 7px 13px;
    border-radius: 7px;


}
a.active, a:hover{
    background: turquoise;
    transition: .5s;
}

html

<body>
    <nav>  
         <a href="/"><img class="navbar-brand" src="logo.png" alt="HomePage"></a>
       <ul>
        
            <li> <a href="link">HOME/BIGLIETTERIA</a></li>
            <li> <a href="link">FILM</a></li>
            <li> <a href="link">DOVE SIAMO</a></li>
            <li> <a href="link">INFO E REGOLAMENTO</a></li>
            <li> <a href="link">ACCEDI/REGISTRATI</a></li>
        </ul>
    </nav>
</body>

user_176740710

ciao, I see the @kameron answer, but I tried also to do it with CSS GRID instead for a more Responsive-Friendly Design :)

so the image is actually taken space (the link will be in the right responsively) and centered well.

in the nav I used grid-template-column: auto 1fr;

this means that the link's parent <ul> will have all the space, but the image will only have the width of the image

1fr = 1 fraction

then to put the links in the right of the page I used place-content: center end;

place-content: center end;

  • is like writing align-content: center; (so center vertically)
  • is like writing justify-content: end; (so it will go to right horizontally)

I also make the text Responsive under 750px, using vw

Responsive = work in all devices

  • vw for width (is a metric equal to 1% of all width of the browser, no matter the parent width or height)
  • vh for height (is a metric equal to 1% of all height of the browser, no matter the parent width or height)
@media (max-width: 750px) {
  nav ul {
    font-size: 1.9vw;
  }
}

here is the code

* {
  --nav-height: 70px;
  --custum-blue: rgb(53, 66, 185);
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-image: linear-gradient( 89.8deg, rgba(222, 74, 74, 1) 4.7%, rgba(30, 29, 29, 1) 120.3%);
}

nav {
  background: var(--custum-blue);
  height: var(--nav-height);
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-auto-flow: column;
  place-content: center;
  gap: 0.1em;
}

nav>a img,
nav>a {
  height: calc(var(--nav-height));
  border-radius: 0 0.5em 0.5em 0;
}

nav ul {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: auto;
  font-size: 1rem;
  place-content: center end;
  padding-right: 0.2em;
}

nav ul li {
  display: grid;
  place-content: center;
}

nav ul li a {
  color: white;
  text-transform: uppercase;
  height: var(--nav-height);
  display: grid;
  place-content: center;
  padding: 0 1vw;
}

nav ul li a.active,
nav ul li a:hover {
  background: turquoise;
  text-shadow: 0 .05em .1em rgb(53, 66, 185);
  transition: .5s;
}

@media (max-width: 750px) {
  nav ul {
    font-size: 1.9vw;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <nav>
    <!-- here put your logo in src -->
    <a href="link">
      <img src="https://avatars.githubusercontent.com/u/87947051?v=4" alt="">
    </a>

    <ul>
      <li> <a href="link">HOME/BIGLIETTERIA</a> </li>
      <li> <a href="link">FILM</a> </li>
      <li> <a href="link">DOVE SIAMO</a> </li>
      <li> <a href="link">INFO E REGOLAMENTO</a> </li>
      <li> <a href="link">ACCEDI/REGISTRATI</a> </li>
    </ul>
  </nav>
</body>

</html>

user_177168370
Related