The form is gliding upwards and merging seamlessly with the navbar

I'm having an issue where my form is moving up and overlapping with the navbar on smaller screens and desktop screens. I've tried to figure it out but can't seem to fix it. Below is the HTML and CSS code:

HTML

<div class="container-fluid h-100 d-flex flex-column">
        <nav class="navbar navbar-light fixed-top">
    <a class="navbar-brand" href="#">
      <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
    </a>
    <ul class="nav justify-content-end">
      <li class="nav-item">
        <a class="nav-link active" href="#">Updates</a>
      </li>
    </ul>
  </nav>
  <div class="row align-items-center flex-grow-1"">
      <div class="col-6 mx-auto">
          <div class="custom-form mb-0">
             <form action="">
          <fieldset class="form-group">
            <label for="first_name">Name</label>
            <input type="text" class="form-control" id="name" name="name">
          </fieldset>
          <fieldset class="form-group">
            <label for="last_name">Email</label>
            <input type="text" class="form-control" id="email" name="email">
            <button type="submit" class="btn btn-submit">Subscribe</button>    
          </fieldset>                                                 
        </form>
          </div>
      </div>
  </div>

   <footer class="mt-auto">
    <p class="float-left">2018 © Palungo</p>
      <div class="float-right">
        <ul class="list-inline">
          <li class="list-inline-item"><a href="#">News</a></li>
          <li class="list-inline-item"><a href="#">Coles</a></li>
        </ul>
      </div>
  </footer>

</div>

CSS

    body,html {
     height: 100%;
     background:#333A4D;
    }
  .navbar{
    padding: 10px;
    background: #F3B0B6;
  }
  .nav-link{
    font-size: 25px;
    line-height: 32px;
    color: #F3B0B6;
  }
  .nav-item { margin-left: 1rem; }
  .list-inline-item{ margin-left: 1rem; }
  .jumbotron{ background: none; }
  .text-border{
    display: block;
    height: 1px;
    border: 0;
    border-top: 4px solid #F3B0B6;
  }
  .lead{
    text-transform: uppercase;
    color: #F3B0B6;
    font-size: 25px;
    line-height: 31px;
  }
  .custom-form-container{margin-top: 5rem;}
  .custom-form{
      background: green;
      padding: 60px 82px 60px 82px;
      border-radius: 10px;
      -webkit-box-shadow: 0px 3px 6px -4px #000000; 
      box-shadow: 0px 3px 6px -4px #000000;
  }
    .custom-form label{
      font-size: 25px;
      line-height: 32px;
      color: #F3B0B6;
      margin-left: 1rem;
   }
  .custom-form .btn{
    float: right;
    margin-top: 3rem;
    margin-right: -3rem;
    font-size: 25px;
    line-height: 32px;
    color: #F3B0B6;
    background: none;
  }
  .custom-form .form-control{
    height: 40px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: rgba(0, 0, 0, 0.1);
  }

If you want to see the issue, check out this screenshot: http://prntscr.com/kkkyto And if you have a better approach to solve this problem, take a look at this image: http://prntscr.com/kkkz4y

I also provided a CodePen link which might help: CodePenLink

csshtmlbootstrap-4

Answer №1

To enhance the appearance of your form, you can assign a class to the div element containing all the form tags. Then, in the CSS section, incorporate a margin-top selector with appropriate spacing to move it down. Here's an example:

body,
html {
  height: 100%;
  background: #333A4D;
}

.MAIN-FORM {
  margin-top: 10rem;
}

.navbar {
  padding: 10px;
  background: #F3B0B6;
}

.nav-link {
  font-size: 25px;
  line-height: 32px;
  color: #F3B0B6;
}

.nav-item {
  margin-left: 1rem;
}

.list-inline-item {
  margin-left: 1rem;
}

.jumbotron {
  background: none;
}

.text-border {
  display: block;
  height: 1px;
  border: 0;
  border-top: 4px solid #F3B0B6;
}

.lead {
  text-transform: uppercase;
  color: #F3B0B6;
  font-size: 25px;
  line-height: 31px;
}

.custom-form-container {
  margin-top: 5rem;
}

.custom-form {
  background: green;
  padding: 60px 82px 60px 82px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 3px 6px -4px #000000;
  box-shadow: 0px 3px 6px -4px #000000;
}

.custom-form label {
  font-size: 25px;
  line-height: 32px;
  color: #F3B0B6;
  margin-left: 1rem;
}

.custom-form .btn {
  float: right;
  margin-top: 3rem;
  margin-right: -3rem;
  font-size: 25px;
  line-height: 32px;
  color: #F3B0B6;
  background: none;
}

.custom-form .form-control {
  height: 40px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.1);
}
<div class="container-fluid h-100 d-flex flex-column">
  <nav class="navbar navbar-light fixed-top">
    <a class="navbar-brand" href="#">
     <!-- SVG image code-->
      </a>
    <ul class="nav justify-content-end">
      <li class="nav-item">
        <a class="nav-link active" href="#">Updates</a>
      </li>
    </ul>
  </nav>
  <div class="MAIN-FORM row align-items-center flex-grow-1">
    <div class="col-6 mx-auto">
      <div class="custom-form mb-0">
        <form action="">
          <fieldset class="form-group">
            <label for="first_name">Name</label>
            <input type="text" class="form-control" id="name" name="name">
          </fieldset>
          <fieldset class="form-group">
            <label for="last_name">Email</label>
            <input type="text" class="form-control" id="email" name="email">
            <button type="submit" class="btn btn-submit">Subscribe</button>
          </fieldset>
        </form>
      </div>
    </div>
  </div>

  <footer class="mt-auto">
    <p class="float-left">2018 © Palungo</p>
    <div class="float-right">
      <ul class="list-inline">
        <li class="list-inline-item"><a href="#">News</a></li>
        <li class="list-inline-item"><a href="#">Coles</a></li>
      </ul>
    </div>
  </footer>

</div>

Answer №2

Begin by utilizing the margin-top selector to move the div downwards.

body,html {
  height: 100%;
  background:#333A4D;
}
.navbar{
  padding: 10px;
  background: #F3B0B6;
  height: 60px;
}
.row.align-items-center.flex-grow-1 {
    display: block;
    margin-top: 60px;
}
.nav-link{
  font-size: 25px;
  line-height: 32px;
  color: #F3B0B6;
}
.nav-item { margin-left: 1rem; }
.list-inline-item{ margin-left: 1rem; }
.jumbotron{ background: none; }
.text-border{
  display: block;
  height: 1px;
  border: 0;
  border-top: 4px solid #F3B0B6;
}
.lead{
  text-transform: uppercase;
  color: #F3B0B6;
  font-size: 25px;
  line-height: 31px;
}
.custom-form-container{margin-top: 5rem;}
.custom-form{
    background: green;
    padding: 60px 82px 60px 82px;
    border-radius: 10px;
    -webkit-box-shadow: 0px 3px 6px -4px #000000; 
    box-shadow: 0px 3px 6px -4px #000000;
}
  .custom-form label{
    font-size: 25px;
    line-height: 32px;
    color: #F3B0B6;
    margin-left: 1rem;
  }
  .custom-form .btn{
    float: right;
    margin-top: 3rem;
    margin-right: -3rem;
    font-size: 25px;
    line-height: 32px;
    color: #F3B0B6;
    background: none;
  }
  .custom-form .form-control{
    height: 40px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: rgba(0, 0, 0, 0.1);
  }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid h-100 d-flex flex-column">
        <nav class="navbar navbar-light fixed-top">
    <a class="navbar-brand" href="#">
      <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
    </a>
    <ul class="nav justify-content-end">
      <li class="nav-item">
        <a class="nav-link active" href="#">Updates</a>
      </li>
    </ul>
  </nav>
  <div class="row align-items-center flex-grow-1">
      <div class="col-md-6 col-sm-12 mx-auto">
          <div class="custom-form mb-0">
             <form action="">
          <fieldset class="form-group">
            <label for="first_name">Name</label>
            <input type="text" class="form-control" id="name" name="name">
          </fieldset>
          <fieldset class="form-group">
            <label for="last_name">Email</label>
            <input type="text" class="form-control" id="email" name="email">
            <button type="submit" class="btn btn-submit">Subscribe</button>    
          </fieldset>                                                 
        </form>
          </div>
      </div>
  </div>

   <footer class="mt-auto">
    <p class="float-left">2018 © Palungo</p>
      <div class="float-right">
        <ul class="list-inline">
          <li class="list-inline-item"><a href="#">News</a></li>
          <li class="list-inline-item"><a href="#">Coles</a></li>
        </ul>
      </div>
  </footer>

</div>

Answer №3

To resolve the issue, try adding a straightforward z-index: 999; to your navigation's CSS class. This solution works effectively unless you have already assigned a higher z-index to the elements overlapping with your navigation. In that case, ensure that your navigation bar has a higher value for its z-index.

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

Tips for disabling autofocus on textarea when it is initially created in Internet Explorer browser

By clicking a button, I can generate a new <textarea></textarea>. However, in Internet Explorer, the cursor automatically moves to the newly created text area. Is there a way to prevent this from happening? ...

javascriptjqueryhtmlcss

What is the process for adding an image to a scene using menu options?

I'm looking for assistance in loading an image into a scene upon clicking a menu option. Any guidance would be greatly appreciated. Please let me know if more information is required. Here's the method I've tried, which involves testing a v ...

javascripthtmlthree.js

Combining translate() and scale() transformations in HTML5 Canvas

I am really curious about how Canvas transformations actually work. Let's say I have a canvas with a circle drawn inside, and I want to scale the circle without moving its center point. My initial thought is: translate(-circle.x, -circle.y); scale(fa ...

javascripthtmlhtml5-canvas

Determine the closest parent using jQuery

When using jQuery, the closest function can be called to locate the nearest parent element. For instance, if there is an a within a li within a ul within a td within a table, determining whether the ul parent is closer than the table parent may not always ...

javascriptjqueryhtml

"Incorporating PHP, CSS, and HTML to handle large volumes of data with dynamic columns and

I have a large dataset of around 10,000 entries that I need to display on my website. I am hoping to implement filters so that only a few thousand entries will be shown at a time. Languages: HTML, PHP, CSS After considering different options, I came up w ...

phphtmlcssdynamic

What could be the reason behind the issue of my HTML draggable feature not functioning properly on touch

I've set up a draggable div with headers and p tags, but I'm encountering an issue when trying to run it on a touch screen. The div tag isn't draggable in this scenario. Can anyone suggest the best solution for making this page touch screen ...

javascriptjqueryhtml

dynamic color-changing feature on the menu

I have a navigation bar on my website with a set of sub-menus that appear when hovered over. I want to make the navigation bar change color dynamically each time it is hovered over. Additionally, I would like to add a range of colors to choose from. For ...

htmlcssmenucolorshover

Showing Stationary Pictures at Full Size in OpenLayers

I am trying to showcase static images as maps using a StaticImage layer in ol3, with the image size set at 100% in pixels. However, I am facing difficulty in ensuring that the displayed images are always the correct size based on the extent and zoom variab ...

javascriptcssimageopenlayers-3

Storing Data in Web Browsers: HTML5's localStorage, Cookies, and

After browsing through numerous search results on SO, it seems that HTML5's localStorage feature is particularly advantageous compared to Cookies for storing large amounts of data that doesn't need to be sent to the server. (Local Storage vs Cook ...

javascriptsqlhtmlcookieslocal-storage

Exploring the Relative Positioning of Two div Elements

Can anyone assist me with finding and comparing the positions of two '<div>' tags using an if statement? I stumbled upon a suggestion in my research, which goes like this: var obstacle = $('#obstacle').css('left', &apo ...

jquerycss

What could be causing the glitch in my Bootstrap 5.x dropdown and tooltip combination?

Whenever I hover over my icon, the tooltip is glitching and displays in the wrong place before getting stuck until I refresh the page. Check out my JSFiddle This is what I currently have implemented: HTML: <div class="dropdown"> <di ...

javascripthtmlcssbootstrap-5

In order to work with the optionSelectionChanges property of the MdSelect directive in Angular Material2, it

Within my application, there is a Material2 select dropdown widget containing several options. app.component.html <md-select placeholder="Choose an option" [(ngModel)]="myOption" (optionSelectionChanges)="setOptionValue(myOption)"> &l ...

htmlangulardrop-down-menuangular-material2

Aligning CSS items to flex-start prevents them from being centered

My flex container has justify-content: flex-start, but I want to center the items inside it. EDIT: For reference, I'd like it to resemble the video recommendations on the YouTube homepage. Here is my code that doesn't seem to be working as expe ...

htmlcss

Center align text in the uib-progressbar

Is it possible to center align text in the uib-progressbar? I attempted using position:absolute, but I would like to display a list of progress bars in a UI grid that includes scrollable content. The goal is for the text to remain fixed while the progress ...

cssangular-directiveangular-bootstrap

In JavaScript, attempting to trigger a click event on an element with a <ul> and <li id> and <a href>, but only after the <li id> has been selected

Apologies if this question is too basic, I've been struggling with it for some time... I am trying to trigger an <a href> from within a tag. I have found several methods to do so, however... the entire script is contained within a <ul>, ...

javascripthtml

Is there a way to display all of them inline in Woocommerce?

Can anyone assist with making each of these inline? https://i.sstatic.net/YF9bu.png <div class="atc_nsv"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <ul> <li><img class="ad lazyloaded" data-src="//cdn.shopif ...

javascriptphphtmlcsswoocommerce

How can I fix the alignment issue with my centered div?

My attempt to vertically align a centered inner DIV is not working as expected... What could be causing this issue? CSS Code: #page_bar { width: 100%; height: 30px; background-color: white } .page_bar { width: 800px; height: 30px; ...

htmlcssvertical-alignmentalignment

Identifying the precise image dimensions required by the browser

When using the picture tag with srcset, I can specify different image sources based on viewport widths. However, what I really need is to define image sources based on the actual width of the space the image occupies after the page has been rendered by th ...

javascripthtmlcss

Effective model synchronization in Angular UI when filtering applied between two lists

Currently, I am utilizing Sortable in AngularUI to handle multiple sortable lists. I have successfully set it up so that I can easily move items between the lists and update the respective models accordingly. However, when adding a query filter, I encounte ...

javascripthtmljquery-uiangularjsjquery-ui-sortable

Leveraging jQuery within an HTML framework, with node.js powering the backend

I'm relatively new to exploring the realms of jQuery and node.js, and I've encountered a puzzling issue that has occupied my thoughts for numerous hours. Despite diligently scouring StackOverflow and conducting extensive Google searches, I have y ...

jqueryhtmlnode.jsexpress