Adjust Side Navigation Bar based on window size alteration

I am currently working on implementing a side navigation bar for a website. At the moment, I am utilizing a <nav> element and populating it with <li> items to establish my sidebar.

My code snippet is as follows (note: in-line styling is temporary for testing purposes, I plan to use an external CSS file later on):

<body>

<nav style="background: #3f9edd; height: 1000px; min-width: 200px; position:fixed;">
    <li style="position: relative; display: block; background: #2ecc71; width: 100%; height: 10%; padding: 33px 25px;">Home Area</li>
    <li style="position: relative; display: block; background: #2b87c3; width: 100%; height: 5%; padding: 33px 25px; border-bottom: 1px solid;">item one</li>
    <li style="position: relative; display: block; background: #2b87c3; width: 100%; height: 5%; padding: 33px 25px; border-bottom: 1px solid;">item two</li>
    <li style="position: relative; display: block; background: #2b87c3; width: 100%; height: 5%; padding: 33px 25px; border-bottom: 1px solid;">item three</li>
    <li style="position: relative; display: block; background: #2b87c3; width: 100%; height: 5%; padding: 33px 25px; border-bottom: 1px solid;">item four</li>
    <li style="position: relative; display: block; background: #2b87c3; width: 100%; height: 5%; padding: 33px 25px; border-bottom: 1px solid;">item five</li>
</nav>

<div class="container" ng-controller="projectController">
</div>
</body>

The provided code generates the following output:

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

Current Challenge:

I am facing difficulty in adjusting the side navigation bar when the user resizes their window or accesses the site from devices like iPad or iPhone.

If the screen is full-size, it should display like this (which is already achieved):

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

However, if the screen size decreases below a certain threshold, the nav bar should automatically transform into:

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

I am uncertain about how to implement this functionality. Can someone please provide guidance on the right approach? Feel free to ask for more information if needed.

Appreciate your help in advance.

javascriptjqueryhtmlcssnav

Answer №1

Check out this simple example using pure css. You can customize it further by adding transitions to the breakpoint for a more polished look.

Visit this Codepen link to see it in action: http://codepen.io/noobskie/pen/XmeXEo?editors=110

HTML Structure:

<nav role='navigation'>
  <ul>
    <li><a href="#"><i class="fa fa-chrome"></i><span>Home</span></a></li>
    <li><a href="#"><i class="fa fa-chrome"></i><span>About</span></a></li>
    <li><a href="#"><i class="fa fa-chrome"></i><span>Clients</span></a></li>
    <li><a href="#"><i class="fa fa-chrome"></i><span>Contact Us</span></a></li>
  </ul>
</nav>

CSS Styling:

body{
  margin:0;
}
nav{
  background:#2F404F;
  height: 100vh;
  width:auto;
  position:fixed;
  ul{
    margin:0;
    padding:0;
  }
  li{
    position: relative; 
    display: block;
    padding:20px 10px;
    border-bottom:1px solid #000;
    a{
      color:#FFF;
      text-decoration:none;
      font-size:1.3em;
      i{
        padding:0 5px 0 0;
      }
    }
  }
}


@media only screen and (max-width: 768px) {
  span{
    display:none;
  }
}

Answer №2

Include two different spans within your li element.

<li style="position: relative; display: block; background: #2b87c3; width: 100%; height: 5%; padding: 33px 25px; border-bottom: 1px solid;"><span class="showLarge">Large viewport</span><span class="showTablet">Tablet viewport</span></li>

By default:

.showTablet {
    display: none;
}

For tablet viewports:

@media only screen and (max-width: 768px) {
    .showLarge {
        display: none;
    }
    .showTablet {
       display: block;
    }
}

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 requested API endpoint for retrieving the name could not be found on the Express

Struggling to configure the restful API for my express app. Below is my app.js code: var express = require('express'), app = express(), bodyParser = require('body-parser'), methodOverride = require('method-override'); rout ...

javascriptnode.jsexpress

Tips for correcting boolean checks and verification for undefined variables

Currently, I am working on a code where I need to verify the truthfulness of variables $scope.bankregel and $scope.showInvoices. Within my function, I'm already implementing a conditional check in the if and else if statements. How can I incorporate ...

jqueryangularjs

Having trouble fetching specific JSON data using ajax?

As a beginner, I am encountering an issue with my code. I am having trouble retrieving specific data from my JSON using AJAX and displaying it in my input text. When I try $("#gakubuText").val(data.gakubu); it doesn't work, but if I use $("#gakubuTex ...

jqueryjsonajax

Error: Unable to call dispatch method on this.$store object

I'm diving into Vue and hitting a wall with this error message. TypeError: this.$store.dipatch is not a function I've set up the store.js file and am attempting to call actions from within a vue file. I've scoured the internet for answers ...

javascriptvue.js

New to React: Arrow Function Example that Might Puzzle You

As a beginner in React/ES6, I came across this code snippet for handling a checkbox within a custom component that contains a material-ui CheckBox. My goal is to expand the custom component by adding more fields, such as a textbox where users can provide a ...

javascriptreactjsmaterial-uiarrow-functions

TSDX incorporates Rollup under the hood to bundle CSS Modules, even though they are not referenced

I have recently developed a React library with TSDX and you can find it here: https://github.com/deadcoder0904/react-typical This library utilizes CSS Modules and applies styles to the React components. Although the bundle successfully generates a CSS fi ...

javascriptcssreactjstypescriptrollupjs

Type property is necessary for all actions to be identified

My issue seems to be related to the error message "Actions must have a type property". It appears that the problem lies with my RegisterSuccess action, but after searching on SO, I discovered that it could be due to how I am invoking it. I've tried so ...

javascriptangulartypescriptngrx

The data in Node AngularJS is not loading upon the page's initial load

When I log in, I am redirected to a different page where a partial page is loaded using an AngularJS route. By clicking on any anchor tag, the respective partial view is displayed. However, I encountered an issue. Upon logging in, I use res.render(pagenam ...

javascriptnode.jsangularjsexpress

Retrieving the XML data from an uploaded file using PHP

How can I upload an XML file to my server and extract its content? Step 4: Writing each row from the XML file into a database. This is my current attempt: xml_import.php <?php if(isset($_POST["submit"])){ echo "Let's test"; $uploaddir ...

phpxmlhtml

Integrating and deleting class elements

My jQuery Credit Card Plugin has a feature where it switches out a class to show an image of the credit card that was entered. However, I am facing an issue with clearing the credit card information each time a new one is entered. Is there a way to clear ...

jquery

Enhance video playback by eliminating accidental scrolling through the space bar

When using a video player, I always prefer to pause it by pressing the spacebar. However, this function is not working as expected. The issue at hand is that instead of pausing the video, pressing the space bar causes the page to scroll down unexpectedly ...

javascripthtmlcssvideoscroll

CSS: Fixed item at the bottom of a container that scrolls horizontally

I am working on creating a sticky footer within a horizontally scrolling element. I want the sticky footer to be positioned at the bottom, adjust its height based on the content inside it, and match the width of the scrollable parent (in this case 200px). ...

htmlcssstickysticky-footer

HTML and CSS styled accordion with nested checkboxes: handling long items

I am currently working on creating a multi-level accordion for an aside navigation section on a webpage. However, I have encountered an issue where the background color extends too far when hovering over a specific element. This occurs on a folder-type ite ...

htmlcssnavigationaccordion

Unexpected token "," in jQuery UI autocomplete error

Using the autocomplete feature works perfectly on my PC. However, I encounter an error when trying to test it on a mobile device. Do I need to utilize jQuery mobile in order for jQuery to function properly on mobile devices? Error message on line 3 of th ...

javascriptjqueryjquery-mobileautocomplete

Why did the App Script debugging process succeed, only for execution to ultimately fail?

I've been working on importing csv files into specific Google Sheets using App scripts. Although my code seems to be functioning correctly, it's not producing any output. The approach I took was creating an array for the list of csv files and ano ...

javascriptarraysgoogle-apps-scriptgoogle-drive-apigoogle-apps-script-editor

Creating a custom event for every reference within a Vuejs for loop

I'm working with a loop of data and have a modal for each iteration <div ref="vuemodal-{{loop.index}}"> Each modal is a bootstrap modal, and I want to bind an event to them that triggers whenever the modal is closed mounted(){ Obj ...

javascriptvue.jsbootstrap-4

Retrieving over 300,000 rows from elasticsearch and saving them as a .csv document

Hi there, I am currently working on a website in nodejs that utilizes an Elasticsearch database. One of my indexes, 'bigData*', contains 366,844 rows with each row consisting of 25 items, each being a different string of varying sizes (with a max ...

javascriptdatabaseelasticsearchnpm

Styling a dynamically-injected div using an AJAX request (xhrGet)

Hello everyone, currently I am using the code below to fetch updated content after receiving a "push" event from a server. The new content is then used to replace the existing div/content. However, I'm facing an issue where none of my styles from the ...

javascripthtmlcssajaxdojo

Encountered a Uncaught TypeError: Attempted to clear a canvas when the property 'getContext' is undefined or null

After researching multiple error solutions, none seemed to work for me. It became frustrating, leading me to consider spamming just to bypass the word limit and share my own findings with others facing similar issues. Check out the Answers section below to ...

javascripthtml

I am attempting to send a variable from my Google Script to HtmlOutputFromFile in a seamless manner

I am currently working on developing an input box with a dropdown list, where the options are generated from a 2D array retrieved from a Spreadsheet. My investigation has revealed that by storing HtmlService.createHtmlOutputFromFile in a variable, I can " ...

htmlgoogle-apps-script