The parent navigation bar in HTML and CSS is hogging more space compared to its children

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;
}

https://i.sstatic.net/eCaOV.png

Answer №1

The reason for this issue is that the ul element containing links has a default margin at the top and bottom. To solve this, you can reset the margin for this particular ul:

ul.nav__wrapper {
  margin: 0;
}

When starting a new project, it's a good idea to include some CSS rules to reset default browser behaviors, such as resetting the default margins that some browsers apply to ul elements. This will give you better control over the CSS styles in your project.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing Axios API within Laravel and Vue.js to integrate vue-chartjs

I have been struggling to display all the companies on the chart in Dashboard.vue based on the years, but unfortunately, I haven't been able to get it to show anything despite my efforts over the past few days. If anyone could assist me with this, I w ...

Using jQuery to smoothly animate scrolling to the top of a

How can I create a "scroll to top" button at the bottom of my page that smoothly scrolls to the top? Despite using an "animate({scrollTop})" script, the scroll animation is not working and it jumps directly to the top. This is the script I am using: $(&a ...

The Art of Revealing an Element

Is it possible to manipulate a parent div element in JavaScript without affecting its child nodes? For example, transforming this structure: <div class="parent"> <div class="child"> <div class="grandchil ...

Challenges arising from the rendering of main.js in Vue.js

Recently, I started working with Vue and am now faced with the task of maintaining a project. Main.js contains the routing structure: Main.js import Vue from 'vue' const app = new Vue({ el: '#app', data: { message: & ...

Table design with fixed left columns and header that adjust to different screen sizes

After reading various articles on this issue, I have been unable to find a solution. Most of the examples I've come across feature tables with a single row for the header and rows that consist of just one row, similar to a calendar. My table, on the o ...

Adjusting font size in dynamic containers relatively

Imagine we have a slider named .outer, which adjusts its height based on the width of the viewport. Inside this slider, there is an example slide called .inner that contains some text. However, when we shrink the window width, the content in slide .inner s ...

Trouble organizing a collection of destinations based on their geolocation and proximity

To address this issue, my approach has been to feed variables into the value attributes of an option list and then sort it based on these values. When manually assigning values, everything works smoothly, for example: <option id="link1" value="1">A& ...

Unique CSS design with an accentuated border

I was experimenting with creating a corner using CSS and managed to achieve something like this: .left-corner { width: 0; height: 0; border-top: 100px solid powderblue; border-left: 100px solid transparent; } <div class="left-corner"></ ...

The filter functionality isn't functioning properly when attempting to filter an array of objects within a Vuex action

I have a collection of objects that is accessed through a getter. I am using this getter inside an action to filter the items, but no matter what I do, the filtering does not seem to work and it ends up returning all the mapped item IDs. filterItems({ gett ...

What are the choices for the active element in a bootstrap navbar?

Is there a way to highlight the active element in bootstrap 4? Right now, Home is the active element, but it doesn't stand out enough. https://i.sstatic.net/5tKBx.png <li class="nav navbar-nav "> <a class="nav-link {{ Request::is(&apos ...

What method can I use to incorporate a custom CSS code in Formfacade to conceal the back button on a Google Form?

Looking for a way to hide the back button on my custom questionnaire created with Google Forms? While there is no built-in option to do this directly on Google Forms, I decided to embed my form into Formfacade. However, I am struggling to find the CSS co ...

Discovering multiple classes in a CSS file can be achieved by using specific selectors and searching

I am attempting to phrase my question differently: As mentioned in a book: "multiple classes: p.testorosso.grassetto {color: red; font-weight: bold;} This rule will apply the specified styles to all elements that contain the names of the defined classes ...

Making JavaScript Code More Efficient with VueJS and VUEX

Keeping my Javascript code clean and concise is a top priority for me. I always strive to condense my code so that it remains clutter-free without sacrificing functionality. Take a look at my vuex-mutation code below: editEvent(state) { if (state.for ...

Connecting an image to its corresponding content through hover effect

Can someone please assist me? I am trying to create a hover effect on an image with an "add to cart" link similar to what is shown here: I seem to be having trouble with the code, could you provide some guidance? .hunderter { background: url(http ...

Personalized element IDs and unique CSS styles

After editing the code snippet below... <div id="rt-utility"><div class="rt-block fp-roksprocket-grids-utility title5 jmoddiv"> I applied the changes in my custom.css file like this: #rt-utility .rt-block {CODE HERE} However, when attemptin ...

Disable page scrolling after making changes to the DOM

When my JavaScript function executes on page load and at set intervals, it cycles through images supplied by another PHP script. However, every time the function manipulates the DOM, the page scrolls back to the top of the containing div, which is quite fr ...

Where could I be missing the mark with AngularJS?

After following some tutorials, I managed to create my first test app. However, it doesn't seem to be working properly. The main objective of the app is to extract product information from a JSON file and display it using ng-repeat. Here are the rele ...

"What is the best way to access and extract data from a nested json file on an

I've been struggling with this issue for weeks, scouring the Internet for a solution without success. How can I extract and display the year name and course name from my .json file? Do I need to link career.id and year.id to display career year cours ...

Tips for Establishing Communication Between Two Dynamic Canvas Elements

How do I establish communication between two animated canvas elements? I have created two HTML5 canvas animations using Adobe Animate CC. Both of these animations are placed on a single HTML page. I am able to call functions from within the animations and ...

Disable the ability to select text when double-clicking

Is there a way to prevent text selection on double click while still allowing selection on mouse drag? Whenever I try to remove selection on dblclick or mouseup, it flashes, which is not the desired outcome as shown in this jsfiddle. UPD: I am not lookin ...