I have designed a navigation bar, which also needs to have a logo, the problem is that the image is bigger than the navigation buttons. Which is also visible when hovering over the items like in the image shown below.
How do I resolve this issue?
.navigation ul { margin: 0; }.navigation li { display: inline; }.navigation img { max-width: 4ch; }.navigation a { display: inline-block; padding: .8em; color: white; text-decoration: none; }.main-navigation { text-align: left; }.navigation a:hover { background-color: rgba(255, 255, 255, 0.301); color: black; }.nav-header { background-color: rgba(0, 0, 0, .4); background-image: url("Images/navbg.jpg"); background-blend-mode: multiply; background-size: cover; padding-bottom: 30px; }
<header class="nav-header"> <nav class="navigation main-navigation"> <ul> <li> <a href="index.html" target="_self"><img src="https://via.placeholder.com/60" class="logo-ic"></a> <</li> <li><a href="index.html" target="_self">HOME</a></li> <li><a href="applications.html" target="_self">APPLICATIONS</a></li> <li><a href="about.html" target="_self">ABOUT</a></li> </ul> </nav> </header>
The usual solution these days is flex layout with center alignment of the child elements. Also take the padding off the logo anchor element or size it as needed.
See https://css-tricks.com/snippets/css/a-guide-to-flexbox .
.navigation ul { display: flex; align-items: center; margin: 0; }.navigation li { display: inline; }.navigation img { max-width: 4ch; }.navigation a { display: inline-block; padding: .8em; color: white; text-decoration: none; }.main-navigation { text-align: left; }.navigation a:hover { background-color: rgba(255, 255, 255, 0.301); color: black; }.nav-header { background-color: rgba(0, 0, 0, .4); background-image: url("Images/navbg.jpg"); background-blend-mode: multiply; background-size: cover; padding-bottom: 30px; }
<header class="nav-header"> <nav class="navigation main-navigation"> <ul> <li class="logo"> <a href="index.html" class="logo" target="_self"><img src="https://via.placeholder.com/40" class="logo-ic"></a> </li> <li><a href="index.html" target="_self">HOME</a></li> <li><a href="applications.html" target="_self">APPLICATIONS</a></li> <li><a href="about.html" target="_self">ABOUT</a></li> </ul> </nav> </header>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.