What is the best way to position the jumbotron beneath the menu?

I'm currently working on a webpage that uses the Bootstrap layout.

<body>
 <div class="navbar  navbar-default navbar-fixed-top" role="navigation">        
    <div class="container">
  //All menu items taking up the full width at the top.
 </div>

  //Jumbotron displaying the main content of views.
  <div class="jumbotron">
    @RenderBody()
  </div>
</body>

Here is the CSS for the jumbotron:

 .jumbotron {
 height: 100%;
 padding-top: 80px;
 padding: 40px;
 margin-bottom: 0px;
 font-size: 15px;
 font-weight: 100;
 line-height: 2.1428571435;
 color: inherit;
 }

I have a view with a Telerik grid, but when it's displayed on the screen it ends up behind the Menu. I believe this is because the jumbotron is set to take up 100% of the height. How can I adjust the layout so that the jumbotron appears below the Menu, giving them some separation?

htmlcssasp.net-mvctwitter-bootstrap

Answer №1

To remove the navbar-fixed class from your navigation bar, simply update your code as follows:

<div class="navbar  navbar-default" role="navigation">

If you prefer to have a fixed navbar, make sure to add padding top: 30px (which should be equal to the height of your navbar) to the body:

body { padding: 30px 0 0; }

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

Is there a way to restrict input to numeric characters exclusively in Swal Sweetalert?

I'm wondering how I can restrict input to only numeric values in this section. { title: "Dollar Amount?", text: "How much is your Dollar Question worth?", inputPlaceholder: "Enter Amount" } I'm currently utilizing a Sweetalert p ...

javascripthtmlnode.jsbootstrap-4sweetalert

I attempted to implement the hover effect on a custom Tailwind CSS class I created, but unfortunately, it does not appear to be functioning as expected

For example: .btn {bg-blue-500 text-2 text-orange-300} .btn2 {bg-orange-500 text-2 text-blue-300} Attempted Solution: Edit: Apologies for the oversight in not including the code I was working with... it was late at night. < button className="btn ...

cssnext.jshovertailwind-css

How can I center an anchor tag in the middle of the screen using Tailwind?

It's frustrating that I can't seem to find a solution to my current issue. I intended for this anchor tag to be centered on the screen, however, it stubbornly remains stuck to the left side. <div class="background"> <Navbar/ ...

csstailwind-css

Ways to modify the appearance of the Sign up page on Moodle

I'm a newcomer to the world of Moodle, currently using version 2.9. I've created a unique design for my Signup page using HTML5 and CSS. How do I go about integrating this custom page? While I understand how to change the default Login page by m ...

phpcsshtmlmoodle

Tips for aligning nav-items in a Bootstrap 4 navbar: center one and right align another

I'm struggling with the code snippet below: <div class="container-fluid big-logo bg-light" id="big-logo"> <nav class="navbar nav-pills flex-column justify-content-center flex-sm-row navbar-expand-lg navbar-light b ...

htmlcsstwitter-bootstrapbootstrap-4sass

Using AJAX to create an interactive dropdown menu with changing options

I have been working on creating a dropdown menu using Ajax. When hovering over the navigation bar, the menu successfully triggers the Ajax function to display the dropdown options. The issue arises when attempting to navigate to another page (show_activi ...

javascripthtmlcssajax

Increasing the thickness of the border on a HTML table every two rows

I recently set up a table with 12 rows and 2 columns, containing various contents. I am looking to add borders to the table, but with a unique twist - after every set of 4 rows, I want to make the horizontal border thicker than usual. Does anyone know ho ...

htmlcss

I am looking to reveal concealed buttons using JavaScript

I am currently working on a web page that includes a button to display more buttons upon hover. However, I am facing an issue where the hidden buttons do not appear when hovered over. I referred to this solution: . Can anyone provide guidance on why these ...

javascripthtmljquerycss

Expanding Images Using HTML and CSS

I am currently working on a memory card game using HTML, CSS, and JS as part of my practice. You can check out what I have accomplished so far right here: . Upon inspection, you may notice that the images of the question mark and the flipped card are sligh ...

javascripthtmljquerycss

The callback function fails to execute the click event following the .load() method

Hey there, I've hit a roadblock and could really use some help figuring out where I went wrong. Let me break down my script for you. On page1.html, I have a div that gets replaced by another div from page2.html using jQuery's .load() method. Here ...

javascriptjqueryhtmlcssajax

The disappearing act of the Bootstrap 4 hamburger icon, despite the navbar expanding afterwards

Currently in the process of building my initial website using bootstrap 4, and encountering difficulties with my collapsible navbar and the hamburger icon. My goal is to have the navbar expand on medium screens, but switch to a hamburger icon on smaller sc ...

htmlbootstrap-4

The Controller Method is passing NEW HTML, but the Ajax request is returning outdated HTML

In my work with .NET Framework / MVC 4 / C#, I encountered an issue where a View containing a Partial View was not being properly updated/refreshed after user actions such as clicking a SAVE or CANCEL button. The problem stemmed from an Ajax request callin ...

javascriptjqueryhtmlajaxasp.net-mvc

Is it possible to switch a background image without the need for live reloading?

Currently, I am developing an Angular pick-ban overlay for organizing League of Legends tournaments. However, I have stumbled upon some fundamental challenges and am unsure if the task is achievable. My main issue is: Can I dynamically alter the background ...

cssangular

Displaying images with text below on the navigation bar, complemented by a sleek dividing line

I have a design in mind where I want to display 3 images at the top of a navbar, followed by centered text directly underneath each image. The spacing of the images seems to be even, but I'm not sure if this is just a coincidence or if I need to speci ...

htmlcssnavbar

The functionality of the Bootstrap grid system has proven to be ineffective

Hello, I am currently using Bootstrap 3 and attempting to configure my template. It seems like I may not have a full grasp on the concept of 'row' in Bootstrap because my template is not behaving as expected. Take a look at this full screen fidd ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

How to eliminate the gap below a CSS element by adjusting the top value

https://i.stack.imgur.com/Sn6Wx.png The three 'Replacement Options' sections are contained within a div with the class relative. The relevant CSS properties have been applied as shown below: .relative { top: -10rem; position: relative; ...

htmlcss

The dropdown menu is extending beyond the bounds of the screen on mobile devices

When viewing my website on a mobile device, the select dropdown is going off the screen. I am using the bootstrap class form-control. Here is my code: <select name="service" formControlName="service" class="form-control shadow-none" style="width:100%"& ...

htmlcssbootstrap-4

Change the value of a div element from a decimal number to an integer

Suppose we have <div id="mydiv>>111</div> in an HTML document and the intention is to extract this number using GetElementbyID(myid).value and convert it to an integer Attempts have been made with ParseInt, ParseInt(x, 10), Number(x).... ...

javascripthtml

Can you provide a guide on how to retrieve an HTML file using JSON?

There is a problem with fetching files in different formats. Specifically, I want to retrieve an HTML file that needs to be embedded in an iFrame. Currently, my AJAX request only retrieves SWF files. Is there a way to call and fetch the HTML file instead ...

javascriptjqueryhtmlajaxjson

What is the best method for creating a distinctive identifier in HTML and jQuery?

Coding in HTML: @foreach($permission->childs as $subMenu) <tr> <td>{{$subMenu -> id}}</td> <td> &nbsp; &nbsp;{{$subMenu -> display_name}}</td> <td ...

htmljquery