Insert a Logo on navbar without bootstrap

Question

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>

Answer 1

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>

Answer 2

Here you go...

It's a lot more simple. Just put your img before the first li and wrap it with a .

For sticky navbar add this to your CSS:

nav {
  position: sticky;
  top: 0;
}

See the snippet 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%; position: sticky; top: 0; } 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:not(#img) { background: turquoise; transition: .5s; } #img { width: 5%; } #img:hover { text-decoration: none; }

 <,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> </head> <body> <nav> <ul> <a href='#'> <img id='img' src='https.//static01.nyt.com/images/2021/04/03/multimedia/03xp-april/merlin_185893383_8e41433f-4a32-4b1e-bf02-457290d0d534-superJumbo.jpg'> </a> <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>

Answer 3

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>

Answer 4

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>

Insert a Logo on navbar without bootstrap

Question

3 answers

solution1
0 2021-12-28 17:21:20

solution2
0 2021-12-28 17:26:54

solution3
0 2021-12-28 19:39:25

place-content: center end;

here is the code

solution4
0 2021-12-29 12:12:40

Insert a Logo on navbar without bootstrap

Question

3 answers

solution1 0 2021-12-28 17:21:20

solution2 0 2021-12-28 17:26:54

solution3 0 2021-12-28 19:39:25

place-content: center end;

here is the code

solution4 0 2021-12-29 12:12:40

solution1
0 2021-12-28 17:21:20

solution2
0 2021-12-28 17:26:54

solution3
0 2021-12-28 19:39:25

solution4
0 2021-12-29 12:12:40