I was trying to style logo with padding and yellow background (similar to vox.com website).
The vox website has navbar logo with yellow background and padding:
padding-top: 8px;
padding-right: 16px;
padding-bottom: 8px;
padding-left: 16px;
This make it create a cool effect with the logo appearing to protrude to body section.
I was trying to create the same effect on the site raachotrekkers.com, but it did not happen.
The Vox site is using an SVG logo, whereas I'm using a PNG image.
Is this the reason?
CodePudding user response:
I hope you can get some reference from here:
Also added the code
HTML
<!DOCTYPE html>
<html>
<head>
<title>Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="src/styles.css" />
</head>
<body>
<img src="logo.png" alt="logo" />
</body>
</html>
CSS
body {
font-family: sans-serif;
background: #dedede;
padding: 48px;
}
img {
width: 112px;
height: 60px;
background: yellow;
padding: 12px 22px;
}
You can download the png file of logo from here
CodePudding user response:
You can achieve this by using position:absolute;
and then top:0;
here is the code
*{
margin:0;
padding:0;
box-sizing: border-box;
}
nav{
padding:0 10%;
display:flex;
align-items:center;
min-height:50px;
max-height:80px;
box-shadow:0 2px 10px 0 rgb(0 0 0 / 16%);
}
.brand{
position:absolute;
top:0;
}
.navlogo{
width:180px;
}
.rightele{
display:flex;
justify-content:right;
width:100%;
}
.rightele>*{
align-items:center;
display:flex;
justify-content:center;
}
.rightele ul li{
/* padding:5px 10px; */
list-style-type: none;
}
.rightele ul li,
.rightele button{
margin:5px 10px;
cursor:pointer;
}
.rightele button{
height:40px;
padding:5px 10px;
color:white;
font-weight:800;
background-color:#161616;
}
<nav>
<div >
<img src="https://mlmgm6ui7ujb.i.optimole.com/Z_NXo3Y.9AP_~52a37/w:auto/h:auto/q:85/https://raachotrekkers.com/wp-content/uploads/2020/05/Raacho-Trekkers-Logo.gif">
</div>
<div >
<ul>
<li>Home</li>
<li>About Us</li>
<li>Blog</li>
<li>Road Trip</li>
</ul>
<button>TALK TO US</button>
</div>
</nav>
I did not add CSS for the mobile view because you probably want a burger icon over there and hide all options.
So open this in full screen