Switching the CSS effect between mobile and desktop layouts to create a responsive design

In the current scenario, the menu is expanded in desktop view and hidden in mobile view.

My query is how can we achieve the following:

  • For mobile view: do not hide, expand the menu
  • For desktop view: hide the menu

$('#nav-toggle').click(function() {
  $('nav').toggleClass("active");
});
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  font-family: sans-serif;
  font-size: 100%;
}
#top-bar {
  position: relative;
  max-width: 1000px;
  height: 85px;
  background-color: #22bbff;
  margin-left: auto;
  margin-right: auto;
}
#nav-toggle {
  float: right;
  display: block;
  border-left: 1px solid #fff;
}
nav {
  float: right;
}
.active ul {
  display: block;
}
ul {
  position: absolute;
  display: none;
  top: 60px;
  right: 0;
  width: 150px;
  list-style-type: none;
  background-color: #22bbff;
  border: 1px solid #fff;
  text-align: center;
}
li {
  display: block;
}
a {
  display: block;
  padding-top: 21px;
  padding-right: 40px;
  padding-left: 40px;
  padding-bottom: 21px;
  color: #fff;
  text-decoration: none;
  background-color: #294C52;
  border: 1px solid #fff;
}
a:hover {
  background-color: #1BBC9B;
  border: 1px solid #fff;
}
@media screen and (min-width: 767px) {
  nav {
    position: relative;
    float: right;
    right: 50%;
  }
  #nav-toggle {
    display: none;
  }
  ul {
    position: relative;
    float: right;
    display: block;
    top: 0;
    right: -50%;
    width: auto;
    height: 60px;
    list-style-type: none;
    border: none;
  }
  li {
    float: left;
    display: block;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<div id="top-bar">
  <a href="#" id="nav-toggle">M</a>
  <nav>
    <ul>
      <li><a href="#">Link 1</a>
      </li>
      <li>
        <a href="#">Link 2 <i></i></a>

      </li>
      <li><a href="#">Link 3</a>
      </li>

    </ul>
  </nav>
</div>

javascriptjqueryhtmlcss

Answer №1

If you want to create a different display for your website — a compact menu on desktop browsers and a full menu on mobile devices — simply adjust your @media query like so:

@media screen and (max-width: 767px) {

Example. Please note that this may cause the menu layout to appear distorted on extremely narrow viewports.

Answer №2

If you're looking to switch up your desktop views by reversing the CSS styles along with targeted media queries, take a cue from the example below where I've implemented it using your original CSS.

To refine your dropdown menu for desktop view—since the current display might not be what you prefer despite the correct functionality—you'll need to incorporate additional CSS classes. For guidance on this, simply refer to your browser console.

$('#nav-toggle').click(function() {
  $('nav').toggleClass("active");
});
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  font-family: sans-serif;
  font-size: 100%;
}
#top-bar {
  position: relative;
  max-width: 1000px;
  height: 85px;
  background-color: #22bbff;
  margin-left: auto;
  margin-right: auto;
}
nav {
  position: relative;
  float: right;
  right: 50%;
}
#nav-toggle {
  display: none;
}
ul {
  position: relative;
  float: right;
  display: block;
  top: 0;
  right: -50%;
  width: auto;
  height: 60px;
  list-style-type: none;
  border: none;
}
li {
  float: left;
  display: block;
}
a {
  display: block;
  padding-top: 21px;
  padding-right: 40px;
  padding-left: 40px;
  padding-bottom: 21px;
  color: #fff;
  text-decoration: none;
  background-color: #294C52;
  border: 1px solid #fff;
}
a:hover {
  background-color: #1BBC9B;
  border: 1px solid #fff;
}
@media screen and (min-width: 767px) {
  #nav-toggle {
    float: right;
    display: block;
    border-left: 1px solid #fff;
  }
  nav {
    float: right;
  }
  .active ul {
    display: block;
  }
  ul {
    position: absolute;
    display: none;
    top: 60px;
    right: 0;
    width: 150px;
    list-style-type: none;
    background-color: #22bbff;
    border: 1px solid #fff;
    text-align: center;
  }
  li {
    display: block;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<div id="top-bar">
  <a href="#" id="nav-toggle">M</a>
  <nav>
    <ul>
      <li><a href="#">Link 1</a>
      </li>
      <li>
        <a href="#">Link 2 <i></i></a>

      </li>
      <li><a href="#">Link 3</a>
      </li>

    </ul>
  </nav>
</div>

Answer №3

Firstly, include the following code:

  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

If you want to make your content responsive, consider using it within a container like this:

   <body>

<div class="container">
      <h2>Table</h2>
      <p>The .table-responsive class creates a table that scrolls horizontally on smaller devices (less than 768px). It remains static on larger screens:</p>                                                                                      
      <div class="table-responsive">          
      <table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>Firstname</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Anna</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Debbie</td>
          </tr>
          <tr>
            <td>3</td>
            <td>John</td>
          </tr>
        </tbody>
      </table>
      </div>
    </div>

    </body>

If you place a class or another container outside of the "table-responsive" container, it will no longer maintain its responsiveness.

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

What is the best way to smoothly transition between three images, each appearing in a randomized position and size?

Looking to add a dynamic div that fades in and out randomly with varying sizes and positions? You may have already tried displaying three images with fade-in and fade-out effects, but struggled with randomizing their placement and size. Check out this ex ...

javascriptjqueryhtmlcssrandom

Utilizing the map() method for iterating through a nested property within a React component

Currently, my React setup involves rendering a prop named area which has the following structure: [{ "id": 1, "name": "Europe", "Countries": [{ "id": 1, "name": "Iceland", "Cities": [{ "id": 1, " ...

javascriptobjectreactjstraversal

When using Material UI, it is not possible to apply the text-overflow: ellipsis and overflow: hidden properties to multiple

I am new to material UI and here is the current state of my website: view reality of current website This is what I am expecting it to be: what I envision it becoming From the images above, you can see that I want the text inside the circle to be shorten ...

javascriptnode.jsmaterial-uifrontendcodesandbox

Utilizing Regular Expressions in Express.js Routes

Is there a way to extract a specific value from my URL using Express? For example, my URL structure is as follows: host/:value.schema I need to retrieve the value from this URL. Here's an example: host/horse.schema (In this case, the value wo ...

javascriptregexnode.jsexpressroutes

Tips for crafting a successful form success message within a bootstrap modal

RESOLVED After a long struggle, I finally managed to solve the issue using AJAX. However, in order to make it work, I had to remove WordPress and plan on re-uploading it in a separate directory later. Thankfully, this workaround does not affect my index p ...

javascriptphpformstwitter-bootstrapbootstrap-modal

Unable to upload file into folder with PHP and angular.js

I am encountering an issue with saving a file to a local folder using Angular.js and PHP. Below is the code that I am working with: <div class="input-group bmargindiv1 col-md-12"> <span class="input-group-addon ndrftextwidth text-right" style ...

javascriptphpangularjs

Container Slides Along Despite Accurate Measurements

In a recent project of mine, I utilized two containers positioned side by side. Upon clicking a button, my goal was to have the content container (essentially a false body) decrease its width while the menu container would slide in. Despite my best effort ...

htmlcss

How to pass a single value using onClick event without relying on form submission

I prefer to pass a single value instead of multiple putPriority fetch calls. This value will not be inputted by the user directly, but rather passed through an onClick event. For example, I want the onClick to send a specific number to "status" in the fe ...

javascriptreactjs

Adding ngChange programmatically in Angular without using attributes is a common challenge faced

I am attempting to replicate the functionality of the ng-change attribute within a directive without making changes to the HTML (thus excluding the use of the ng-change property). After examining the Angular source code for the ngChange directive, I have ...

javascriptangularjsangularjs-directiveangular-ngmodelangularjs-ng-change

What is the reason for the .onclick function impacting all anchor links that share the same URL?

Whenever I click on a hyperlink with the id 1232c or 1233b in test.html, only the first alert (1232c) from the JavaScript code in test.js pops up. This is odd because I have specified different onclick functions for each anchor element based on their ids. ...

javascripthtml

PHP problem with submitting an array of checkboxes

Having an issue with checkbox array This is the code snippet <?php include('config.php'); if(isset($_POST['submit'])) { for($x = 0;$x <= 5;$x++) { if(isset($_POST['check'][$x])) { ...

phpjqueryarrayscheckbox

Error: The JavaScript engine Hermes is throwing a TypeError because it is unable to access the property 'navigate' which is undefined

Trying to set up react navigation has been a challenge, especially when attempting to move navigation items into their individual components. Below is a Stack Navigator within APP.js: import React from 'react'; import { StyleSheet, Text, View } ...

javascriptreactjsreact-native

Utilizing Bootstrap to position a navigation bar next to a floated element causes surrounding content to be pushed

I am facing an issue with my 2 column layout where the content in the right column is being pushed down to clear the left column, resulting in a lot of vertical white space between the navigation and the content. Below is the code snippet: <head> ...

csstwitter-bootstrap

Can the minimum length be automatically filled between two elements?

I'm struggling to find a way to adjust the spacing of the "auto filling in" dots to ensure a minimum length. Sometimes, on smaller screens, there are only one or two dots visible between items. Is there a way to set a minimum length for the dots in th ...

javascripthtmlcssspace

Using scale transformations to animate SVG group elements

I am currently experimenting with an SVG example where I hover over specific elements to expand or scale them. However, I seem to have made a mistake somewhere or missed something important. Can someone offer me assistance? View the demo on JSFiddle here ...

javascriptjqueryhtmlcsssvg

MongooseError: Attempting to execute a query that has already been completed: user.findOneAndUpdate(`

I've encountered an issue while following an online tutorial. The error I'm facing with the "PATCH" function (followUser) persists even after copying the instructor's code. The strange part is that it successfully updates in mongoDB despite ...

javascriptnode.jsmongodbexpressmongoose

Mastering the Art of Card Sizing in Bootstrap

I am having trouble resizing the cards deck. I have a total of 3 cards that I am trying to adjust to fit into a column size of col-3. However, despite using bootstrap 4.1x, it seems like my code is not working as intended. <link href="https://maxcdn. ...

htmlwebdesign-patternsbootstrap-4

What is the method for using the spread operator to add a property to an inner object in Typescript?

I have the following Object: let car = { year: 2004, type: {name: "BMW"} } Now, I am trying to add a property to the inner object "type". My aim is to achieve this using the spread operator as I require a new object due to the existing one being an immut ...

javascripttypescriptspread

Modify the CSS of the gauge element without causing any issues

I am facing an issue while trying to resize this gauge element. Whenever I attempt to modify the container class to make it smaller, the entire gauge ends up distorting. Changing the position to relative seems to cause glitches at the edge of the gauge. An ...

cssvuejs2

PHP Table Columns Explained

My PHP script is used to display a MySQL table, and I am aware that adding styling to it is possible. However, I have encountered an issue where the add button unexpectedly adds another column as shown in the image below: https://i.sstatic.net/qBKiG.png I ...

phphtmlmysqlcss