CODEWITHSUNDEEP
htmlcss
Rafi Hasan
Rafi Hasan

Reputation: 89

How to add a margin underneath the NavBar

I want to have it as if that under the navigation bar its white space for me to add other stuff. Essentially how do I add a cut-off point for how much the gray background extends to? Right now it's filling up the entire window. I want it to go a few pixels underneath all navbar. I have included a picture for reference. 

    </head>
        <body>
                <header>
                    <img class="logo" src="img/logo.svg" alt="logo">
                    <nav>
                            <ul class="nav__links">
                                    <li><a href="#">Projects</a></li>
                                    <li><a href="#">About</a></li>
                                    <li><a href="#">Contact</a></li>
                            </ul>
                    </nav>
                </header>
        <body>
</html>

CSS as follows enter image description here @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background-color: #24252A;

}

li, a{
  font-family: "Montserrat",sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #edf0f1;
  text-decoration: none;
}


header{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 30px 10%;

}

.logo{
  cursor: pointer;
  margin-right: auto;
  position: absolute;
    width: 320px;
    height: 100px;
    left: -10px;
}

nav{
  order: 1;
}

.nav__links{
  list-style: none;
}

.nav__links li{
  display: inline-block;
  padding: 0px 20px;
}

.nav__links li a{
    transition: all 0.3s ease 0s
}

.nav__links li a:hover{
  color: #17E5EC
}

Upvotes: 0

Views: 1399

Answers (2)

Manjuboyz
Manjuboyz

Reputation: 7056

Add either display:block; and height:50px; to .nav__links li a{....}. This will allow you to add an height for your element, since a is a inline element it won't consider height property so we have to make either block or inline-block so that it can accept the height property.

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

li,
a {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #edf0f1;
  text-decoration: none;
}

header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 30px 10%;
  background-color: #24252A;
}

.logo {
  cursor: pointer;
  margin-right: auto;
  position: absolute;
  width: 100px;
  height: 100px;
  left: -10px;
}

img {
  height: 50px;
  width: 50px;
}

nav {
  order: 1;
}

.nav__links {
  list-style: none;
}

.nav__links li {
  display: inline-block;
  padding: 0px 20px;
}

.nav__links li a {
  transition: all 0.3s ease 0s;
  display: block;
  height: 50px;
  width: 80px;
}

.nav__links li a:hover {
  color: #17E5EC
}
<body>
  <header>
    <img class="logo" src="http://placekitten.com/301/301" alt="logo">
    <nav>
      <ul class="nav__links">
        <li><a href="#">Projects</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

  </header>

  <body>

Upvotes: 1

user11147478
user11147478

Reputation:

You have to specify margin size and position for the navbar,

for example:- 

nav{
     margin-top: 25px
   }

also check where you specified the background color.

Upvotes: 0

Related Questions