Difficulty with navigation bar resizing correctly

I'm having trouble aligning the links in my navigation bar to display 4 links evenly on each line when the screen size is reduced.

Here's how it looks at full width:

Full Width

However, when I shrink the window, each link gets pushed down individually, resulting in a messy layout (see image below).

Smaller size

Below is the code snippet:

nav {
  background-color: #d6d6d6;
}

nav ul {
  margin: 0 0 2% 0;
  padding: 10px;
}

nav ul li {
  display: inline;
  margin: 0;
  width: 25%;
}

nav ul li a {
  text-decoration: none;
}

nav ul li a:not(:last-child) {
  border-right: 1px solid #919191;
  padding: 0 10px 0 10px;
}
<nav>
  <ul>
    <li>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Sample link 1</a>
      <a href="#">Sample link 2</a>
      <a href="#">Sample link 3</a>
      <a href="#">Sample link 4</a>
      <a href="#">Portfolio</a>
      <a href="#">Contact</a>
    </li>
  </ul>
</nav>

htmlcssnav

Answer №1

Check out this solution using flexbox and @media queries. It's worth noting that there may be a more optimal approach as your menu expands with additional links, and once the screen width decreases below tablet size (~768px), you might want to consider implementing a hamburger style menu until it reaches desktop size (~992px).

* {
  box-sizing: border-box;
}

nav {
  background-color: #d6d6d6;
}

nav ul {
  margin: 0 0 2% 0;
  padding: 10px;
}

nav ul li {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

nav ul li a {
  text-decoration: none;
  display: inline-flex;
  flex: 1 1 25%;
  position: relative;
  padding: 0 10px;
}

nav ul li a:not(:nth-child(4n+4))::after {
  content: '';
  height: 100%;
  width: 1px;
  background-color: black;
  position: absolute;
  top: 0;
  right: 0;
  display: block;
}

@media ( min-width: 768px) {
  nav ul li {
    flex-wrap: nowrap;
  }
  nav ul li a {
    flex: 0 0 auto;
  }
  nav ul li a:not(:last-child)::after {
    content: '';
    height: 100%;
    width: 1px;
    background-color: black;
    position: absolute;
    top: 0;
    right: 0;
    display: block;
  }
}
<nav>
  <ul>
    <li>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Sample link 1</a>
      <a href="#">Sample link 2</a>
      <a href="#">Sample link 3</a>
      <a href="#">Sample link 4</a>
      <a href="#">Portfolio</a>
      <a href="#">Contact</a>
    </li>
  </ul>
</nav>

You can experiment with this code on this fiddle. https://jsfiddle.net/em71nvo0/

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

Is there a way to adjust the transparency of an image without affecting any overlaid text while using Bootstrap's carousel feature?

I am currently working with Bootstrap v4 to build a carousel featuring an image with caption text. My goal is to have the image faded while leaving the text unaffected. Despite trying several non-Bootstrap solutions, I have been unsuccessful in achieving t ...

jqueryhtmlcsstwitter-bootstrapcarousel

Is there a way for me to adjust the image dimensions so that it doesn't surpass the width of its parent container?

When working with images, it can be tricky to set the original width while also ensuring it fits within a parent container. For example, if the parent container has a width of 1000px, you may want the image to have a max-width of 100%, but not exceed 1000p ...

javascriptcssimage

Troubleshooting problem with Bootstrap inline formatting

Currently, the elements in the card are displayed inline, which is working fine. However, I am attempting to align this div <div class="d-inline-flex align-top"> inline with the image, but not with each other. I have tried removing the d-inline clas ...

cssbootstrap-4

What is the best way to incorporate a smooth transition for an object as it appears on the screen in React?

After configuring my code to display a component in the HTML only if a specific hook is set to true, I encountered an issue with a CSS transition. The problem arises because the 'open' class is triggered at the same time the element becomes true, ...

javascripthtmlcssreactjs

What is the best way to showcase a full-screen overlay directly inside an iFrame?

As I work in HTML, I'm faced with a challenge - my iFrame is only taking up a small section of the screen (referred to as 'World' in the example below). What I want to achieve is creating a full-screen div overlay from that iFrame, but curr ...

htmlcssoverlay

What is the proper way to define an element's style property in strict mode?

Assuming: const body = document.getElementsByTagName('body')[0]; const iframe = document.createElement('iframe'); iframe.src = protocol + settings.scriptUrl + a; iframe.height = 1; iframe.width = 1; iframe.scrolling = 'no'; ...

javascriptcss

css The max-width property appears to be malfunctioning

My parent element has a width of 100px and a position of relative. Inside it, there is an inner element with a position of absolute. I want this inner element to stretch out up to 200px, but for some reason, it's not working. The maximum value it take ...

htmlcss

Auto-suggest dropdown menu with pre-populated options

I am looking to implement a feature where users can click on an icon and a dropdown menu will appear, allowing them to search through data. To better illustrate this concept, here is an image: Users will be able to input their quiz names in the first sect ...

javascriptjqueryhtmldrop-down-menujquery-select2

Using jQuery to trigger a Bootstrap modal when a button is clicked

I've been attempting a simple task, but it appears to be unsuccessful. I'm trying to handle the click event of a button inside a bootstrap modal, and so far, nothing happens when clicking the button. My guess is that my jQuery selector for select ...

jqueryhtmlcsstwitter-bootstrap

The functionality of the AJAX Script is failing to load properly on mobile devices

Currently, I am undertaking a project that involves ESP32 Arduino programming to create a webpage where users can interact with buttons to activate relays. Additionally, I have implemented a slider using a short script. This project is inspired by the ESP3 ...

javascripthtmlajaxmobilebrowser

Please replicate an element based on user input using Javascript

When I click on the ADD button, the text appears below but in the same column. There are 2 input fields. I have used: <input id="accordion_input" type="text"/> Another one is: <div id="accordion_body" class="panel-body"></div&g ...

javascriptjqueryhtmlcss

Utilize Ajax, jQuery, and HTML select elements to showcase customized information

Hey everyone, I could really use some assistance with this. What I'm trying to accomplish is selecting data from a database using the onchange() function in Ajax and then returning the result to the client. I have successfully used Ajax to send inform ...

phpjqueryhtmlajax

When an item in the accordion is clicked, the modal's left side scroll bar automatically scrolls to the top. Is there a solution to prevent this behavior and

When I first load the page and click on the Sales accordion, then proceed to click on Total reported and forecasted sales, the scrollbar jumps back up to the top The marked ng-container is specifically for the UI of Total reported and forecasted sales He ...

javascripthtmlcssangularangular-material

Identifying Flash content in a unique way

In my dynamic page (let's call it myFlashContainer.jsp), the Flash content changes based on the link that is clicked. The code responsible for rendering the Flash looks like this: <object height="100%" align="l" width="100%" id="player" codebase= ...

javascripthtmljspflash

Get the Label Values Based on CheckBox Status

Is there a way to retrieve the values of labels corresponding to checkboxes in HTML? I have multiple labels and checkboxes next to each other, and I want to be able to get the label values if the checkbox is checked. Can you provide guidance on how to do ...

javascripthtml

Browser Bing Parser

After successfully creating a web parser for Google search results, I decided to implement a similar parser for Bing. However, I encountered an error that I couldn't resolve. Below is the code snippet that caused the issue: var rows = htmlDoc.Documen ...

c#htmlasp.netasp.net-mvcparsing

Trouble with top attribute functionality within animate function

Why does the top attribute in the animate function of JQuery not seem to work, while the opacity attribute functions correctly in the code snippet below? $(function() { $(window).on('scroll', function() { ...

javascriptjqueryhtmlcss

The appearance of the website varies on the localhost compared to what is depicted

My website appears differently on the web URL than it does on localhost. It displays perfectly on localhost, but when I run it on the actual URL, it is shifted upwards and the carousel overlaps the navigation panel. I have tried numerous solutions but noth ...

htmlcss

Unexpected Mouseover/Mouseenter event triggered beyond the boundaries of the target element

Is there a simple way in jQuery to activate a mouseover/mouseleave event on an element with an additional 20px border on both sides? For example, I have some next/previous buttons that are displayed outside of the website container using #slider .prev{po ...

javascriptjqueryhtmlcss

I am looking to verify a time input using Joi

I have created a form with date and time input fields. I utilized the joi library for input validation to ensure that the date and time inputs are not left empty separately. Although I have managed to apply date validation successfully, I am facing challen ...

htmlnode.jsjoi