Change the background color of the final menu item to stand out and fill the remaining space

The menu appears as a full-screen background, but the actual menu items are of fixed width. The last item in the menu is displayed in a different color.

<div class="nav">
  <ul>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li class="last"><a href="#">Last Link</a></li>
  </ul>
</div>

CSS:

.nav {
  width: 100%;
  background-color: #183650;
}
.nav ul {
    display: flex;
    justify-content: center;
    max-width: 500px;
    padding: 0;
    text-align: center;
    margin: 0 auto;
}
.nav ul li {
  list-style: none;
  margin: 0 10px;
}
.nav ul li a {
  color: #FFF;
  text-decoration: none;
  text-transform: uppercase;
  padding: 10px 0;
  display: block;
}
.nav ul li.last a {
  background-color: #20bef2;
}

https://jsfiddle.net/Lnpysxze/14/

Here's how it currently appears: https://i.sstatic.net/tNVWA.png

However, the light blue color should fill the remaining space to the right, beyond the fixed-width menu, like this: https://i.sstatic.net/ZtIvG.png

The button width remains the same, and the additional space filled with light blue should not be part of the button.

htmlcss

Answer №1

To achieve this effect, you can use a pseudo element on the last item in the list:

.nav ul li.last {
  position: relative;
}

.nav ul li.last::after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 1000px;
  height: 100%;
  background-color: #20bef2;
}

Below is a complete example with overflow: hidden; added to the navigation menu to handle the overflow caused by the pseudo element:

.nav {
  width: 100%;
  background-color: #183650;
  overflow: hidden;
}
.nav ul {
    display: flex;
    justify-content: center;
    max-width: 500px;
    padding: 0;
    text-align: center;
    margin: 0 auto;
}
.nav ul li {
  list-style: none;
  margin: 0 10px;
}
.nav ul li a {
  color: #FFF;
  text-decoration: none;
  text-transform: uppercase;
  padding: 10px 0;
  display: block;
}
.nav ul li.last a {
  background-color: #20bef2;
}

.nav ul li.last {
  position: relative;
}

.nav ul li.last::after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 1000px;
  height: 100%;
  background-color: #20bef2;
}
<div class="nav">
  <ul>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li class="last"><a href="#">Last Link</a></li>
  </ul>
</div>

Answer №2

It is not feasible if the max-width: 500px property is applied to the parent ul. In the absence of this restriction, you can utilize flex: 1 for the .first and li:last-child elements while adjusting their text-align and margin properties. Keep in mind that using a pseudo-element is akin to adding an extra element, so consider whether your objective is functional or purely visual:

body {margin: 0}

.nav {
  background-color: #183650;
}

.nav ul {
  display: flex;
  justify-content: center;
  /*max-width: 500px;*/
  padding: 0;
  text-align: center;
  margin: 0;
  border: 1px solid #fff;
  list-style: none;
}

.nav ul li:first-child {
  flex: 1;
  text-align: right;
}

.nav ul li:not(:last-child) {
  margin: 0 10px;
}

.nav ul li a {
  color: #FFF;
  text-decoration: none;
  text-transform: uppercase;
  padding: 10px 0;
  display: block;
}

.last {
  flex: 1;
  margin-left: 10px;
  text-align: left;
  background-color: #20bef2;
}
<div class="nav">
  <ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="last"><a href="#">Last Link</a></li>
  </ul>
</div>

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

The website functions properly with Live Server, but encounters issues when launched from the Files directory

After testing multiple browsers, the site consistently works fine with Live Server. However, when accessed through Firefox or Chrome, my style.css fails to load completely. On Edge, an error message indicates that the file is missing. Below are snippets of ...

htmlcssfilebootstrap-5liveserver

What steps can I take to make my Google Programmable Search Engine more optimized for mobile devices?

My Google programmable search engine is functioning perfectly on a computer browser: https://i.sstatic.net/9gLlx.jpg However, it appears scrunched up when accessed on mobile devices: https://i.sstatic.net/jSn41.jpg I have attempted to adjust the height ...

htmlcssmobile-safarigoogle-search

Utilizing React Material UI to divide the screen in half with one half being scrollable and the other half remaining fixed using UI Grid

My setup involves two Grid components, with one structured like this: <Grid container alignItems="stretch" spacing={3}> <Grid className="left-pane" item md={4} xs={12}> <Navigation /> </Grid> <Grid className="right-pan ...

cssreactjsmaterial-ui

Unable to resize tables in IE when using CSS Flex layout

Having a bit of trouble with the flex layout. I've put together a FIDDLE project where when resizing the output box, table cells will align one to one beneath each other. It seems to work fine in Chrome and Firefox but not in IE when using table eleme ...

htmlcss

CSS selector for the 'second next' element, checkboxes and labels within MVC forms

I found a helpful resource that explains how to style checkboxes using CSS. It suggests using the + selector to target the label immediately following the checkbox: input[type="checkbox"]{} input[type="checkbox"] + label {} However, I encountered an issu ...

htmlcssasp.net-mvc

Is there a way for me to manage the options that appear in both of my dual <select> elements?

Below is a snippet of code that I need help with: <p> <label>Dual Select</label> <span id="dualselect" class="dualselect"> <select name="select3" multiple="multiple" size="10"> <option value=""&g ...

jqueryhtml

How to center a label vertically within a button group using Bootstrap

How can I vertically align labels for 2 inline elements inside a horizontal form without using hacks like display:table? So far, this is the code I have tried: bootply ...

htmlcsstwitter-bootstrapvertical-alignment

Experiencing issues with retrieving information from the database

I have a form and query set up to retrieve information from a database. The issue I'm encountering is that it works perfectly when the studentcode is a number, but fails when it's a letter. I'm unsure of what might be causing this problem. A ...

phpjquerymysqlsqlhtml

What's preventing it from being cached?

So, I have a website (https://illution.dk) and most of my files that are included or linked are returning a "304 Not Modified" header. However, there is one exception: https://illution.dk/include/style.php, which always returns a "200 OK." The headers for ...

phphtmlcsscachinghttp-headers

Angular's CDK presents an obstacle when attempting to dynamically create a draggable element

Whenever I try to modify the innerHTML of an element to include: <div cdkDrag>I should be draggable</div>, the div is not becoming draggable as expected. You can see an example here: https://stackblitz.com/edit/angular-material2-issue-d1kv8a. ...

htmlangulartypescriptdrag-and-dropangular-cdk

Is it possible to display a thumbnail image in a separate full-sized window by using CSS or JavaScript?

I am currently utilizing a program called WebWorks 2020.1 that automatically creates <img> tags from my FrameMaker source input when published to DHTML. Unfortunately, I do not have the ability to directly modify the HTML <img> or <a> tag ...

javascripthtmlcssimage

Calculating total marks for an online examination system using PHP

I am currently in the process of developing a straightforward online Examination system. When an Admin adds a question, they also input the Correct score and Negative score for that particular question. However, I am facing difficulties in determining how ...

phphtmlmysql

Retrieve the next element in android studio that shares the same class name as jsoup

i am trying to access the next element with the same class name in HTML. The HTML tag structure looks like this: HTML: <section class="post"> <img class="pecintakomik" src="/images/top/op.jpg" alt="pecintakomik.com" /> <div class=" ...

javaandroidhtmljsoup

Revise for embedded frame contents

Is it possible to modify the HTML content of an iframe within a webpage? I currently have this code snippet: <iframe src="sample.html"></iframe> I am looking for a way to edit the contents of sample.html without directly altering the HTML co ...

javascripthtmlwysiwyg

Are there any tools available that can generate CSS code automatically

Our team offers a pre-set CSS file along with the HTML mock-up for partners to customize, such as changing colors and background images, to match their desired aesthetic. They then provide feedback on the modified CSS files back to us. However, we face a ...

htmlcss

Find the initial element using the class name to retrieve the CSS properties

.class + p:first-child{ } The code above isn't functioning properly, unless it's an element instead of a class, like p:first-child. <div class="wrap"> <h3></h3> <div style="clear:both"></div> <p></p> & ...

csscss-selectors

Deploying CSS/JS files in Magento 2 is a crucial

Hello, I recently set up magento2 with the sample data included. After attempting to deploy static css/JS using the command php bin/magento setup:static-content:deploy, I didn't receive any errors but the issue persists. Additionally, I am unable to l ...

javascriptcssmagento2

The width of mat-table columns remains static even with the presence of an Input field

I'm currently working on an Angular component that serves the dual purpose of displaying data and receiving data. To achieve this, I created a mat-table with input form fields and used {{element.value}} for regular data display. Each column in the tab ...

cssangulartypescriptangular-materialangular-material-table

Elements are not detected after applying display:none

Within the onLoad event, I implemented a function to hide multiple div elements by setting their CSS property display to "none" and assigning them the class name "invisible": function hideContent() { laElements = document.getElementById("content").chil ...

javascripthtmlcssdom

Is there a way to incorporate a bottom border into Vuetify's v-tabs component?

I am trying to achieve a specific result: https://i.sstatic.net/1Um2th3L.png This is how I accomplished it: <v-tabs> <v-tab v-for="(tab, i) in tabs" :key="i" v-bind="tab" ></v-tab> </v-tab ...

cssvue.jsvuejs3vuetifyjs3