I would like to add a border at the bottom of each item in a ul list

My current focus is on making my website responsive with a breakpoint set at 576px

I am aiming to achieve the design shown in this image without any space in the border-bottom and have both elements expand to full width: menu li hover

However, I'm currently facing an issue where my menu li has unwanted space as seen here: my menu li - with space

Any assistance would be greatly appreciated.

Thank you in advance! Have a wonderful day!

Here's the code snippet I've been working on:

/*-------------------Header desktop size-------------------*/
.header {
    margin: auto;
    max-width: 1440px;
}

.header div {
    display: flex;
    justify-content: space-between;
    height: 100px;
    align-items: center;
    margin: auto;
}

.header img {
    margin: 10px 60px 0px 55px;
}

.menu {
    display: flex;
    flex: 1;
    justify-content: flex-end;
    list-style-type: none;
    margin: 20px 80px 0 0;
    padding-right: 30px;
}

.menu ul {
    display: flex;
    list-style-type: none;
}

.menu-items {
    text-decoration: none;
    color: black;
    font-size: 18px;
}

.menu-items:hover {
    color: #0065fc;
}

.menu li {
    display: flex;
    margin-right: 60px;
    font-weight: normal;
    font-size: 18px;
}

/*-------------------Header mobile size-------------------*/

@media all and ( max-width: 576px) {

/*-- header --*/

    .menu {
        margin-right: 0px;
    }

    .menu nav {
        position: relative;
        flex-basis: 100%;
        order: 2;
        display: flex;
    }

    .menu ul {
        display: flex;
        flex-basis: 100%;
        order: 2;
        position: relative;
        top: 50px;
        right: 160px;
        padding-top: 30px;
        margin-top: 20px;
        margin-left: -30px;     
    }

    .menu-items {
        border-bottom: 3px solid #f2f2f2;
        padding-bottom: 10px;
        width: 250px;
    }

    .menu-items:hover {
        border-bottom-color: #0065FC;
    }

    .sign-up {
        position: absolute;
        padding-top: 0px;
        margin-top: 40px;
        margin-right: 0px;
        padding-left: 5px;
        color: #0065fc;
        text-decoration: none;
        width: 165px;
        transition: all 0.4s;
        right: 9px;
    }
   }
<header class="header">
  <div>
    <div><a href="#" class="header-logo"></a>
      <img src="images/logo/Reservia.svg" alt="Logo Reservia">
    </div>
                
     <nav class="menu">
       <ul>
          <li><a href="#search-lodging" class="menu-items" title="Hébergements">Hébergements</a></li>
          <li><a href="#search-activities" class="menu-items" title="Activités">Activités</a></li>
       </ul>
      
      <a href="#" class="sign-up" title="S'inscrire <strong>S'inscrire</strong></a>
       
     </nav>
  </div>

</header>

javascripthtmlcsshtml-lists

Answer №1

Is it better to set the li margin to 0px or maybe 1px?

/*-------------------Adjusting Header for Desktop Size-------------------*/

.header {
  margin: auto;
  max-width: 1440px;
}

.header div {
  display: flex;
  justify-content: space-between;
  height: 100px;
  align-items: center;
  margin: auto;
}

.header img {
  margin: 10px 60px 0px 55px;
}

.menu {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  list-style-type: none;
  margin: 20px 80px 0 0;
  padding-right: 30px;
}

.menu ul {
  display: flex;
  list-style-type: none;
}

.menu-items {
  text-decoration: none;
  color: black;
  font-size: 18px;
}

.menu-items:hover {
  color: #0065fc;
}

.menu li {
  display: flex;
  margin-right: 60px;
  font-weight: normal;
  font-size: 18px;
}


/*-------------------Adjusting Header for Mobile Size-------------------*/

@media all and ( max-width: 576px) {
  /*-- header --*/
  .menu {
    margin-right: 0px;
  }
  .menu nav {
    position: relative;
    flex-basis: 100%;
    order: 2;
    display: flex;
  }
  .menu ul {
    display: flex;
    flex-basis: 100%;
    order: 2;
    position: relative;
    top: 50px;
    right: 160px;
    padding-top: 30px;
    margin-top: 20px;
    margin-left: -30px;
  }
  .menu li {
    margin-right: 1px; /* Maybe set margin to 0 instead? */
  }
  .menu-items {
    border-bottom: 3px solid #f2f2f2;
    padding-bottom: 10px;
    width: 250px;
  }
  .menu-items:hover {
    border-bottom-color: #0065FC;
  }
  .sign-up {
    position: absolute;
    padding-top: 0px;
    margin-top: 40px;
    margin-right: 0px;
    padding-left: 5px;
    color: #0065fc;
    text-decoration: none;
    width: 165px;
    transition: all 0.4s;
    right: 9px;
  }
}
<header class="header">
  <div>
    <div>
      <a href="#" class="header-logo"></a>
      <img src="images/logo/Reservia.svg" alt="Logo Reservia">
    </div>

    <nav class="menu">
      <ul>
        <li><a href="#search-lodging" class="menu-items" title="Accommodations">Accommodations</a></li>
        <li><a href="#search-activities" class="menu-items" title="Activities">Activities</a></li>
      </ul>

      <a href="#" class="sign-up" title="Sign Up">Sign Up</a>
       
     </nav>
  </div>

</header>

Answer №2

To resolve the issue at hand, simply remove the margin-right property from your media query, and ensure text alignment is set to center.

Please Note: Test this solution on a screen width of 576px or less to confirm the corrections. 

.header {
  margin: auto;
  max-width: 1440px;
}

.header div {
  display: flex;
  justify-content: space-between;
  height: 100px;
  align-items: center;
  margin: auto;
}

.header img {
  margin: 10px 60px 0px 55px;
}

.menu {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  list-style-type: none;
  margin: 20px 80px 0 0;
  padding-right: 30px;
}

.menu ul {
  display: flex;
  list-style-type: none;
}

.menu-items {
  text-decoration: none;
  color: black;
  font-size: 18px;
}

.menu-items:hover {
  color: #0065fc;
}

.menu li {
  display: flex;
  margin-right: 60px;
  font-weight: normal;
  font-size: 18px;
}

/*-------------------Header mobile size-------------------*/

@media all and (max-width: 576px) {

  /*-- header --*/

  .menu {
    margin-right: 0px;
  }

  .menu nav {
    position: relative;
    flex-basis: 100%;
    order: 2;
    display: flex;
  }

  .menu ul {
    display: flex;
    flex-basis: 100%;
    order: 2;
    position: relative;
    top: 50px;
    right: 160px;
    padding-top: 30px;
    margin-top: 20px;
    margin-left: -30px;
  }

  .menu-items {
    border-bottom: 3px solid #f2f2f2;
    padding-bottom: 10px;
    width: 250px;
  }

  .menu-items:hover {
    border-bottom-color: #0065FC;
  }

  .menu li {
    margin-right: unset;
    text-align: center;
    justify-content: center;
  }

  .sign-up {
    position: absolute;
    padding-top: 0px;
    margin-top: 40px;
    margin-right: 0px;
    padding-left: 5px;
    color: #0065fc;
    text-decoration: none;
    width: 165px;
    transition: all 0.4s;
    right: 9px;
  }
}
<header class="header">
  <div>
    <div><a href="#" class="header-logo"></a>
      <img src="images/logo/Reservia.svg" alt="Logo Reservia">
    </div>

    <nav class="menu">
      <ul>
        <li><a href="#search-lodging" class="menu-items" title="Lodging">Lodging</a></li>
        <li><a href="#search-activities" class="menu-items" title="Activities">Activities</a></li>
      </ul>

      <a href="#" class="sign-up" title="Sign Up"<strong>Sign Up</strong></a>
       
     </nav>
  </div>

</header>

View Example in Fiddle

Answer №3

There is a margin-right value of 60px in your .menu li style, causing all list elements to have that margin.

To address this, you might want to include the following selector inside your media query:

.menu li {
  margin-right: 0px;
  padding-left: 30px;
  padding-right: 30px;
}

By using padding instead of margin spacing, you can prevent the text in the list items from being squished together.

You can confirm these changes by inspecting elements in your browser's developer tools under the Elements view, which will display all applied styles and classes.

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

What causes CSS to fail to load in React but work normally in Next.js?

We are currently experiencing an issue with a component located in a Git Submodule that is being used by both Next.js and React. While everything is functioning correctly in Next.js, React is unable to accept the way the CSS is being loaded: import styles ...

javascriptcssreactjs

Why is it that only one of these .php functions is functional?

I'm having some trouble getting my PHP results to display in an HTML table. The first part of my code successfully retrieves the data I need, so I believe the issue lies in the second section where I attempt to format it into a table. Below is the sni ...

phphtml

The hover effect is not functioning properly after loading jQuery with load();

When loading elements into a div using the load() function, I noticed that the :hover effect in CSS stops working for those elements. It's a dynamic menu setup, as shown below: <div id='main-menu'> <ul> <li class='click ...

javascriptjquerycss

Set the height of a div based on the height of another div

My challenge involves a textarea that dynamically expands as content is added to it. The structure of the textarea within a div element is illustrated below: <div id='sendMes' class='container-fluid'> <form action='#&apos ...

javascriptjquerycsshtml

Convert a file into an empty array when sending a post request from Angular to Laravel

I am currently working on a simple Laravel 5 post request that aims to achieve the following tasks: Save some data to a database. Store a file (image) in public storage with a name consisting of 20 random numbers followed by '.jpg'. Save a URL ...

javascriptphpangularlaravellaravel-5

Using Javascript to open a new page and execute a script

I need to be able to launch a new window window.open(url,'_blank'); After that, I want to execute a JavaScript script like this: window.open(url,'_blank').ready("javascript code here"); However, I'm unsure how to accomplish thi ...

javascripthtml

Incorporating Ajax to allow users to choose an option from a selection for

I want to populate a dropdown menu with values received from an ajax call in the form of a json array. However, the current code results in an empty select element being created. $.ajax({ type: "GET", url: "/wp-content/gta/search_airport.php", data: ...

javascriptjqueryajaxjson

Is it possible to establish communication between JAVA and Javascript using Sockets?

Recently, I developed a Java application that generates some data and saves it in a text file on my computer. Instead of saving this data in a text file, I am looking to send it via Socket. Here is an example: Java public static void main(String argv[] ...

javascriptjavanode.jssockets

The layout generated by Metronic does not display the CSS styles

I've been working on creating a Metronic layout using the layout builder, but I'm running into an issue. Whenever I try to open index.html, all I see is this: screenshot It appears that the CSS styles are not loading properly. Interestingly, wh ...

htmlbootstrap-4metronic

Having trouble loading environment variables in NextJS on Heroku?

I am currently utilizing NextJS and deploying my application on Heroku. When the page initially loads, I am able to retrieve data through getInitialProps without any issues. However, when trying to access this data in a regular function, I encounter an er ...

javascriptherokunext.jsdotenv

Issue: Error message - Unhandled promise rejection: NodeInjector error - ControlContainer not found

I'm having trouble validating a form and encountering an error. I tried implementing the suggestions provided in the following threads without success: Getting error suddenly in Angular Error: NodeInjector: NOT_FOUND [ControlContainer] Using forms i ...

javascriptangularforms

Can VueJS Computed handle multiple filters at once?

I am encountering an issue with this code - when I attempt to add another filter inside the computed section, it doesn't work. However, if I remove the additional filter, the code functions correctly. My goal is to have both company and product searc ...

javascriptvue.jsfiltervuejs2vue-component

Using jQuery to create clickable URLs within a rollover div

I am looking to have the div appear on a mouse over effect in the following code. Is there a way for me to input a url based on the data that is passed to it? Anchorage: ["Anchorage", "(555)555-5555"], (This represents the data being posted) AtlanticCit ...

javascriptjqueryhtml

Issue: The function (0, react__WEBPACK_IMPORTED_MODULE_1__.useActionState) is not recognized as a valid function or its output is not iterable

I found a great example of using useActionState at this source. Currently, I am implementing it in my project with Next.js and TypeScript. app/page.tsx: "use client"; import { useActionState } from "react"; import { createUser } from ...

javascriptreactjsnode.jstypescriptnext.js

Troubleshooting the net::ERR_ABORTED 404 (Not Found) error while utilizing next/link to call an API route in NextJS

While developing an api route for downloading a CSV file, I encountered an error when using Next Link. Unfortunately, switching to another method is not an option as it would cause my application to fail to build. The component in question is straightforwa ...

javascriptreactjsnext.jsnext-link

The HTML element does not expand to fill the entire page

I recently encountered a problem with my website. Everything was functioning smoothly until I decided to add some in-page links to a large page. After adding the links, the background no longer stretched the entire length of the page. When scrolling down, ...

htmlcssbackground

Working condition may vary depending on the size of the item

I have integrated the Masonry jQuery plugin into my design, but it is not functioning properly. The CSS class mentioned in the documentation only includes: width: 25% For my purposes, I modified it to: width: 24% float: left margin-right: 5px This modi ...

jqueryhtmlcssmasonry

Changing a single image within a v-for loop of images in Vue

I am currently working with an array in Vue where I am using v-for to create 3 columns of information. Each column includes an image, and I would like to be able to change only the specific image that is being hovered over without affecting any others. How ...

javascriptvue.jsvuejs2

Tips for sending a localstorage value as a parameter in an axios request

Currently, in my React app, I am using Express to handle all of my database queries. One thing I am attempting to achieve is passing the user id stored in local storage into a post request. This is necessary for my application since it revolves around use ...

javascriptnode.jsreactjsexpress

Is there a way to check the existence of an email in the database without having to refresh the PHP page?

Currently, I am using the following method to validate my inputs: <form method="post"> <label>Email</label> <input type="email" name="user_email"> <input type="submit" name="reg"> </form> if(isset($_POST['reg' ...

phphtml