Angular 4 - Issue with Top Navigation Bar not remaining fixed at the top of the page

I'm having trouble finding a solution to keep the top navigation bar fixed at the top of the screen without allowing it to scroll when the page becomes too long. I want to prevent the top nav bar from scrolling and maintain its position at the top of the screen.

Relevant Files below:

app.component.html

<div class="sidenavContainer" [class.app-dark-theme]="isDarkTheme" [class.app-candy-theme]="isCandyTheme" [class.app-custom-theme]="isCustomTheme">
    <md-sidenav-container class="sidenavContainer">
        <md-sidenav class="left-nav" id="leftNav" color="primary" #sidenav mode="over">
            <md-toolbar layout="row" color="primary">
                <h2>
                    <span>Side Panel</span>
                </h2>
                <span class="nav-spacer"></span>

                <md-button class="close-icon" (click)=sidenav.close()>
                    <md-icon>close</md-icon>
                </md-button>
            </md-toolbar>
            <nav-menu (onSelected)="setTheme($event)"></nav-menu>
        </md-sidenav>

        <md-toolbar class="top-nav" color="primary">
            <button md-button (click)="sidenav.toggle()">
                <md-icon>menu</md-icon>
            </button>

            <div id="navBarTitle">Dashboard</div>
            <span class="nav-spacer"></span>
            <div>Signed in as: AdminUser</div>
            <md-icon class="nav-icon">
                <div routerLink="/settings" mdTooltip="Settings">settings</div>
            </md-icon>
            <md-icon class="nav-icon" mdTooltip="Help">help</md-icon>
        </md-toolbar>

        <div class="router-container">
            <router-outlet></router-outlet>
        </div>
    </md-sidenav-container>
</div>

app.component.css

.sidenavContainer {
    height: 100%;
    width: 100%;
}

/deep/ .mat-sidenav-transition .mat-sidenav-backdrop.mat-sidenav-shown {
    background: rgba(0, 0, 0, 0.1);
}

.close-icon {
    cursor: pointer;
    margin-top: 9px;
}

.top-nav {
    position: fixed;
    width: 100%;
    height: 64px;
    top: 0px;
}

.nav-icon {
    padding: 0 15px;
    cursor: pointer;
}

.router-container {
    width: 100%;
    position: relative;
    top: 64px;
}

Despite using position: fixed;, it seems that the top navigation bar is still not staying fixed.

Answer №1

It appears that the solution lies in utilizing absolute positioning to achieve the desired outcome.

Styles in app.component.css

.sidenavContainer {
    height: 100%;
}

/deep/ .mat-sidenav-transition .mat-sidenav-backdrop.mat-sidenav-shown {
    background: rgba(0, 0, 0, 0.1);
}

.close-icon {
    cursor: pointer;
    margin-top: 9px;
}

.top-nav {
    height: 64px;
    position: fixed;
    top: 0px;
}

.router-container {
    width: 100%;
    overflow: auto;
    position: absolute;
    bottom: 0;
    top: 64px;
}

.nav-icon {
    padding: 0 15px;
    cursor: pointer;
}

HTML structure in app.component.html

<div class="sidenavContainer" [class.app-dark-theme]="isDarkTheme" [class.app-candy-theme]="isCandyTheme" [class.app-custom-theme]="isCustomTheme">
    <md-sidenav-container class="sidenavContainer">
        <md-sidenav class="left-nav" id="leftNav" color="primary" #sidenav mode="over">
            <md-toolbar layout="row" color="primary">
                <h2>
                    <span>Side Panel</span>
                </h2>
                <span class="nav-spacer"></span>

                <md-button class="close-icon" (click)=sidenav.close()>
                    <md-icon>close</md-icon>
                </md-button>
            </md-toolbar>
            <nav-menu (onSelected)="setTheme($event)"></nav-menu>
        </md-sidenav>

        <md-toolbar class="top-nav" color="primary">
            <button md-button (click)="sidenav.toggle()">
                <md-icon>menu</md-icon>
            </button>

            <div id="navBarTitle">Dashboard</div>
            <span class="nav-spacer"></span>
            <div>Signed in as: AdminUser</div>
            <md-icon class="nav-icon">
                <div routerLink="/settings" mdTooltip="Settings">settings</div>
            </md-icon>
            <md-icon class="nav-icon" mdTooltip="Help">help</md-icon>
        </md-toolbar>

        <div class="router-container">
            <router-outlet></router-outlet>
        </div>
    </md-sidenav-container>
</div>

This approach effectively maintains the bottom bar anchored to the top without overlapping the main content.

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

Requesting PayPal for an HTTPS transaction

When attempting to call the Express Checkout Paypal API using $http.get(AngularJS), I encountered error 81002(Method Specified is not Supported). However, when I tried calling the API using the search bar in Google Chrome, I was able to retrieve the token ...

Link various data to various text boxes using a common ngModel property in Angular 8

In my project, I am working on creating a time-picker that will open when the user focuses on a text-box. The challenge I'm encountering is that although there are multiple text-boxes on a single page, binding the selected value from the time-picker u ...

Importing JavaScript into an Angular component: A beginner's guide

Within my Angular-11 project, I have included the following JavaScript file: "node_modules/admin-lte/plugins/bs-stepper/js/bs-stepper.min.js", I have added it to the angular.json configuration as detailed above. import Stepper from '.. ...

Javascript code creates a blur effect on webpage bodies

On my webpage, I have multiple elements, including a "change BG" button. When this button is clicked, I want to hide all other content on the page except for the button using JavaScript. Alternatively, clicking the button could blur out all other elements ...

Tips on turning off automatic positioning in Bootstrap 4.1

My dropdown list is currently quite large. Take a look at the image linked below. Image How can I address this issue effectively? I'm considering utilizing JavaScript to reposition the menu. Any guidance on how to disable auto-positioning? Check ou ...

Printing without sufficient paper will result in an incomplete printout

https://i.stack.imgur.com/jNlRr.jpg I am facing an issue with printing the last column "Potensi". The text in this column is not fully printed. How can I resolve this problem? I am using PHP. Thank you ...

Pair objects that possess a specific attribute

I have a HTML snippet that I want to modify by adding the CSS class HideEdit to hide specific columns. <th class="rgHeader" style="text-align: left;" scope="col" _events="[object Object]" control="[object Object]" UniqueName="Edit"> This particular ...

The wss websocket connection is experiencing issues in Firefox 89 when attempting to connect on localhost

For some reason, the websocket wss connection is not working in Firefox 89 when trying to connect on localhost. Interestingly, I can successfully establish a connection using my to connect to from the production server. However, when attempting to init ...

Resizing webpages for mobile devices results in misaligned rows

I'm currently using Bootstrap on a website and encountering issues with the responsiveness of rows on mobile devices. The desired outcome is for rows to be divided into 4 equal sections per row on larger screens, then scale down to 2 equal sections p ...

bespoke arguments for the super function in a subclass of Angular

I am attempting to incorporate the ol sidebar from umbe1987/Turbo87 into an Angular project. As I extend a class, I find myself needing to manipulate constructor parameters in the derived class constructor before passing them to the superclass constructor ...

When I include scroll-snap-type: y; in the body tag, the scroll-snapping feature does not function properly

Hey there! I've been trying to implement scroll-snapping on my project but unfortunately, I couldn't get it to work. I tested it out on both Chrome and Firefox, but no luck so far. Here's the code snippet I've been working with, would a ...

Using HTML and CSS, change the background color to red based on the value of each cell in a forEach loop

Need help with my HTML/CSS code. I have a table where I need to change the background color of any row that has a cell value of "Not Approved" while using a foreach loop in Google Apps Script to send an email with two tables. What is t ...

Here's a guide on how to display texts underneath icons in Buttons using Material UI

Currently, this is the Button I have displayed https://i.sstatic.net/YkHp0.png I am trying to figure out how to position the Dummy Button text beneath the icon. Can someone assist me with this? Below is my code snippet: <Button className={classes.d ...

Is it possible to isolate specific HTML elements within a designated area?

Is it possible to identify which elements are located within a specific rectangular region on a web page identified by a URL? UPDATE: The default settings for screen resolution, font size, etc. can all be adjusted to reasonable values. ...

Push the accordion tab upwards towards the top of the browser

I am working on an accordion menu that contains lengthy content. To improve user experience, I want to implement a slide effect when the accordion content is opened. Currently, when the first two menu items are opened, the content of the last item is disp ...

Designing the appearance of a button in a filefield xtype

I am currently working on a web application where users can upload photos using a fileField. I have been struggling to style the button for this feature, as my attempts so far have not been successful. Initially, I tried using the element inspector to iden ...

Responsive Bootstrap 5+ carousel featuring cards tailored to different viewport sizes

After an extensive search, I have come across numerous outdated questions and answers regarding my issue. With Bootstrap continuously evolving, I am hoping someone can help me with my specific requirement. I am in need of a carousel of cards that adjusts ...

access older siblings, accordion animation

I need assistance achieving an accordion effect on a DIV when hovering over it. The right side of the accordion is functioning properly, but I am facing issues with the left side. You can view my code on jsFiddle Could someone please provide guidance on ...

Communication among sub applications is crucial for the success of Micro Frontends

After researching the best practices for frontend applications, I made the decision to refactor our monolith application. Instead of choosing between micro frontends and mono repo approaches, I decided to merge them both in a unique way. I plan to create ...

Unable to load Angular 2 Tour of Heroes application due to Typescript issue

My Angular 2 Tour of Heroes app seems to be stuck on the "Loading..." screen and I can't seem to figure out why. The angular-cli isn't showing any errors either. I'm currently at part five of the tutorial and it's becoming quite frustra ...