What could be causing certain items in my Bootstrap navbar to be hidden on mobile screens?

When I view my website on mobile devices, only the logo appears in the navbar, not the other elements. Can you help me troubleshoot this issue?

NavBar HTML Code:

.navbar-logo {
    width: 93.75px;
    height: 23.5px;
    margin-left: 10rem;
}

.navbar-right-space {
    margin-right: 10rem;
}

.nav-icon {
    color: #fff;
    text-decoration: none;
    font-size: 26px;
    transition: 0.5s;
}

.nav-icon:hover {
    font-size: 28px;
    color: #fff;
}

#navRight .nav-item {
    margin-left: 10px;
}

#navElements {
    margin-top: 0.75rem;
}

#navRight {
    margin-right: 10rem;
}
<!-- NavBar -->
<nav data-aos="fade-down" class="navbar navbar-expand-lg navbar-light bg-transparent">
  <a class="navbar-brand" href="https://ionut.app/"><img src="assets/img/logo_light.png" alt="Ionut Logo" class="navbar-logo"></a>
  <div class="collapse navbar-collapse" id="navElements">
    <ul class="navbar-nav ms-auto mb-2 mb-lg-0" id="navRight">
      <li class="nav-item">
        <a class="fab fa-github nav-icon" target="_blank" href="https://github.com/wIonut"></a>
      </li>
      <li class="nav-item">
        <a class="fab fa-instagram nav-icon" target="_blank" href="https://www.instagram.com/patrascu.ionut.2008/"></a>
      </li>
      <li class="nav-item">
        <a class="fab fa-facebook nav-icon" target="_blank" href="https://www.facebook.com/patrascu.ionut.2008/"></a>
      </li>
    </ul>
  </div>
</nav>
<!-- End of Nav Bar -->

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

Content within this collapsible section will be hidden on mobile devices. It is expected that you will reveal it using a toggle button (which is currently missing). For more information, please refer to the documentation.

.navbar-logo {
  width: 93.75px;
  height: 23.5px;
  margin-left: 10rem;
}

.navbar-right-space {
  margin-right: 10rem;
}

.nav-icon {
  /* color: #fff; */
  text-decoration: none;
  font-size: 26px;
  transition: 0.5s;
}

.nav-icon:hover {
  font-size: 28px;
  color: #fff;
}

#navRight .nav-item {
  margin-left: 10px;
}

#navElements {
  margin-top: 0.75rem;
}

#navRight {
  margin-right: 10rem;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dab8b5b5aea9aea8bbaa9aeff4ebf4e9">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<nav data-aos="fade-down" class="navbar navbar-expand-lg navbar-light bg-transparent">
  <a class="navbar-brand" href="https://ionut.app/"><img src="https://via.placeholder.com/80" alt="Ionut Logo" class="navbar-logo"></a>

  <ul class="navbar-nav ms-auto mb-2 mb-lg-0" id="navRight">
    <li class="nav-item">
      <a class="fab fa-github nav-icon" target="_blank" href="https://github.com/wIonut">Github</a>
    </li>
    <li class="nav-item">
      <a class="fab fa-instagram nav-icon" target="_blank" href="https://www.instagram.com/patrascu.ionut.2008/">Instagram</a>
    </li>
    <li class="nav-item">
      <a class="fab fa-facebook nav-icon" target="_blank" href="https://www.facebook.com/patrascu.ionut.2008/">Facebook</a>
    </li>
  </ul>
</nav>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5c3e3333282f282e3d2c1c69726d726f">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

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

Cutting-edge strategies for minimizing the size of concealed HTML forms

Currently tackling a substantial project that involves numerous editable objects on each page. A prime example is a page with a list of categories, where each category contains a list of tasks. Both categories and tasks are editable through a modal dialog ...

htmljsonformshidden

Transform JSON data into an HTML layout

I'm looking to design a structure that showcases JSON information using HTML div elements. For example, utilizing the h4 tag for headers, p tag for text descriptions, and img tag for images. Can anyone provide guidance on the most efficient approach ...

javascriptjqueryhtmljson

What is the correct way to present the results of a result set in a textbox?

I am having trouble displaying data from the database in a textbox. It seems to be adding new lines and white spaces. Any thoughts on how to fix this issue? Here is the code snippet: <td width="200"> <textarea rows="3" cols="25" style="text-alig ...

javahtmljsp

Form popup that closes without refreshing the page upon submission

My goal is to make this form close when the button is pressed without refreshing the page, as Ajax code will be added later. The form functions as a pop-up, so it needs to close once the button is clicked. Currently, I can click the button without a refres ...

jqueryhtmlajaxforms

Creating three boxes within a single div using standard HTML and CSS

I created this design using Microsoft Paint and now I want to bring it to life using HTML and CSS. https://i.stack.imgur.com/dwNZi.png The numbers represent the box numbers in the design. Here is my attempt at coding this: HTML file <!DOCTYPE html& ...

htmlcss

Arrange elements within a div using Bootstrap

I have been struggling to align items within a div tag and despite trying various methods, I have not been successful. . Here is the current structure of my code: https://i.stack.imgur.com/t9PAj.png I attempted to use flexbox, but encountered an issue ...

htmlcssbootstrap-4

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 ...

cssrr-markdownreveal.jsxaringan

How come the cubic bezier timing function works flawlessly just on the first try when staggered transitioning element opacity over time with CSS and a touch of JS?

I'm currently working on a menu overlay that expands to fill the screen when a user clicks a button in the corner. I'd like the menu items to fade in one by one, similar to the effect used on this website: Most of the functionality is there, but ...

htmlcsscss-transitionsopacitycubic-bezier

Tell me about the CSS ruby-align characteristic

While browsing online, I stumbled upon a reference to the ruby-align property that piqued my interest. After searching on w3schools for some examples, I was surprised to find no mention of it anywhere. I remembered that Ruby is a newer tag in HTML5 and de ...

htmlcss

Rzslider not functioning properly due to CSS issues

I am facing an issue where rzslider is not appearing in my app. However, when I copy the code to an online editor, it works perfectly fine. Below is the code snippet: var app = angular.module('rzSliderDemo', ['rzModule', 'ui.boo ...

javascriptangularjshtmlcssangular-material

What is the best way to constrain the ratio of a full-width image display?

I am in need of a solution for displaying an image at full width inside a frame with a 16:9 aspect ratio. The image needs to be centered within the frame and adjust responsively when resizing the screen. My preference is to achieve this using just CSS. ...

htmlcss

The alignment of labels and text inputs using CSS flexbox is not correct

I am attempting to create a responsive layout for the labels and text inputs in my HTML code. I want them to align in a single row, with one label and one text input per row when the screen width is below a certain threshold. Once the screen width exceeds ...

htmlcss

Experience the seamless transition of new CSS animations

I designed a basic HTML game where a moving box disappears when clicked on. However, the animation that follows does not originate from the click location but rather from the original position. I believe the remove @keyframes at 0% should be based on the ...

javascripthtmlcsscss-animations

Is there a way to prevent the node modules folder from being uploaded when deploying a React app on Github Pages?

Struggling with the lengthy upload time of my React app on Github Pages. Every attempt to upload the node modules folder feels like an eternity due to its numerous dependencies. I've considered uploading just the build folder (minified version), but i ...

javahtmlreactjsgithubnpm

Tips for customizing the appearance of Java FX TableView column headers with CSS

I am relatively new to JavaFX and delving into CSS stylesheets, as well as using stackoverflow. I am curious about how one can customize the styling of a table column header. This is what my current column header looks like: Current appearance of my table ...

cssjavafxtableviewcolumnheader

Utilize information stored in a database to automatically navigate to a different webpage

I am currently working with PHP, HTML, and a mySQL database. Here are my current project requirements: Retreive specific data from the database and output it. Compare this data with predetermined values. If the data falls outside of the specified range, ...

javascriptphphtmlmysqlcss

Initiate the React application with the given external parameters

I have created a React app that is embedded within a webpage and needs to start with specific parameters obtained from the page. Currently, I am passing these parameters in the index.HTML file within a div element. The issue arises when these parameters ar ...

javascripthtmlreactjs

Nested Tables in JavaScript: Creating Tables within Tables

Recently, I have been analyzing student data and noticed a recurring structure. While preparing to present information on student performance within the discipline, I also became interested in showcasing a history of new students. It was suggested that hav ...

javascriptcsstreeviewsyncfusiontreetable

The table borders in IE 11 do not display properly when using Html5 and CSS

In a previous version, the table had visible borders. However, when I added the property text-align:center; to my container, the table did not align to the center. I then tried adding display:inline-block; to the table, which successfully centered it. It l ...

htmlcss

After uploading my website, I noticed that one of the tabs appears in Chinese

After uploading my website, I noticed that one of the tabs (more info) is displaying in Chinese for some unknown reason. I'm not sure why this is happening. Here is the URL: You can also check out the code here: http://pastebin.com/jFBUV1ga ...

htmlcss