Why must the sidebar be displayed horizontally on the smartphone screen?

I've been struggling to make the sidebar menu on my smartphone display horizontally with icons at the top and text at the bottom. I've tried using flex and other methods, but it still doesn't work sideways. Am I missing something?

const sidebar = document.getElementById('sidebar');
const navbarToggle = document.querySelector('.navbar-toggler');

navbarToggle.addEventListener('click', () => {
  if (window.innerWidth <= 767) {
    sidebar.classList.toggle('show');
  }
});
body {
  padding-top: 70px; /* Adjusted padding top */
}

@media (max-width: 767px) {
  body {
    padding-top: 56px;
  }

  #sidebar {
    display: flex;
    flex-direction: column;
    background-color: #343a40;
    color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #sidebar .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.8rem;
    text-align: center;
    padding: 0.5rem 0;
    width: 100%;
  }

  #sidebar .nav-link i {
    font-size: 1.2rem; /* Adjust icon size */
    margin-bottom: 0.2rem;
  }

  #sidebar .nav-link.active {
    font-weight: bold;
  }
}

@media (max-width: 767px) and (min-width: 576px) {
  #sidebar .nav-link i {
    font-size: 1rem;
  }
}

@media (min-width: 768px) {
  #sidebar {
    display: block;
    position: sticky;
    top: 0;
  }

}

#sidebar .nav-link span {
  display: block;
}

#sidebar .nav-link i {
  margin-bottom: 0.25rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0 >
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<ahref="/cdn-cgi/l/email-protection"class="__cf_email__"data-cfemail="7c1e1313080f080e1d0c3c49524e524c">[email protected]</a>/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <link rel="stylesheet" href="styles.css">
  <title>Complex Navbar and Sidebar</title>
</head>

...
(I omitted the rest of the code for brevity)
...

  <script src="https://cdn.jsdelivr.net/npm/<ahref="/cdn-cgi/l/email-protection"class="__cf_email__" data-cfemail="89ebe6e6fdfafdfbe8f9c9bca7bba7b9">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

I would appreciate any help or explanation as to why the sidebar layout isn't changing accordingly.

I'm looking to adjust the sidebar to display vertically on a PC or tablet screen, and horizontally at the bottom of the screen with icons above the text when viewed on a smartphone. Thank you!

javascripthtmlcssbootstrap-5

Answer №1

To customize the layout of .flex-column, you can override its flex-direction property (which has an !important declaration) like this:

const sidebar = document.getElementById('sidebar');
const navbarToggle = document.querySelector('.navbar-toggler');

navbarToggle.addEventListener('click', () => {
  if (window.innerWidth <= 767) {
    sidebar.classList.toggle('show');
  }
});
body {
  padding-top: 70px;
  /* Adjusted padding top */
}

@media (max-width: 767px) {
  body {
    padding-top: 56px;
  }
  #sidebar {
    display: flex;
    flex-direction: column;
    background-color: #343a40;
    color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #sidebar .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.8rem;
    text-align: center;
    padding: 0.5rem 0;
    width: 100%;
  }
  #sidebar .nav-link i {
    font-size: 1.2rem;
    /* Adjust icon size */
    margin-bottom: 0.2rem;
  }
  #sidebar .nav-link.active {
    font-weight: bold;
  }
  /* Override here: */
  #sidebar .flex-column {
    flex-direction: initial !important;
  }
  .nav-item {
    padding: 10px;
  }
}
<!-- Remaining code blocks remain unchanged -->

Answer №2

If you're using Bootstrap, a bit of Javascript can help you switch the menu's class from flex-column to flex-row, especially for mobile view. A script to detect the viewport width and update the class accordingly is all you need.

In this example, I've added an ID id="menu" to target the menu and included a script. Try resizing the page on a full screen to see the layout change dynamically. Now, the next step is to style your menu for a horizontal view.

const sidebar = document.getElementById('sidebar');
const navbarToggle = document.querySelector('.navbar-toggler');

navbarToggle.addEventListener('click', () => {
  if (window.innerWidth <= 767) {
    sidebar.classList.toggle('show');
  }
});

let menu = document.getElementById("menu");

addEventListener("resize", (event) => {
  if (window.innerWidth <= 500 ) {
    menu.classList.remove("flex-column");
    menu.classList.add("flex-row");
  }
  else {
    menu.classList.remove("flex-row");
    menu.classList.add("flex-column");
  }
});
body {
  padding-top: 70px; /* Adjusted padding top */
}

@media (max-width: 767px) {
  body {
    padding-top: 56px;
  }

  #sidebar {
    display: flex;
    flex-direction: column;
    background-color: #343a40;
    color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

 // Rest of the CSS rules...

}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <link rel="stylesheet" href="styles.css">
  <title>Complex Navbar and Sidebar</title>
</head>

// More HTML code...

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

Having difficulty specifying numerical entries only

I have been attempting to create an input field that only accepts numbers, but for some reason it still allows letters to be entered. Why is this happening? <input type="number" pattern="[0-9]" ...

javascriptangularjshtml

Not all comparisons between two tables are guaranteed to be successful

Looking to compare records within two arrays and apply a style if they are equal. Here is my approach: var json = ["VIP Section","Master Section","Press Section","God Section"]; var sections = ["VIP Section","Master Section"]; if ( sections.length &g ...

javascriptjqueryarraysjson

Using Flask to pass variable data from one route to another in Python using the `url

I am facing an issue with sending a variable value to Python from Flask HTML/JS via url_for(). Here's my Python code: @app.route('/video_feed/<device>') def video_feed(device): # return the response generated along with the speci ...

javascriptflaskjinja2

Tips for saving a value within a jQuery function for future use in a different function

I have a situation where I receive a value from a jQuery function that I need to pass to another function. How can I achieve this? jQuery.getJSON(url+"&startDate="+startDate+"&endDate="+endDate+"&jobId="+jobId+"&type="+type, function(data) ...

javascriptjquery

Is it possible to generate unique identifiers for v-for keys using vue-uuid?

I'm attempting to utilize a random string (UUID v4) using vue-uuid for existing items and future additions to the list in my to-do list style application. However, I'm uncertain about the correct syntax to use. After installation, I included it ...

javascriptvue.js

Is there a way to clear a @font-face downloaded font from the browser cache?

Recently, I realized that I made an error in my webapp release by using a limited version of "Droid Sans" with @font-face for Latin characters. The font files are hosted on my server. To rectify this issue, I have now updated the font to the full version s ...

cssfont-face

How to center align a <p> element along with a <select> element

Having some trouble while redesigning a simple survey page. I want to center-align the p tag with the select tag without using display:flex inside the .combobox class. The goal is to have them on the same line and still be centered. The current layout loo ...

htmlcss

The ajax function is malfunctioning when called from an external JavaScript file

I am having an issue with a Registration page that only has UserName and Password fields. When I click on the Submit button, I want to be able to submit the new User Details using an ajax call with jQuery. I have tried defining an Insert function on butt ...

javascriptc#jqueryasp.netajax

Trouble accessing Strapi CMS data on Next.js frontend using React.js

Currently, I am in the process of developing a website using Strapi as the CMS and Next.js(React) for the Frontend. The website features an image slider that includes an image, a headline, and a description. I am trying to retrieve these elements from my S ...

javascriptreactjsnext.jscontent-management-systemstrapi

Testing with Phantom/Casper in a browser-based environment

Currently, I am utilizing Casper for UI testing on websites. My main concern is regarding the compatibility testing in various browsers such as IE, Chrome, and Firefox using Casper. If this cannot be achieved with Casper, I am open to alternative methods ...

javascriptnode.jstestingphantomjscasperjs

Looking to combine cells within a table using the Exceljs library

Encountered an issue while generating a worksheet in the EXCELJS library. function save_export(){ var workbook = new ExcelJS.Workbook(); var worksheet = workbook.addWorksheet('sheet', { pageSetup:{paperSize: 9, orientation:' ...

javascriptjqueryexceljs

When running a callback function, the "this" of an Angular 2 component becomes undefined

One issue I'm facing is with a component that fetches data from a RESTful endpoint using a service, which requires a callback function to be executed after fetching the data. The problem arises when attempting to use the callback function to append t ...

javascriptarraystypescriptangular

Using node.js for synchronous callbacks in node.js programming

I am new to node.js, and from what I've gathered, each callback creates a new event that can be executed in parallel. For instance, consider the following code with a callback: function testFunction(var1){ s3.head(var1, function(data, err){ ...

javascriptnode.js

After an ajax request, the Jquery hover effects are no longer functional

On my website, I have implemented ajax calls to filter product results and apply effects. However, the effects on these products seem to stop working after the ajax call is completed. Located at the bottom of the page's code is the following script: ...

javascriptjqueryajax

Accessing a form control's class in code behind using asp.net

<form id="form1" runat="server" role="form" class="form-horizontal"> Is there a way to modify the class of a control in the code behind? I want to update its value. Appreciate any help! ...

c#htmlasp.net

How to Use $scope within a Function in AngularJS

When a page is loaded, I run the following function: $scope.showTags = function(Id) { $scope.toggleSelectedBlocks = function selectB(block) { // There is a checkbox to be selected... } $scope.greetUser() { console.log("GREETIN ...

javascriptangularjsscope

How can I clear the div styling once the onDismiss handler has been triggered

Seeking assistance with resetting a div on a Modal after it has been closed. The issue I am facing with my pop-up is that the div retains the previous styling of display: none instead of reverting to display: flex. I have searched for a solution without su ...

javascriptreactjstypescriptpopup

image rollovers for responsive pictures utilizing the picture element and srcset

Trying to find a way to implement an image rollover effect on the picture element within a responsive website. The big question is, can we apply an image rollover to the scrset attribute in the picture tag? An example of an img tag with a JavaScript roll ...

javascriptimagerollovers

Setting an HTML element ID on a material-ui component: A step-by-step guide

I have a website that was created using Gatsby.js and incorporates the Material-UI framework. The specific issue at hand is as follows: I am looking to implement Google Tag Manager "Element Visibility" triggers. The goal is for GTM to trigger a Google Ana ...

javascriptreactjsmaterial-ui

How to display an [object HTMLElement] using Angular

Imagine you have a dynamically created variable in HTML and you want to print it out with the new HTML syntax. However, you are unsure of how to do so. If you tried printing the variable directly in the HTML, it would simply display as text. This is the ...

javascripthtmlangulartypescriptcomponents