Concealing the links except for when viewed on a smaller device

Currently, I am faced with the task of creating my header using bootstrap in such a way that only the brand is displayed on screens larger than small, while the links are hidden. However, on smaller screens, I would like to have a collapsible button for the navigation menu.

You can view my website here: 

<div id="collapsable-nav" class="collapse navbar-collapse d-block d-sm-none">
    <ul id="nav-list" class="nav navbar-nav navbar-right ">
        <li class="link-button">
            <a href="#chicken">Chicken</a>
        </li>
        <li class="link-button">
            <a href="#beef">Beef</a>
        </li>
        <li class="link-button">
            <a href="#sushi">Sushi</a>
        </li>
    </ul>
</div>

I've tried adding the d-block d-sm-none classes in both the div and ul elements, but unfortunately, nothing seems to be working as intended. I would greatly appreciate any assistance or suggestions. Thank you!

htmlcssbootstrap-4display

Answer №1

If you're looking to hide the links, consider using the navbar-expand-[sm-md-lg] class.

<div id="collapsable-nav" class="collapse navbar-collapse navbar-expand-sm"> </div>

It might be a good idea to update to Bootstrap 4 with Bootstrap 5 now available.

If this solution doesn't work for you, please don't hesitate to reach out.

Answer №2

Initially, the issue arose due to a mismatch in Bootstrap versions - I was using Bootstrap 3 instead of Bootstrap 4. To resolve this, I switched to Bootstrap 4 and included the .navbar-expand-xs class in the navigation bar like so:

<nav class="navbar navbar-expand-xs navbar-dark bg-dark">

Additionally, I added the classes .d-block and .d-sm-none to the button element as follows:

<button class="navbar-toggler d-block d-sm-none" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

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

How long does jQuery animation last until completion?

Within my project, I am utilizing the animationComplete function from the jQuery mobile library. You can find this function at The animation in my project involves a sequence of objects with various tasks to be executed at each point of the animation. The ...

javascriptjquerycssjquery-mobile

Radio button selection with table layout

I am designing a quiz template with radio buttons. However, I would like them to be stacked vertically instead of side by side. Why doesn't the <br/> tag work? I'm having trouble understanding it. Can someone assist me? Here is my code: ...

htmlcss

How to show specific images by clicking on particular items in Ionic 3 on a separate page

Can someone assist me with displaying specific images from a slider gallery? I am struggling to figure out how to show only the January edition when clicking on it in eighteen.html, while hiding the February and March editions. It has been 2 days of unsucc ...

htmltypescriptionic-framework

Creating animations with an svg mask can be effective, however, it seems to only work properly

I have been experimenting with creating a transition effect using SVG masks and CSS. Initially, everything was working as intended, but after a few repetitions (usually 1 or 2, unpredictably), the transition effect would suddenly stop and become instantane ...

cssanimationsvgsvg-animate

What are some ways to enhance the worth of this.value?

What's the best way to restrict input to only numeric values in this scenario? function validateUserInput() { $('datagroup').on('keyup', 'input[id^="datagroup_1"]', function () { if (!this.value){ ...

javascripthtmlkeyup

The flex-box has been elongated

There is an issue with the image gallery in this example where boxes 1 to 9 are stretching downward, as shown in the snippet. I have attempted to set them with a fixed size using align-content and align-items, but I have not had any success. If I adjust ...

cssflexbox

Ways to take out an object from the scene in three.js

As a complete beginner in three.js, I am currently working on a small website and facing an issue. Everything is functioning correctly, but I am struggling to remove an OBJ from the scene. How can I achieve this? Specifically, I would like the OBJ to disa ...

htmlthree.js

What could be causing my HTML table to stretch all the way to the bottom and right?

https://i.sstatic.net/SpG52.png The layout appears to be extending to the right and bottom, despite my attempts to fix it. I am utilizing the Bootstrap table class in my code. Here is the code snippet: HTML: <head> <link rel="stylesheet" ...

htmlcssbootstrap-4

What is the best way to align text next to an image within a div container?

Is there a way to position long text next to an image within a container? I've tried using float left/right, but it didn't work. When I use margin-top, the layout gets messy because the images and text are different heights/lengths. .containerpo ...

htmlcss

Is it possible to execute a function defined within an eval() function using setInterval()?

const evaluation = eval(document.getElementById("codearea").value); setInterval(evaluation, 10); I am seeking a way to access a function that is declared within the eval function, for example: setInterval(evaluation.examplefunc, 10) I attempted ...

javascripthtmlthree.js

Integrating fresh fonts into TinyMCE's font selection choices

I recently reviewed a thread regarding Google Fonts and TinyMCE, and I have successfully added new fonts to TinyMCE in the past. However, I am currently facing an issue where I am unable to add a new font called "Samman" that I obtained from MyFonts.com. ...

cssfontstinymcefont-face

transferring data from JavaScript to servlet

For my project, I am working on retrieving contacts from a user's Gmail and Yahoo accounts. I have successfully added checkboxes for the user to select desired email addresses for sending emails. Now, I need to gather all selected email ids and save t ...

javajavascripthtmlservlets

JavaScript - Attempting to select a random item from an array and update the inner HTML content based on the selected item - Currently experiencing technical difficulties

Below is my custom Javascript snippet: const enemyPokemonList = ["Charmander", "Bulbasaur", "Squirtle"]; const playerPokemonList = ["Charmander", "Bulbasaur", "Squirtle"]; // Select a random Pokemon from the Enemy Pokemon List const randomlyChosenEnemyP ...

javascripthtmlarraysarraylist

Adjusting specific sections of a container in real-time

Fiddle: https://jsfiddle.net/1b81gv7q/ Sorry for the slightly cryptic title; I couldn't come up with a better way to phrase it. Imagine this scenario: there's a container with content that needs to be dynamically replaced. If I wanted to repla ...

javascriptjqueryhtmlcsstemplates

Most left-aligned icon on the left, most right-aligned icon on the right, and evenly spaced icons in between

Imagine a scenario where you are presented with a questionnaire that allows you to respond using a slider (HTML range element). Below the div containing the range selector (slider), I have arranged icons that need spacing. The icon on the far left should ...

htmlcssbootstrap-5

Steps for aligning a table in the middle of a webpage

Can someone help me align my table to the center of the webpage? I have tried using align="right" and "center" but neither seem to be working. Any tips on how to position the table correctly? <table style="table-layout:fixed;" align="right" cellspaci ...

htmlcss

Is there a way I can implement pagination on a bootstrap table that has its header positioned on the left side?

Recently, I stumbled upon this table on Stack Overflow and I am curious to learn how to incorporate pagination for every 5 entries. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link ...

javascripthtmlcsstwitter-bootstrap

The hover effect is being disrupted by the links inside the list item

I'm working on styling an unordered list where each list element contains a frame, background, and an image. I've set it up so that when you hover over a list element, the background changes to orange and the text turns white. However, I ran into ...

htmlcss

What is causing the newly generated input tags to disappear from the page?

I'm having an issue where my code successfully creates new input tags based on user input, but they disappear shortly after being generated. What could be causing this to happen? <form> <input type='text' id='input' /> ...

javascriptjqueryhtml

Sort the parent by the number present in the child item using jQuery

Is there a way to rearrange a list of items based on a specific number within each item? Consider the following HTML structure that cannot be modified: <ul id="ul-list"> <li> <div class="name">product 1</div> & ...

javascriptjqueryhtml