Choosing an item prior to a break in the text line

Question

Choosing an item prior to a break in the text line

I designed a navigation bar with the following CSS structure

    nav {
        text-align: center;
    }
    nav > ul {
        list-style: none;
        padding: 0;
        margin: 8px auto;
    }
    nav > ul > li {
        display: inline-block;
        padding: 10px;
        width: 200px;
        text-align: center;
        box-sizing: border-box;
        border-right: 1px solid;
    }
    nav > ul > li:last-child {
        border-right: 0px none;
    }
    nav a {
        font-size: 130%;
    }

<nav>
    <ul>
        <li><a href="url">link one</a>
        <li><a href="secondurl">link two</a>
        ...
    </ul>
</nav>

The li:last-child part helps enhance its appearance. However, I encounter an issue when the navigation bar collapses (like on smaller screens or browsers). I want to remove those borders before they break into a new line. Is there a way in plain CSS to achieve this? If not, what would be a JavaScript solution for this scenario?

I explored the MDN Selector list, but it seems like no pseudo-class selector specifically caters to this requirement. I thought about using media queries for different screen sizes to dynamically remove the border, but that approach seems more like a workaround. Am I overlooking a more HTML-centric solution to address this concern?

html css

Answer 1

Answer №1

When referencing "when the navigation bar collapses," it is assumed that you are referring to when it transitions into a single column layout.

In this scenario, you can utilize media queries to adjust the CSS styles when the screen size reaches a specific breakpoint. For example, you can exclude borders by default and then introduce them once the screen width hits 400px (or another suitable size based on your site's padding and margins within containers) with the following code:

@media only screen and (min-width:400px){    
     nav > ul > li {
        border-right: 1px solid;
    }
    nav > ul > li:last-child {
        border-right: 0px none;
    }
}

Functional Demo (For optimal viewing, expand to full screen and resize your browser window):

nav {
        text-align: center;
    }
    nav > ul {
        list-style: none;
        padding: 0;
        margin: 8px auto;
    }
    nav > ul > li {
        display: inline-block;
        padding: 10px;
        width: 200px;
        text-align: center;
        box-sizing: border-box;
    }
    nav a {
        font-size: 130%;
    }
@media only screen and (min-width:400px){    
     nav > ul > li {
        border-right: 1px solid;
    }
    nav > ul > li:last-child {
        border-right: 0px none;
    }
}

<nav>
    <ul>
        <li><a href="url">link one</a>
        <li><a href="secondurl">link two</a>
        <li><a href="url">link one</a>
        <li><a href="secondurl">link two</a>
    </ul>
</nav>

UPDATE: After reviewing your edits and feedback, achieving this without using media queries in HTML and CSS alone may not be feasible. I have included a link to a relevant question above which discusses potential JavaScript solutions if you prefer an alternative approach.

Answer 2

When referencing "when the navigation bar collapses," it is assumed that you are referring to when it transitions into a single column layout.

In this scenario, you can utilize media queries to adjust the CSS styles when the screen size reaches a specific breakpoint. For example, you can exclude borders by default and then introduce them once the screen width hits 400px (or another suitable size based on your site's padding and margins within containers) with the following code:

@media only screen and (min-width:400px){    
     nav > ul > li {
        border-right: 1px solid;
    }
    nav > ul > li:last-child {
        border-right: 0px none;
    }
}

Functional Demo (For optimal viewing, expand to full screen and resize your browser window):

nav {
        text-align: center;
    }
    nav > ul {
        list-style: none;
        padding: 0;
        margin: 8px auto;
    }
    nav > ul > li {
        display: inline-block;
        padding: 10px;
        width: 200px;
        text-align: center;
        box-sizing: border-box;
    }
    nav a {
        font-size: 130%;
    }
@media only screen and (min-width:400px){    
     nav > ul > li {
        border-right: 1px solid;
    }
    nav > ul > li:last-child {
        border-right: 0px none;
    }
}

<nav>
    <ul>
        <li><a href="url">link one</a>
        <li><a href="secondurl">link two</a>
        <li><a href="url">link one</a>
        <li><a href="secondurl">link two</a>
    </ul>
</nav>

UPDATE: After reviewing your edits and feedback, achieving this without using media queries in HTML and CSS alone may not be feasible. I have included a link to a relevant question above which discusses potential JavaScript solutions if you prefer an alternative approach.

Choosing an item prior to a break in the text line

Answer №1

Similar questions

Issue with URL routing causing page to display incorrectly

What could be causing html-webpack-inline-source-plugin to prevent the page from refreshing after editing CSS files?

Animation controlled by a button

How to prevent the back button from functioning in Android devices

Ensure that the Div element is able to wrap lines in the same way that the Span element

Troubleshooting a Messaging Error between Background and Another Script

displaying information in table cells with jquery

Grammarly is seamlessly inserting padding into my body element

I am experiencing issues with my JavaScript not functioning properly in conjunction with my HTML and CSS. I am uncertain about the root cause of the problem (The console is displaying an error message:

Make the width of a table column match the width of the header

Interacting with CSS buttons using Selenium

I want to initiate a Python script by clicking a button on my HTML page with the help of Ajax

Java code to extract and delete a section of a website on a webpage

how to enable drag and drop functionality based on names in angularjs

clicking on the anchor does not trigger the modal to open

Incorporate a 'Select All' functionality into ion-select by adding a dedicated button

Having trouble with tabs in jQuery?

The navbar background spans the full width of the screen, with all content contained within minimum and maximum width parameters

Checkbox malfunctioning when trying to add values after being checked

Utilizing the Replace function just once