0

I have this space between the image and the navbar. I have tried using margin-bottom:0 to navbar and image to display: block; but it isn't going away. I want to get rid of space between the image and my navbar how can I do it? You can also see the code snippet of the navbar and under that the image code.

As you can see in the image attached.

.navbar {
  background-color: #ffffff;
  background-image: linear-gradient(135deg, #ffffff 0%, #ffc6c8 33%, #ffffff 66%, #ffc6c7 100%);
  margin-bottom: 0px;
}

.navbar-default {
  margin: 0;
}
<!--   Nav bar--------------------------------------------------------------------------------------------------------->
<section id="navigationBar">
  <nav class="navbar navbar-expand-lg  p-1.5" id="navbar">
    <a class="navbar-brand ml-5" id="navbar-brand" href="">
      <!--                <i class="fas fa-ice-cream nav-icon" style=" font-size: 35px;"></i>-->
      Recipe Pallate
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mx-auto simple-transition">
        <li class="nav-item " id="nav-item">
          <a class="nav-link" id="nav-link" href="#container">
                            Ingredients
                        </a>
        </li>
        <li class="nav-item " id="nav-item">
          <a class="nav-link" id="nav-link" href="#recipe">
                            Recipe
                        </a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            More Recipes
                        </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Vanilla</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Gellato</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Creamy</a>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</section>
<!--   Nav bar----------------------------------------------------------------------------------------------------------->

<section id="hero">
  <img src="photos/Creamy.jpg" width="84.7%" height="610" style="position: absolute;  z-index:0; display:block; margin-top:0px">
corn on the cob
  • 2,093
  • 3
  • 18
  • 29
Parul Sharma
  • 1
  • 1

3 Answers3

0

you should append padding:0; and box-sizing:border-box;like this:

*{
  padding:0;
  box-sizing:border-box;
}

if it is not working for you, you can using padding-top for your items navigation

nav ul li a{
  padding-top:size number
}
onehamed
  • 127
  • 9
0

It was your UL that needed to be reset

ul { padding: 0; margin: 0; }

or use a reset CSS

html, body { padding:0; margin:0 }
.navbar {
  background-color: #ffffff;
  background-image: linear-gradient(135deg, #ffffff 0%, #ffc6c8 33%, #ffffff 66%, #ffc6c7 100%);
  margin-bottom: 0px;
}

.navbar-default {
  margin: 0;
}

ul { padding: 0; margin: 0; }
<!--   Nav bar--------------------------------------------------------------------------------------------------------->
<section id="navigationBar">
  <nav class="navbar navbar-expand-lg  p-1.5" id="navbar">
    <a class="navbar-brand ml-5" id="navbar-brand" href="">
      <!--                <i class="fas fa-ice-cream nav-icon" style=" font-size: 35px;"></i>-->
      Recipe Pallate
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mx-auto simple-transition">
        <li class="nav-item " id="nav-item">
          <a class="nav-link" id="nav-link" href="#container">
                            Ingredients
                        </a>
        </li>
        <li class="nav-item " id="nav-item">
          <a class="nav-link" id="nav-link" href="#recipe">
                            Recipe
                        </a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            More Recipes
                        </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Vanilla</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Gellato</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Creamy</a>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</section>
<!--   Nav bar----------------------------------------------------------------------------------------------------------->

<section id="hero">
  <img src="photos/Creamy.jpg" width="84.7%" height="610" style="position: absolute;  z-index:0; display:block; margin-top:0px">
mplungjan
  • 169,008
  • 28
  • 173
  • 236
-1

To solve such problems you should use the inspect functionality of the browser and check for paddings and other pseudo-elements that may cause this. My hunch tells me that there is either a padding that adds this space, or the image/section may have a margin/padding that may cause that.

PS, it would help a lot if you could reproduce this on codesandbox.io or similar

Tasos
  • 1,880
  • 13
  • 19