Show the side panel in-line when the window is minimized

Looking to enhance the responsiveness of the side panel in my web application. Despite searching for solutions online, I have not found a satisfactory answer. Currently, my side panel displays stacked content in full desktop mode, which is ideal. However, when minimized, the content remains stacked on top of each other instead of changing to inline. Refer to the images below for a visual representation of the desired outcome.

Desktop Mode (desired layout): https://i.sstatic.net/gJJ5B.png

Undesired Stacked Layout When Minimized: https://i.sstatic.net/OiCxA.png

Desired Inline Layout When Minimized: https://i.sstatic.net/B6N7Y.png

htmlcss

Answer №1

Implement a media query to target the specific view where you want your element to display inline, and apply display:inline-block to the element.

Check out this JSFiddle example for reference.

Here's an illustration:

.stack_nav{
  padding:0;
  margin:0;
  list-style: none;
}
.stack_nav>li{
  padding: 10px;
  display:block;
}

@media (max-width: 767px){
  .stack_nav>li{
     display: inline-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

Struggles encountered when trying to fetch text using a custom xpath or css selector in firebug

Struggling to extract a specific text snippet from a webpage using Selenium. The code I'm dealing with on the page is as follows: <div id="BVRRRatingOverall_Review_Display" class="BVRRRating BVRRRatingNormal BVRRRatingOverall"> <div class="B ...

htmlxpathseleniumcss-selectors

Display the HTML code in its formatted text output

I am currently facing an issue while trying to take input from the user using the WYSIWYG text editor plugin. When I attempt to display the text in a label or paragraph, all the HTML tags become visible. For instance, @string str = "<b>sample text&l ...

html

Executing PHP code within the .html() jQuery function

Are you trying to update a link's text content dynamically using jQuery? <a id="btnExistReceiver" class="btn btn-app"> <i class="fa fa-user"></i> <?= __('Existing Receiver') ?> ...

phphtml

Is it possible to access and view the contents of a live website folder using WebMatrix2?

I am looking to make changes to a website using WebMatrix, but the site was originally built with ASP.net. When I try to open the site's folder, I encounter numerous errors. Can anyone advise me on whether it is possible to edit this website despite t ...

asp.nethtmlwebmatrix

Is there a way to eliminate the white border surrounding this input field? (JSFiddle link included)

http://jsfiddle.net/gn3LL/ .error { background-color: red; } <input id="firstname" class="custom error" name="first_name" type="text" placeholder="" class="input-xlarge"> I am trying to remove the small white border around the inside of the inpu ...

csstwitter-bootstrap

Loading custom fonts using @font-face will only happen as the last step

Within my project.less file, I have declared several fonts to load: @font-face { font-family: 'Myriad Set Pro'; src: url(/assets/fonts/Myriad-Apple-Text/myriad-set-pro_medium.woff) format('woff'); //font-style: normal; ...

javascripthtmlcssfonts

Express causing textarea in http form to have empty req.body

Here is a form for users to upload a file and submit text: form(action='/createpost' enctype="multipart/form-data" method='post' id="imgForm") input(type='file' name='imgPath' size = "60") br textarea(na ...

javascripthtmlhttpexpresspug

Discover the method for obtaining the data of a specific <div> element based on its ID through JavaScript in an Android WebView

Hello, I am new to web development so please bear with me if my question seems naive. I am currently working on a script using html, css, and js to display a text editor in a webView. The editor is being displayed without any issues, but now I'm facin ...

javascriptandroidhtmlcsswebview

"Angular File Upload Made Easy with Drag-and-Drop Functionality and Cleverly Positioned

Encountering an issue with Angular File upload in conjunction with relatively positioned elements. The drop target is set to 100% width and height, absolutely positioned. While dragging a file over any non-relatively positioned element, the overlay functio ...

javascripthtmlcssangularjsangular-file-upload

What is the best method for accessing a value in IndexedDB while utilizing service workers?

I am feeling overwhelmed by the concepts of IndexedDB and serviceworkers as I try to transform them into a functional application. Despite my extensive research, including studying various examples, I am struggling to integrate the two technologies effecti ...

javascripthtmlservice-workerindexeddb

When using angular's ngHide directive on a button, it will still occupy space in the

At the bottom of this HTML file, there are 3 buttons displayed. The first image illustrates the layout of the 3 buttons. The second image demonstrates what happens when the middle button in the footer is commented out. The third image shows the situat ...

htmlcssangularjs

Click Event for Basic CSS Dropdown Menu

My goal is to develop a straightforward feature where a dropdown menu appears below a specific text field once it is clicked. $(".val").children("div").on("click", function() { alert("CLICK"); }); .container { display: inline-block; } .val { d ...

javascriptjquerycss

Scrubbing the htaccess file for custom redirect rules in cPanel

I am looking to optimize my .htaccess file for the following purposes: Removing the .html extension Redirecting non-www URLs to www Forcing HTTP to HTTPS Changing .com/index.html to .com/ Implementing all redirects through cPanel's 'Redirects&a ...

html.htaccesshostingcpanel

Stretching the limits: Combining and expanding your Styled Components theme

I am facing a situation where I have a component library built using Styled Components that has its own theme settings which are not meant to be overridden. Now, I need to incorporate this component library into another project that also uses Style Compone ...

javascriptcssreactjsstyled-components

Ensure that the submission button also transmits an additional piece of information

My form has a submit button that sends field values to the address bar, but I want it to also add an extra value (&submitted=yes) when clicked. How can I modify my submit button from this: <input type="submit" name="submitted" value="submit"> ...

javascripthtml

The picture within the div is not appearing as expected

I am facing an issue with inserting an image in a div container using CSS and HTML. The image is not displaying properly. Here is the HTML code: <div id="wrapper"> <div id="quoteContainer"> <span class="start_img"></span> </di ...

cssimagehtml

Issues with CSS margins in IE causing bugs?

Currently dealing with a CSS issue that seems to be specific to Internet Explorer. I haven't encountered it in Firefox, Safari, or Opera during testing with IE 11. The problem: I've set the top margin of the website content/stage to around 2%, ...

cssinternet-explorermargin

Tips for changing images when hovering over them

Currently engaged in the development of an e-commerce application, where I am looking to accomplish a specific task... https://i.sstatic.net/sYoG8.png The objective is to display the corresponding large image on the big box when hovering over smaller ima ...

javascriptjqueryhtmlcssbootstrap-4

Developing a dynamic menu with media queries: Struggling to make the menu resize accordingly

I've been working on adjusting my menu for different screen resolutions using media queries. However, I'm facing some issues specifically between 1025 and 1441 pixels (or higher) where the font size is not changing as expected when I resize the b ...

cssresponsive-designmedia-queries

Returning draggable elements to their original placement

I'm looking to create a custom function that resets my draggable elements to their original positions when invoked. This is not related to the built-in revert functionality. $('.drag').draggable({ stack: ".drag", snap: ".dro ...

javascriptjqueryhtml