Menu
Community /Pin to ProfileBookmark
@cootheadMay 06.2019 — #Hi there Marco12,
and a warm welcome to these forums. :D
Here is one possible solution for you to try...
_coothead_
How to do a overlap logo over my navigation bar?
Hi guys, so bassicly i’m building a webiste in HTML for my college project, and I need help because I would like to do everything right.
Here is the navigation bar that I have:
Please ignore the language because that is my native language and I have to do my project on it.
So I would like to put my round (circle) logo in the center of this navigation bar in the way that half of it is on nav bar and half on the text. Example of that:
If needed I will post my HTML and CSS code right here.
Thanks!
Sign in
to post a comment2 Comments(s) ↴
0
@cootheadMay 06.2019 — #Hi there Marco12,and a warm welcome to these forums. :D
Here is one possible solution for you to try...
``<i>
</i><!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
background-color: #f9f9f9;
font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
}
#nav {
display: flex;
border-bottom: 1px solid #999;
background-color: #e3e3e3;
box-shadow: 0 0.25em 0.25em rgba( 0, 0, 0, 0.4 );
}
#nav ul {
width: 33.33%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
#nav li {
display: inline-block;
}
#nav ul a {
display: block;
padding: 1em;
color: #696969;
text-decoration: none;
}
#nav div {
position: relative;
width:33.33%;
}
#nav div a {
position: absolute;
bottom: -48px;
left: calc( 50% - 48px );
border: 1px solid #999;
border-radius: 50%;
box-shadow: 0 0 0.75em rgba( 0, 0, 0, 0.5 );
}
#nav div a img {
display: block;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
</ul>
<div>
<a href="#">
<img src="https://via.placeholder.com/94x94/cbcbcb/696969?text=Logo" width="94" height="94" alt="site logo">
</a>
</div>
<ul>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
</ul>
</div>
</body>
</html><i>
</i>``_coothead_