In Angular 4, I encountered an issue where adjusting the height of the navigation bar caused the toggle button to no longer expand the menu in Bootstrap

In the process of developing an angular application, I encountered a situation where I needed to adjust the height of the nav bar using style properties. After making the necessary changes, everything was working fine.

However, a problem arose when I minimized the screen - the toggle button failed to open the menus as expected.

I have included a link to the StackBlitz file showcasing the issue: https://stackblitz.com/edit/angular-wbecxm?file=src%2Fapp%2Fapp.component.html

If anyone has any suggestions or solutions on how to resolve this, I would greatly appreciate it.

angulartypescriptbootstrap-4

Answer №1

To improve your website, make adjustments to the HTML structure and add the following styles:

.navbar {
  padding: 0.25rem 1rem;
}

.navbar-toggler-icon {
  width: 0.9em;
  height: 0.9em;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<nav class=" navbar  navbar-expand-lg navbar-dark bg-primary">
  <div class="container">
    <img style="outline: none;cursor: pointer;" src="assets/Images/Logo/home.png" routerLink="/landingpage" class="img-fluid" alt="Responsive image">

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item" style="margin-left: 20px">
          <a class="nav-link" routerLink="/landingpage" style="color: #FFFFFF">Demo 1</a>
        </li>
        <li class="nav-item dropdown" style="margin-left: 20px;cursor: pointer;">
          <a class="nav-link dropdown-toggle " href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color: #FFFFFF">
            Demo 2
          </a>

          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <div class="container">
              <div class="row">
                Hi
              </div>
            </div>
          </div>

        </li>
        <li class="nav-item " style="margin-left: 20px">
          <a class="nav-link " style="color: #FFFFFF" routerLink="/contactus">Demo 3</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

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

Error message: Angular Universal running on Docker encountered an HTTP failure response from an unidentified URL

My current setup consists of the following: I have four services defined in my docker-compose.yml file: my_nginx, my_client, my_api, and my_db. Using my_nginx as a proxy pass to access my_client:8000 and my_api:8001, both running on Node.js. The my_clie ...

angulardockeruniversalnginx-reverse-proxyserver-side-rendering

Guide on showing a component exclusively for iPads with React and TypeScript

I need help displaying an icon only in the component for iPad devices, and not on other devices. As a beginner in coding for iPads and mobile devices, I am unsure how to achieve this specific requirement for the iPad device. Below is the code snippet tha ...

reactjstypescript

Express: issue retrieving numbers from request body array

JavaScript / TypeScript Issue: export const updateSettings = catchErrors(async (req, res) => { console.log("updateSettings req.body: ", req.body) const { organizationId, formdata, updatedItems, updateQuota } = req.body; console.lo ...

javascriptnode.jstypescriptexpress

Is there a way to retrieve a specific type from a union-based type by using a generic function in Typescript?

When working with my API, I have noticed a consistent pattern where it returns either a specific type or a TypeScript type called BadResult, as shown below: type Result1 = CreatedPersonResult | BadResult; type Result2 = CreatedRoleResult | BadResult; To s ...

typescriptgenerics

Is it possible to implement a customized pathway for the functions within an Azure function app?

Recently, I set up a new function app on Azure using Azure Functions Core Tools with Typescript as the language. The app includes a test function named MyTestFunction that responds with an HTTP response when called. This particular function is located in ...

typescriptazureazure-functionslocalhostfunc

What could be the reason for Typescript attempting to interpret files in the `./build` directory as input files?

After struggling for an hour on this issue, I am stuck. The variables outDir and rootDir are set. However, the problem arises when only src is included in include, TypeScript shows the configuration via showConfig, yet it's attempting to compile 4 fi ...

typescript

Is there a way to conceal one column in a row and display only the second column from a medium screen to a small screen using Bootstrap 5?

I am currently working on creating a row with two columns, one being the left_bar column and the other a large image. My goal is to display only the large image (column 2) when the screen size changes from medium to small breakpoints, hiding the left_bar c ...

htmlcssbootstrap-4bootstrap-5

Angular Appreciation Meter

Looking to create a rating system using Angular. The square should turn green if there are more likes than dislikes, and red vice versa (check out the stackblitz link for reference). Check it out here: View demo I've tried debugging my code with con ...

htmlangulartypescript

Modifying the color of the error icon in Quasar's q-input component: a step-by-step guide

https://i.stack.imgur.com/4MN60.png Is it possible to modify the color of the '!' icon? ...

javascripthtmlcsstypescriptquasar-framework

Steps for setting the keys of a map as a priority when initializing a state variable in Typescript for a React component

I am working with a state variable that connects a string username to a UserData object. Initially, the usernames are stored in the string array 'users'. Is there a method to assign the initial state of 'userDataMap' with the keys fro ...

reactjstypescriptreact-hooks

Customizable TypeScript interface with built-in default key value types that can be easily extended

One common pattern that arises frequently in my projects involves fetching values and updating the UI based on the 'requestStatus' and other associated values. type RequestStatus = | 'pending' | 'requesting' | 'succ ...

reactjstypescriptgenericstypesstatic-typing

Is there a way to use dot notation in TypeScript for a string data type?

I'm currently in the process of developing a function API with a specific format: createRoute('customers.view', { customerId: 1 }); // returns `/customers/1` However, I am facing challenges when it comes to typing the first argument. This ...

typescript

Tips for integrating tsconfig with webpack's provide plugin

In my project, I have a simple component that utilizes styled-components and references theme colors from my utils.tsx file. To avoid including React and styled-components in every component file, I load them through WebpackProvidePlugin. Everything works ...

reactjstypescriptwebpacktslinttsconfig

While running tslint in an angular unit test, an error was encountered stating 'unused expression, expected an assignment or function call'

Is there a method to resolve this issue without needing to insert an ignore directive in the file? Error encountered during command execution: ./node_modules/tslint/bin/tslint -p src/tsconfig.json --type-check src/app/app.component.spec.ts [21, 5]: unuse ...

angulartypescriptlint

Guide to incorporating external code in InversifyJS without direct control

I'm wondering if it's feasible to add classes that are not editable. Inversify seems to rely heavily on annotations and decorators, but I'm curious if there is an alternative method. ...

typescriptinversion-of-controlinversifyjs

Adjusting the settimeout delay time during its execution

Is there a way to adjust the setTimeout delay time while it is already running? I tried using debounceTime() as an alternative, but I would like to modify the existing delay time instead of creating a new one. In the code snippet provided, the delay is se ...

javascriptangulartypescriptrxjs6

Encountering a clash in Npm dependencies

I have been involved in a Vue project where I utilized Vue Cli and integrated the Typescript plugin. However, I encountered multiple vulnerabilities that need to be addressed. When I executed npm audit fix, it failed to resolve the dependency conflict: npm ...

typescriptvue.jsnpmauditnpm-vulnerabilities

Angular strictPropertyInitialization - best practices for initializing class members?

When initializing a component, I need to retrieve user information. However, with the Angular strict mode in place, I'm uncertain about where to fetch this data. I have considered 3 options. But which one is the most appropriate? Is there another alt ...

angulartypescript

Get the final element with a for loop in Angular 2

I am currently utilizing angular 2 in conjunction with mongoDb. The service I am employing is responsible for calling the API. Here is a snippet of my code: this.at represents a token, similar to fdfdsfdffsdf... This token serves as an authorization key ...

javascriptmongodbangular

Setting up Firestore with @angular/fire 17 and Ionic @ionic/angular 7.6.2 for full offline functionality: a step-by-step guide

Recently, I've delved into app development using Angular, Ionic, and Firebase. Currently, I'm grappling with the challenge of setting up offline capabilities/unlimited cache size with AngularFire, and it's been days of confusion and dead-en ...

androidangularfirebaseionic-frameworkgoogle-cloud-firestore