What is the best way to adjust the body margin when using fixed navigation bars?

Currently, I am trying to set up the layout for my application. The existing layout works fine, but the issue is that the navigation bar does not stay fixed in position. Additionally, if the content exceeds a certain height or width, it should be controlled by the browser's scroll bar.

I have attempted to use 'position:fixed' but it just makes things messier.

How can I configure my layout to achieve the desired layout?

app.component.html

<div  id="wrapper">
    <div class="al-left" >
        <app-sidebar [isExpanded]="sidebarExpanded" (toggleSidebar)="sidebarExpanded = !sidebarExpanded" ></app-sidebar>
    </div>

    <div class="al-right"> 
        <app-navbar></app-navbar>
        <div class="ex-right" id="content">
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

app.component.css

.al-right {flex-grow: 1;}
.al-right{margin-left:0px;
          margin-right:0px;}
.ex-right{
    margin-left:20px;
    margin-right:20px;
}

https://i.sstatic.net/K047C.png https://i.sstatic.net/ujlH6.png

Updated

https://i.sstatic.net/sLgbp.png

javascripthtmlcssangular

Answer №1

To achieve the desired layout, follow these steps:

  • Set the width and height of the wrapper using vw and vh units
  • Determine the width of the content by utilizing the CSS calc function
  • Apply a fixed position to the left bar (blue) to keep it in place during scrolling
  • Utilize a sticky position for the green bar

Here is a code snippet showcasing the implementation:

* {
    margin: 0;
    padding: 0;
}
.wrapper {
    width: calc(100vw - 100px);
    height: 100vh;
    overflow-y: scroll;
    background: red;
    margin-left: auto;
}

nav {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    max-width: 100px;
    background: yellow;
}

.topbar {
    width: 100%;
    height: 70px;
    background: blue;
    position: sticky;
    top: 0;
}
<div class="wrapper"> <nav></nav> <content> <div class="topbar"></div> <div>Lorem Ipsum text goes here...</div> </content> </div>

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

Manipulating variables across various methods in TypeScript

I have a simple code snippet where two variables are defined in the Main method and I need to access them from another method. However, I am encountering an issue with 'variables are not defined', even though I specified them in the declerations ...

javascripttypescript

Using Angular's HTTP service with Observables and @Input functionality

Here is the pseudo code snippet I am working on: Service getData(): Observable<MyData[]>{ return this.http.get<Data[]>(`https://localhost/api/data`); } Component: myData: Data[]; [...] ngOnInit(){ this.myService.getData.subscribe( data ...

angularobservabletemplating

ng serve in Angular 6 may cause compatibility issues with HttpClientModule and mat-icons

After implementing basic unit tests with Jest, I encountered an issue where my mat-icons were not displaying correctly and my HttpClient calls to the backend were returning empty responses when running the Angular app with "ng serve." Despite subscribing t ...

node.jsangularjestjsangular-httpclientangular-devkit

The color of a React icon cannot be overridden by CSS

Illustrating my issue in a straightforward manner import {BsFillArrowRightCircleFill} from "react-icons/bs"; export default function Icon(){ return <BsFillArrowRightCircleFill className='icon'/>; } When I include the followi ...

cssselectorreact-icons

What is the best way to display numerous images on a cube face while also organizing them like a gallery wall?

I'm working on creating a unique gallery wall using three.js. Currently, I have successfully rendered an image on each side like this: My goal is to place multiple images on each wall instead of just one large image. Something similar to this concept ...

javascriptthree.js

Encountering issues with installing the "useHistory" hook in React

Currently working on a Google clone as a mini project and in need of importing useHistory from react-router-dom. My approach has been as follows: Step 1: Executed npm install --save react-router-dom (in the terminal) Step 2: Implemented import { useHisto ...

javascriptreactjsnpmreact-hooksreact-router-dom

Display the icon exclusively when hovered over

I have a table with a column containing icons that I want to hide by default. I would like the icons to only appear when hovered over. Here is the HTML code: <table class="table table-hover"> <tr> <th>From</th> <th> ...

javascriptjqueryhtmlcsstwitter-bootstrap

Issue with Edge browser: child element exceeds parent's defined width

We need to meet a specific requirement that involves displaying a prefix inside a textbox that cannot be edited. Check out the HTML/CSS code on JSFiddle. The issue arises when we resize the window. HTML: <div class="customNameContainer" dir="ltr"> ...

htmlcssmicrosoft-edge

What is the best way to connect a CSS file with multiple pages located within a specific folder in HTML/CSS?

In my CS 205 class project, I am tasked with creating a website. To accomplish this, I used Notepad++ for the HTML files and Notepad for the CSS files. The site consists of an index.html page along with other content pages, each designed separately in Note ...

csshtml

Measuring the test coverage of Jest for evaluating the useEffect that modifies the styling of an HTML element

As a newcomer to Jest and React, I am currently working on developing a scroll button component in React using the useEffect function. Here's a snippet of my code: useEffect(() => { square && (square.style.transform = `translate ...

javacssreactjsjestjsreact-testing-library

Ways to stop button from wrapping inside a div

While working on a search page, I encountered an issue where the submit button overlaps with the text input when zooming in due to lack of space. Is there a solution to prevent this overlapping and keep the layout intact? HTML <input type="text> &l ...

htmlcss

Tips on linking a condition-reaction to document.querySelector

I am struggling to connect the condition-reactions to the input id of passid. I am unsure where to place the document.querySelector() method in order to link the indexed conditions correctly. Below is the code snippet: <!doctype html> <html> ...

javascripthtmlmethodsconditional-statements

Guide to executing multiple AJAX requests within a single Django view

As I develop my personal spending diary, I encountered a dilemma. To enhance the user experience, I aim to streamline the process of adding new items without refreshing the page. Although I created a single ajax form, I now realize the necessity for two ...

javascriptpythonhtmldjangoajax

How to position multiple CSS background images effectively?

Greetings all! I'm seeking advice on how to add a background image to the right of the description and left of the first post column. Any tips on proper placement? Appreciate any help :) ...

cssimagebackgroundtumblr

Incorporating an external URL into a webpage with a method that allows for overflow

Let me explain my current predicament. I recently created a new navigation menu using a php framework different from the one used in the existing site. Both the new menu and the old site exist on the same domain. To integrate the new navigation, I attempte ...

javascriptjqueryhtmlcss

Experimenting with animating an element through onClick event using JavaScript

I would like to create an animated div using JavaScript that activates on click. <div class="Designs"> <p>Designs</p> <div class="Thumbnails" data-animation="animated pulse"> <a href=" ...

javascriptjqueryhtmlcssajax

Is there a way to remove the highlight from a non-active block?

Hey friends, I need some help with my code. Currently, when I click on a table it gets highlighted, and if I click on another table, the previous one remains highlighted along with the new one I clicked on. How can I modify the code so that when I click on ...

javascriptjquerycss

showcasing every element from a multi-layered array within its own separate div using JavaScript

Is it possible to loop through a multidimensional array made up of 9 arrays with 9 elements each and display each item in a separate div? I want each div to contain one array item. Here's the code I have been working on: Link to my approach ...

javascriptarrays

Tips for passing an array to a different function using Jquery

I need to pass an array to another function <div id="test"></div> <div id="test2"></div> <input type="button" value="chk" id="go" /> <script> $(function() { var c = 1; var i = 5; var dat ...

javascriptjqueryarrays

Update the link to a KML file used by Google Maps when a button is clicked

On the initial page load, I want to showcase an 8 Day Average KML file on Google Maps. However, users should have the option to click on the "1 Day" and "3 Day" buttons to switch the reference in Google Maps from the "8 Day" file. The aim is to design a s ...

javascriptgoogle-maps