Displaying the navbar links in a stacked format on mobile devices

What is the best way to display links on mobile devices in a vertical layout, while keeping them horizontal on laptops and desktops? I have some knowledge of HTML, CSS, and JavaScript from learning on stackoverflow.

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<nav class="navbar navbar-default">
<div class="row">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar">.
 </span>
    <span class="icon-bar">
 </span>
    <span class="icon-bar">
 </span>
  </button>
  <a class="navbar-brand" href="index.html  "><img src="images/a1-logo.jpg"/></a>
</div>

 <!-- Collect the nav links, forms, and other content for toggling -->
 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav navbar-right">
    <li style="padding: 0px 0px 0px 0px; list-style-type: none; list-style-image: none; list-style-position: outside; font-family: &quot;verdana&quot;; font-size: 18px; color: black;"><font face="verdana" size="4"><a href="index.html">Home <span class="sr-only">(current)</span></a></li>
    </font><li style="padding: 0px 0px 0px 0px; list-style-type: none; list-style-image: none; list-style-position: outside; font-family: &quot;verdana&quot;; font-size: 18px; color: black;"><font face="verdana" size="4"><a href="about.html">About Us</a></li>
    </font><li style="padding: 0px 0px 0px 0px; list-style-type: none; list-style-image: none; list-style-position: outside; font-family: &quot;verdana&quot;; font-size: 18px; color: black;"><font face="verdana" size="4"><a href="services.html">Services</a></li>
    </font><li style="padding: 0px 0px 0px 0px; list-style-type: none; list-style-image: none; list-style-position: outside; font-family: &quot;verdana&quot;; font-size: 18px; color: black;"><font face="verdana" size="4"><a href="Homeopathy-2.html">Homeopathy</a></li>
    </font><li style="padding: 0px 0px 0px 0px; list-style-type: none; list-style-image: none; list-style-position: outside; font-family: &quot;verdana&quot;; font-size: 18px; color: black;"><font face="verdana" size="4"><a href="testimonial.html">Testimonials</a></li>
    </font><li style="padding: 0px 0px 0px 0px; list-style-type: none; list-style-image: none; list-style-position: outside; font-family: &quot;verdana&quot;; font-size: 18px; color: black;"><font face="verdana" size="4"><a href="biz.html">Biz Offers</a></li>
    </font><li style="padding: 0px 0px 0px 0px; list-style-type: none; list-style-image: none; list-style-position: outside; font-family: &quot;verdana&quot;; font-size: 18px; color: black;"><font face="verdana" size="4"><a href="contact.html">Contact Us</a></li>
  </ul>
  
  </div><<!-- /.navbar-collapse -->
  </div><<!-- /.container-fluid -->
</nav><<!-- /.nav -->
htmlcss

Answer №1

If you want your navigation bar list items to display in a column on mobile, you can use the following code. The align-items and justify-content properties will center the items both horizontally and vertically, but you can remove them if not needed. The media query @media will activate when the device width reaches 768px, which is typically the width of a standard tablet.

ul.nav {
  display: flex;
  // set direction of children to column based
  flex-direction: column;

  // if you wish to center items along X and Y axis
  align-items: center;
  justify-content: center;
}
@media screen and (min-width: 768px) {
  ul.nav {
    // change direction of children to row based
    flex-direction: row;
    
    // you can then unset align and justify if needed or used
    align-items: unset;
    justify-content: unset;
  }
}

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

Place label at a set position when the mouse hovers over it

I need help creating a simple hover effect on a circle using jQuery. I'm facing an issue where the label location of the city overlaps with the circle when the mouse hovers over it. The label should be fixed in position on top of the red circle. Even ...

htmljquerycsssvggeometry

``How can I lock the top row of an HTML table containing input fields in place while

Below is the table structure: <table> <tr> <th>row1</th> <th><input type="text"></th> <th><input type="text"></th> <th><input type="text"></th& ...

javascripthtmlcss

Struggling to close the dropdown with jquery

Check out this code snippet: https://jsfiddle.net/rajat_bansal/rtapaew5/1/ The jQuery section below is causing some trouble: $(document).ready(function(e) { $(".sub-handle").click(function() { if(!$(this).hasClass('showing-sub&ap ...

jqueryhtmlcssweb

Adjusting font size in CSS for HTML websites

Having some trouble adjusting the font size on my HTML webpage using CSS - for some reason, the "font-size" property isn't cooperating: Below is the snippet of HTML code for my site: And here's a brief look at the accompanying CSS code: I&apos ...

htmlcss

Using jQuery, target the specific elements that have certain data attributes assigned to them

Is there a way to target elements with a specific data attribute and a unique class using jQuery? For instance, I want to select these elements: <div data-roomid="55" data-status="NoData"></div> <div data-roomid="55" data-status="Open"> ...

javascriptjqueryhtmljquery-selectors

Implementing CSS transitions across several elements simultaneously can enhance the user experience

There seems to be an issue with animating two elements simultaneously using max-height. The transition always occurs one after the other, with one element completing its transition before the other starts. setTimeout(function () { $(".b").css( ...

javascripthtmlcss

Displaying an iframe in full screen to adjust to different screen resolutions and portrait mode on tablets

My latest coding project involved creating a responsive fullscreen iframe, and for the most part, it's been working really well. However, I encountered an issue with screen resolutions like 1680x1050 (check out the screenshot here). In cases like thes ...

jqueryhtmlcssresponsive-design

What is the best way to show all cards in Angular when no filtering input is provided?

I have implemented a filter feature for multiple cards in Angular using Pipes. The filter works well, but I am facing an issue where no cards are displayed when there is no input value provided. I would like all the cards to be displayed when no input is g ...

htmlangulartypescriptselectfilter

The border width of the div is set to 2 pixels, but upon inspection it appears to be 1

Greetings! I have created the following code snippet: <!DOCTYPE html> <html> <head> <title>Padding</title> <style type="text/css"> #main { width: 400px; height: 400px; border: 2px blac ...

htmlcss

`Select Dropdown Choice will Populate Corresponding Textfields`

While I know this question has been asked multiple times on Stack Overflow, I am looking for a more tailored solution based on my specific requirements. That is why I'm posting this question. I have an HTML form with PHP that retrieves data from an M ...

javascriptphphtmlsql-serverauto-populate

Encountering an issue with a <a> tag containing a <div> element with two columns

After coding this with a global tag <a>, I encountered an issue where the link ID was defined and appeared at the bottom wherever my mouse hovered. <a class="link" href="opencl/toto.htm"> <div class=&quo ...

htmljquerybootstrap-4sassflexbox

Automatically customizable CSS border thickness

Consider the following example of a div element: <div style="height: 10%; width: 20%; border: 1px solid black"> Div Content </div> The div above has its height and width specified in percentages. I would like the border width to adjust a ...

javascriptjqueryhtmlcss

Capturing the image data and extracting its value

I'm not entirely certain if this is doable, but if it isn't, please suggest a simple workaround if possible. I need the user to choose an img with the id of 'cowboys' or 'giants'. I want to extract the value from these (which ...

phpjavascripthtmlcssajax

Ways to eliminate the space separating a parent div and a list within

Is there a way to eliminate the gap on the left that is causing the list to be separated from the div and have the list aligned with the left border? I attempted setting the li position to absolute and left:0px, but this resulted in overlap and loss of al ...

htmlcss

Creating a curved container with CSS styling

I've attempted to create a design resembling the image below, but I'm not achieving the desired result. Can someone provide me with assistance? Any help would be greatly appreciated. https://i.sstatic.net/J4LzC.png <!DOCTYPE ht ...

htmlcssjquery-ui

What is the best way to position divs both vertically and horizontally at the center of a container

Here is the HTML markup I'm working with: <div class="wrapper"> <div class="block new-block"></div> <div class="block used-block"></div> <div class="block service-block"></div> <div class="block ce ...

jqueryhtmlcss

Move a sub-division horizontally within a parent element that has a full width of 100%

I am currently incorporating some jQuery features into my website. The concept involves expanding the parent div to 100% width for responsive design as you scroll down the page, which works perfectly. Simultaneously, I aim to translateX the child div so th ...

jquerycssanimation

design facebook type box scroll bar

After extensively searching through various stackoverflow answers in an attempt to change the CSS for a Facebook likebox scrollbar, I have had no success. Below is the code that I am currently using: <div id="fb-root"></div> <script>(fun ...

javascriptjqueryhtmlcssfacebook

Customize background images for the ::after and ::before pseudo elements that span the full height of the webpage

I've successfully centered a <div class="page"> element on my page, and now I'm attempting to add two background images that run along the left and right edges of this container. So far, I've utilized the .page::before and .page::afte ...

htmlcss

What is the best way to display text from a header box across multiple line boxes in real time on an HTML page?

Looking to enhance an HTML layout with a header box and line comment boxes. <textarea name="order[header_comments]"></textarea> The line comment boxes are structured as follows: <textarea name="line_comments[0][line_comments]"></tex ...

javascriptjqueryhtmljquery-selectors