Conceal navigation options on smaller screens and enable drop-down menu functionality with Bootstrap 3

With the usage of Bootstrap 3, I have successfully hidden two menu items when the screen is resized. However, these items still appear in the drop down menu that appears on the top left (with three bars) when the screen size is reduced. Is there a way to keep them hidden there as well?

<div class="navbar-collapse collapse">
     <ul class="nav navbar-nav">
         <li> <a id="mobileTab">Start</a></li>
         <li> <a id="mobilityActivityTab" href="#">Tasks</a></li>
         <li class="hidden-sm"> <a id="activityTab">Activity</a></li>
         <li class="hidden-sm"> <a id="clientAcctTab">Accounts</a></li>
     </ul>
     @Html.Partial("_LoginPartial")
</div>

Please note: Some code has been omitted for simplicity.

Answer №1

To hide items when collapsed on mobile devices, add the class hidden-xs (e.g. hidden on extra small).

<div class="navbar-collapse collapse">
     <ul class="nav navbar-nav">
         <li> <a id="mobileTab">Start</a></li>
         <li> <a id="mobilityActivityTab" href="#">Tasks</a></li>
         <li class="hidden-xs hidden-sm"> <a id="activityTab">Activity</a></li>
         <li class="hidden-xs hidden-sm"> <a id="clientAcctTab">Accounts</a></li>
     </ul>
     @Html.Partial("_LoginPartial")
</div>

For more examples of classes to control content visibility on different devices, visit the Bootstrap website @ http://getbootstrap.com/css/#responsive-utilities

Answer №2

insert hidden-xs in front of each hidden-sm

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

jQuery-powered unique serial numbers for tables

I've encountered an issue with my dynamic table that consists of 2 dynamic rows including students, their subjects, and marks. The code in question is provided below: Feel free to check out the code here Snippet for Serial Number function gene ...

The Google Map is not showing all the details

Our app is developed using ReactJS on Rails API, with a Google map integrated. However, when visiting this link and clicking "Map View", some grey space appears under the Google Map. An example image can be found here: example We are having trouble findi ...

Build a video card using Bootstrap 5

I have successfully implemented this sample using Bootstrap 4: <div class="row"> <div class="col-md-9"> <div class="card"> <div class="card-body pt-3 "> <h5 class=&q ...

Ways to style CSS for inactive checkboxes?

How can I easily change the CSS for disabled checkboxes in a grid to make them more visible for users? Technologies I prefer to use, ranked from most preferred to least: CSS JavaScript jQuery Other ...

Steps for implementing Onclick event within the <Script> tag to display a div:

I am currently working on a code that allows me to show and hide a <div> element after clicking on an advertisement from any website. This advertisement is generated by a script. How can I implement the onclick event within the <script> tag? T ...

WordPress presents a challenge with PHP Heredoc not displaying variables in HTML

I've coded some functions in my theme's functions.php file. Here is an example: $usrProfileHTML = <<<EOD <div class="eUserProfile"> <div class="eUsrImage"> <img src="{$envUserProfile['eUsrImage']}" a ...

Using Javascript to Highlight a Single Row in a Table

Greetings esteemed members of the skilled community at StackOverflow, I must humbly ask for your expertise in solving a dilemma that I am currently facing. The situation is as follows: I have a table generated from an SQL query, and it is crucial for the ...

Switch button while moving cursor

I'm struggling with getting this 2048x512 image, which has 4 stages of transition, to work properly. While I know how to switch it to the final stage on hover, I can't seem to figure out how to incorporate a transition effect. Can someone help? ...

I'm having trouble getting Jquery's insertAfter() function to function properly

After creating a parent div and using jQuery's insertAfter() method to insert additional divs, an unexpected issue arises. The first record goes to the bottom, while subsequent records are inserted above it. Below is the function in question: functi ...

Connecting CSS Style Sheet to JSP Page

I'm facing an issue with linking a CSS file located in my WEB-INF folder to a JSP page. In the JSP page, I have specified the location of the CSS file as follows: <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/WEB- ...

Troubleshooting: Custom icons not displaying in Next.js application

Every time I attempt to use icons that I have loaded into my source code, I keep getting this default icon displayed: I'm uncertain about what exactly is causing this issue. Here is the layout of my file tree for reference: When attempting to utiliz ...

Are you able to design a webpage with the following table layout:

Click here to see the design Assign a letter to each table cell and provide all dimensions in pixels. The assigned letters and dimensions should not be visible on the final web page. Make sure the external border of the table is 4 pixels wide, and interna ...

Issue with loading the main.css file

Getting Started Managing two domains can be a challenge, especially when trying to make them appear as one seamless website. In this case, I have ownership of and . Goal My goal is to merge the content of https://mauricevandorst.com/personal-page/index ...

Browsing through all text on songmeanings.com's HTML files

I am attempting to extract user comments from the HTML of a link using BeautifulSoup. The link in question is: However, I am facing an issue where only the user comments from the first page are being displayed when utilizing a specific code: import url ...

What is the method for designing a relative layout that organizes elements horizontally?

Can you tell me why elements are typically arranged vertically in a column? Is it feasible to change their orientation and display them horizontally, like in a row instead of a column? ...

Various image dimensions cause divs to shift unevenly

Here is the current setup: <div class="row"> <div class="col-md-4 content-column"> <img class="btn-center btn-desktop" src="images/buttons/btn-desktop.svg" alt="desktop button"> <h2 class="btn-deskt ...

div layout; sidebar movements occur after appending div to the header

Having trouble mastering layouts, I am attempting to create a full-width header that includes a left sidebar and a right sidebar. The body is split into 5 sections: full width, left and right sidebars, center content with 3 columns, and the footer mirrorin ...

Toggle the display of slide numbers in RMarkdown xaringan / reveal.js presentations

In preparation for a workshop, I am creating HTML slides using the xaringan package in R, which is based on remark.js. These slides are made with RMarkdown, and while this approach has been effective, I have encountered a need to disable slide numbers on s ...

Rendering dynamic HTML content using EJS

I've created a blog application using Express and MongoDB, with EJS for rendering the data. My issue lies in the styling of the content to resemble a paragraph: <div class="show-post__content"> <%= post.body %> </div> The po ...

Modifying HTML Email to Achieve Consistent Rendering Across Various Email Platforms

While creating an HTML based email for our subscribers, I noticed that it renders differently in various email clients. The main issue arises in Outlook 2003 where the main picture is offset to the left and the grid boxes vary in height depending on the co ...