Can Anyone Provide Assistance with CSS for Customizing the Bootstrap 4 Navbar Burger Icon

I am working on implementing a bootstrap 4 navbar into my Angular code base. When the screen size of the browser becomes smaller, I want to hide the navbar and instead display a hamburger icon with a side menu.

I have tried a few solutions, but have not been successful in achieving the desired outcome. I am seeking guidance on how to make this transition smoothly!

Below are my HTML, TS, and CSS files for reference:

HTML:

<nav class="navbar navbar-expand-md navbar-fixed-top nav-border" role="navigation">
    <ul class="navbar-nav mx-auto" *ngFor="let menu of menus">
        <li class="nav-item dropdown">
            <a class="nav-link" data-toggle="dropdown" data-target="{{menu.heading}}">{{menu.heading}}</a>
            <div class="dropdown-menu" aria-labelledby="{{menu.heading}}">
                <a *ngFor="let option of menu.options" href="{{option.link}}" target="_blank" class="dropdown-item">{{option.name}}</a>
            </div>
        </li>
    </ul>
</nav>

TS:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-top-menu',
  templateUrl: './top-menu.component.html',
  styleUrls: ['./top-menu.component.css']
})
export class TopMenuComponent implements OnInit {

  menus: any = [
    {
      
        heading: "MENU1",
        options: 
        [
          {name: "GOOGLE", link: "https://google.com/", order: 1},
          {name: "GitHub", link: "https://github.com", order: 2},
        ]
      
    }
  ];
  
  isDropdownOpen: boolean = false;
  constructor() { }

  ngOnInit(): void {
  }

}

CSS:

.navbar{
    padding:0px;
}
.nav-border {
    border-bottom: 1px solid #ccc;
}
li { cursor: pointer; }

li:hover{
    background-color: black;
}

a {
    color: black;
}

.navbar-nav {
    padding: .9rem 0 0;
}

.nav-link:hover {color: white;}

.widthd{
    width: 100%;
}

Screen Preview: https://i.sstatic.net/PI9IS.png

Answer №1

Your issue lies with the class navbar-fixed-top. Change it to fixed-top and be sure to include the hamburger button in your navbar as well.

Here is a suggestion for the code:

<nav class="navbar navbar-expand-md fixed-top navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</a>
        <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 mx-auto" *ngFor="let menu of menus">
                <li class="nav-item dropdown">
                    <a class="nav-link" data-toggle="dropdown" data-target="{{menu.heading}}">{{menu.heading}}</a>
                    <div class="dropdown-menu" aria-labelledby="{{menu.heading}}">
                        <a *ngFor="let option of menu.options" href="{{option.link}}" target="_blank"
                            class="dropdown-item">{{option.name}}</a>
                    </div>
                </li>
            </ul>
       </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

I'm encountering an issue with my CSS image slider as it does not seem to be functioning properly on Google Chrome, yet

CSS: @-moz-keyframes slidy { 0% { left: 0%; } 20% { left: 0%; } 25% { left: -100%; } 45% { left: -100%; } 50% { left: -200%; } 70% { left: -200%; } 75% { left: -300%; } 90% { left: -300%; } 95% { left: -400%; } 10 ...

Centering text underneath bootstrap image design

After trying various methods, I still couldn't get the text to display directly below my images in the center. Below is the code I attempted: <div class="our_partners"> <div class="container"> <div class="row"> ...

Adjusting background-position-x while scrolling

I came across Ian Lunn's Parallax tutorial and found it really interesting. The tutorial can be accessed at . My goal is to enhance the effect by not only changing the y-position of the background but also adding horizontal movement based on scroll in ...

The image will only display upon receiving a link, not a path

Having some trouble displaying an image on my website, despite having successfully done so in the past for other projects. The image is located in the same folder as my HTML file. Here's what I've tried: <img src="reddit.png"/> <img s ...

Combining nested lists with the tag-it plugin from jQuery, you can create a list inside a list all

Currently, I am utilizing the Tag-it jQuery plugin found at Tag-it, which functions within a ul element. Within my horizontal list (a ul with multiple li elements), I aim to add another li element containing the Tag-it ul list alongside the main horizonta ...

Incorporating aws-sdk into Angular 2 for enhanced functionality

I'm currently working on integrating my Angular2 application with an s3 bucket on my AWS account for reading and writing data. In the past, we used the aws-sdk in AngularJS (and most other projects), so I assumed that the same would apply to Angular2 ...

List in Angular remains empty

I am facing an issue with populating a simple HTML list using Angular. The problem arises when trying to display the data in the list. When I use console.log("getUserCollection() Data: ", data);, it shows an array which is fine, but console.log("getUser() ...

In the IE7 standards mode, table cells with no content will have a height of 1px

When utilizing IE7 standards mode within IE9, empty table cells are automatically assigned a height of 1px. As a result, elements positioned beneath the table appear lower on the page than intended. To view an example of this issue, refer to the code provi ...

Align dropdown navigation menu/sorting dropdown in the same position as the button

Exploring the world of dropdown menus in CSS has led me to encounter some challenges. I am striving to ensure that the dropdown boxes appear on the same line as the button that triggers them. Below is the CSS code I have been working with: /* global style ...

Placing two images within one div tag

I've been attempting to place two images within a single div, but they're not appearing how I intended. I'd like there to be some space between the images, but that's not happening. Here's the CSS I'm using: .sidebarBody { ...

Navigate to the top of the page using jQuery

Attempting to implement a simple "scroll jump to target" functionality. I've managed to set it up for all parts except the "scroll to top". The jumping works based on the tag's id, so it navigates well everywhere else, but not to the very top. He ...

Adjust the alignment of cells within a table

Excuse my lack of knowledge, but CSS is still new to me. I'm attempting to align two elements next to each other using display: table. However, the element on the right seems to be lower than the one on the left, and I can't figure out why. . ...

`Issues with CSS/JQuery menu functionality experienced in Firefox`

After creating a toggleable overlay menu and testing it in various browsers, including Internet Explorer, everything seemed to work fine except for one major issue in Firefox (version 46). The problem arises when toggling the overlay using the "MENU" butt ...

A guide to accurately accessing form data in Jquery Ajax requests

My beforeSend function is not working properly, as the background color does not change. I suspect it may be due to not correctly referencing the id variable posted from the form. Below is the relevant HTML and JS code: HTML <div id="rec<?php echo ...

Creating a clickable pagination box involves utilizing CSS to style the entire <li> element with the necessary properties

Is there a way to make the entire LI box clickable for the pagination box? The HTML and CSS parts are functioning correctly, as I am able to click the link with the page number to navigate to the next page. However, the issue arises when trying to click t ...

What is the best way to maintain scrollbars on mobile devices?

I'm currently building a cross-platform application using Angular 4 that needs to work seamlessly on both mobile and desktop devices. Is there a special trick to prevent the scrollbars from disappearing when viewing this page on a mobile browser? I&ap ...

Employ the power of AJAX to selectively display or conceal a specific group of images

Have you ever thought about showcasing a large number of images on a non-CMS website? Say you have 50 images that can't all be displayed at once. One idea is to display the first 15, then allow users to click "Next" to reveal the next batch of 15, and ...

PHP Linking Style Sheets

I am exploring the use of an HTML Diff Tool in PHP, specifically looking at this one: https://github.com/rashid2538/php-htmldiff. I am fetching the content of both pages using cURL and passing it to the HTML-Diff tool. It works perfectly fine, but there is ...

What is the best way to make my if statement pause until a GET request finishes (GUARD) with the help of Angular?

I am currently working on implementing admin routes for my Angular app, and I have used a role guard to handle this. The code snippet below showcases my implementation: However, I would like the get request to finish executing before the if statement begi ...

having difficulty implementing the blur effect in reactJS

Currently, I am working on developing a login page for my project. Below is the code snippet I have implemented for the functionality: import React, { useState, createRef } from "react"; import { Spinner } from "react-bootstrap"; import ...