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>
CodePudding user response:
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" />
</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>
CodePudding user response:
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>