In the midst of my vuejs project, I have encountered an issue relating to the size of elements. Specifically, my header consists of a logo and a navbar.
The navbar seems to be extending the size of the header unnecessarily. Upon inspection, I noticed that the links within the navbar have the correct size, but the navbar itself is taking up more height than necessary.
Here is the code for the header. I am unsure of what could be causing this discrepancy. My goal is to achieve the layout shown in the screenshot below, without the extra white strips above and below.
<header class="site-header">
<div class="wrapper site-header__wrapper">
<a href="/home" class="logo__wrapper"><img src="../../assets/logo_xsmall.png">
<p>AOE Builder</p>
</a>
<input type="text" placeholder="Search a build...">
<div class="nav">
<ul class="nav__wrapper">
<li class="nav__item"><a href="/all-builds">All builds</a></li>
<li class="nav__item"><a href="/search">Search</a></li>
<li class="nav__item"><a href="/my-account">Account</a></li>
<li class="nav__item"><a href="/about">About</a></li>
</ul>
</div>
</div>
</header>
Regarding the CSS:
.site-header {
position: relative;
background-color: #ffffff;
}
a {
text-decoration: none;
font-size: larger;
}
a:hover{
font-weight: 700;
background-color: #f8f1e4;
color: black;
}
.site-header__wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo__wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
input[type=text] {
float: right;
border: none;
margin-right: 16px;
font-size: 17px;
border-style: double;
}
.nav__wrapper {
display: flex;
justify-content: space-between;
align-items: center;
list-style-type: none;
}
.nav__item a {
display: block;
padding: 1.5rem 1rem;
}
Lastly, the global CSS:
@font-face {
font-family: cinzel;
src: url("../fonts/Cinzel-VariableFont_wght.ttf")
}
#app, body {
min-height: 100vh;
display: flex;
flex-direction: column;
margin: 0;
font-family: cinzel;
}
.content {
flex: 1 0 auto;
background: url("../bg.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}