Is there a way to prevent navbar links from wrapping when closed with CSS?

Upon closing my side navbar, I encountered an issue where the links warp to the size of the navbar. I am seeking a solution to keep the links (highlighted in pink in the image below) the same size without warping. Is there a CSS technique to achieve this? Thank you for any assistance!

Feel free to check out my codepen: https://codepen.io/toshvelaga/pen/OJymXxO

Below is the CSS styling for the navbar and its links:

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 1.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  font-size: 25px;
  color: #818181;
  display: block;
  text-decoration: none;
  margin-left: 1rem;
}

Here is the JavaScript responsible for adjusting the navbar width:

function openNav() {
  document.getElementById("mySidenav").style.width = "350px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

Check out the image below for reference:

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

htmlcssnavbar

Answer №1

After receiving advice from Andy, I realized that the best approach is simply using white-space: nowrap; instead of adjusting the width with JavaScript. I initially thought resizing the width dynamically would cause issues, but I was mistaken. I recommend changing it to that method instead. :)

To enhance your .side-bar, just include min-width: 300px; in your CSS

You can view the working codepen example here. :)

Check out the codepen

Answer №2

To ensure the links maintain their size when the side navigation closes, it is best to apply the CSS property white-space: nowrap to the links. This method is recommended as it eliminates the need for hardcoded values, such as 300px.

.sidenav a {
  white-space: nowrap;
}

View Demo

function openNav() {
  document.getElementById("mySidenav").style.width = "350px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}
body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 1.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  font-size: 25px;
  color: #818181;
  display: block;
  text-decoration: none;
  margin-left: 1rem;
  white-space: nowrap;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 120px;
  }
  .sidenav a {
    font-size: 18px;
  }
}
<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About the Site</a>
  <a href="#">Service Terms</a>
  <a href="#">All Our Clients</a>
  <a href="#">Contact Us for More Information</a>
</div>

<h2>How do I make the sidenav links not decrease in size when the sidenav closes?</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

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

Using an SVG filter to create a solid blue color overlay on an image

For a while now, I've been applying -webkit-filter: grayscale(100%); to render an image in grayscale. But recently, I've been wondering if it's possible to tint the image blue instead. My initial thought was to utilize an SVG filter and refe ...

csssvgfilter

Changing the text color of the Vuetify Table header is a simple way to customize the

I am currently working on a Vuetify table with the class condition-table. I have applied the following CSS styling: .condition-table { background-color: #e1f5fe70; } The styling seems to work fine so far. However, when I added this additional CSS: .co ...

cssvue.jsvuejs2vue-componentvuetify.js

Achieving uniform cell height distribution in Foundation XY-grid using flexbox

When utilizing the Foundation XY-grid, I encountered an issue with distributing cell heights evenly within a nested grid-y inside a cell using the .auto class on the parent cell. In a scenario with 2 cells in a grid-y, the desired outcome is 50%/50%. This ...

htmlcssflexboxzurb-foundation

Here's a unique rewrite: "Learn how to manipulate the CSS class of a textarea element (specifically in NicEdit) by utilizing the addClass

I am currently validating a textarea using the NicEdit plugin. var getContent = nicEditors.findEditor("SubSliderDescription").getContent(); bValid = bValid && checkBlankTextArea(getContent, "SubSliderDescription") function checkBlankTextArea(o, ...

javascriptjqueryhtmlcssnicedit

CSS - Tips for affixing footer to the bottom of a webpage

Currently, I am working on a small personal project to brush up my HTML & CSS skills, and I am encountering some difficulties in fixing the footer of my website to the bottom of the page. You can view the site here. I have researched online and discovered ...

htmlcssfooter

Angular JS is encountering an issue where the promise object is failing to render correctly

I'm currently learning Angular and I have a question about fetching custom errors from a promise object in Angular JS. I can't seem to display the custom error message on my HTML page. What am I missing? Below is my HTML file - <!DOCTYPE htm ...

javascripthtmlangularjspromise

What is the correct way to iterate through a list of images fetched with getStaticProps and display them within the same component?

What is the proper way to map a list of images returned using getStaticProps? I had successfully implemented this by passing a prop to the gallery component in another page. However, I now want to consolidate all the getStaticProps code within the gallery ...

javascripthtmlreactjsnext.js

How can I adjust two overlapping divs for proper display?

It seems like I have two divs overlapping on the same line. The layout appears fine on a PC but not on an iPad or mobile device. Can someone please review the code and point out any mistakes I might have made? The issue is with the content overlapping the ...

htmlcssipadmobileoverlap

What is the best way to position the left sidebar on top of the other components and shift them to the

Currently, I am working on a project to display NBA data fetched from an API. I am aiming to recreate the design showcased here: Dribbble Design My main challenge lies in overlaying the left sidebar onto the main box and shifting the components sligh ...

javascriptcssreactjs

What could be causing my jQuery dialogs to lose their draggable functionality?

I've been struggling with making a dialog in jQuery draggable even though I've included 'draggable: true'. Can anyone help me figure out what's causing the issue? Here is the HTML code snippet: <div class="lessonDetails"> ...

phpjqueryhtmldialogdraggable

Ensure the left and right screen widgets remain fixed in their positions as the user scrolls down the page using the spacebar

Currently, I have a webpage that showcases products with a large height attribute. I am looking for a way to make the page scroll down when the user hits the space bar to view more products. However, I want my screen widgets such as the shopping cart and ...

javascriptcsspositioning

What is the best way to include CSS in a CodeIgniter project?

I am facing an issue with loading a CSS file in Codeigniter. It seems like there might be something wrong with my code. Can someone help me understand how to properly load a CSS file in Codeigniter and possibly identify any errors in my current code? < ...

phphtmlcsscodeigniter

Compel the system to handle the file as if it were an

I am currently showcasing programming files on a website in plain, raw text format. I have now decided to implement syntax highlighting using HTML. While it has enhanced the appearance and functionality of the files, there is one issue - I need to create a ...

html

javascript function not being invoked

Currently, I have incorporated the following HTML <html> <head> <Title>EBAY Search</title> </head> <script language="JavaScript" src="ajaxlib.js"></script> <body> Click here & ...

javascripthtmlajax

Issue with EaselJS: mouse events are no longer functional

I'm currently working on adding a touch animation using the EaselJs library. Interestingly, when I load an image from a local folder, all mouse events work as expected, such as onPress. However, things take a different turn when I opt to use an imag ...

javascripthtmlmouseeventeaseljs

Avoid choosing the menuItem when clicking on the icon within the Material UI select component

I am trying to create a dropdown menu that allows users to delete items. However, when I click on the delete icon within a menu item, the entire menu item gets selected automatically. How can I prevent this default behavior? Here is my code: { dropd ...

javascripthtmlcssreactjsmaterial-ui

Is your PHP random advertisement feature malfunctioning?

<div id="bannerAd"> <?php //THIS SCRIPT RANDOMLY SELECTS AN AD. $randomAd = rand(1,3); switch($randomAd) { case "1": $adLink = "/sale.php"; $imageFile = "/images/saleAd.png"; ...

phphtml

Do not apply styling to a particular page in CSS and HTML

Utilize the teachable.com platform and take advantage of their code Snippets feature (refer to attached photo #1) https://i.stack.imgur.com/dW1lB.png I inserted the following code: div { direction: rtl; } To modify the website's direction to be ...

htmlcss

Skip ahead button for fast forwarding html5 video

One of the features in my video player is a skip button that allows users to jump to the end of the video. Below is the HTML code for the video player: <video id="video1" style="height: 100%" class="video-js vjs-default-skin" controls muted autoplay=" ...

javascriptjqueryhtml

Encountered an unexpected "<" error while using Ajax with MySQL

I am trying to accomplish a simple task - retrieve a table from a MySQL database. Previously, I was using basic MySQL code and it was working fine. However, after switching to MySQLi, I encountered an error: Uncaught SyntaxError: Unexpected token < ...

phphtmlmysqlajaxmysqli