How can I create a layout html page with fixed-top

Question

How can I create a layout html page with fixed-top

Polachan Paily 226

Hi

I am trying to create a _Laout.cshtml page with the following format attached in asp.net core . I have created a layout but it is not working properly, Page content is showed above the fixed header. am using a fixed position header in my main layout page. But when I call an html page from an anchor tag , it is showed always above the header. How can I show the content inside 'Renderbody()' from all the pages. Here is the code in '_Layout.cshmtl'.

My default page is 'Index.cshmtl' has shown below .This index page is showed from 'Renderbody' section. But when I call another page 'projectdetails from Index page , it is showed above the header part of the layout. The content of the projectdetails should be showed after header part ,inside Renderbody() section. If I remove 'fixed-top' , from layout , it will show correctly. How can I show the views inside the render body section when I use fixed-top.

I have given my layout as an attachment . In my layout , the fixed-top should be applied for Heading , Menu rows only. @RenderBody should be applied only for content rows, Please help.

Here is my code

<body data-spy="scroll" data-target="#main-nav" id="home">  
    <header id="header">  
        <div class="fixed-top">  
    </div>  
    </header>  
    <div class="body-container">  
             @RenderBody()  
        </div>  
</body>  
<footer>  
</footer>  
  
@{  
    ViewData["Title"] = "Home Page";  
    Layout = "~/Views/Shared/_Layout.cshtml";  
}  
  
<div>  
    <a asp-controller="Home" asp-action="Projectdetails" asp-route-itemId= 1 class="card-link ">Read More</a>  
</div>

6 answers

Your answer

Answer 1

Sreeju Nair 12,666

fixed-top will have the overlay issue. To fix this, add a margin-top to the next element so that there will not be any overlay.

Refer the following tutorial

https://www.w3schools.com/howto/howto_css_fixed_menu.asp

Answer 2

Polachan Paily 226

Hi sreejukg
I am using bootstrap and I have given the margin-top , still not working

 <div class="body-container">
        @RenderBody()
    </div>
.body-container {
    /*  */
    /* top: 0;*/
    bottom: 0;
    right: 0;
    left: 0;
    margin-top: 30px;
}

Answer 3

Hi, Can you try the below HTML with the style and see what is the output.

<header>
        <div class="fixed-top">
             <div style=" height: 200px; border: solid 1px blue;  "> HI</div>
            </div>
    </header>
    <div class="body-container">
        <main role="main" class="pb-3">
            Your content area.        

        </main>
    </div>


    <style>
         .body-container {
     /*  */
     /* top: 0;*/
     bottom: 0;
     right: 0;
     left: 0;
     margin-top: 200px;
 }
    </style>

Answer 4

Polachan Paily 226

No still not working
Thanks
Pol

Answer 5

Sreeju Nair 12,666

Hi Pol,

Based on your feedback, I created a JSfiddle link, that illustrate the required markup. See whether it works for you

https://jsfiddle.net/7sw908yg/9/

Share via

How can I create a layout html page with fixed-top

6 answers

Your answer