CODEWITHSUNDEEP
htmlcssnavigationbar
Jack Sewell
Jack Sewell

Reputation: 109

Unable to add space above navigation bar

I'm trying to add a space above my navigation bar, however the code I'm using is failing to do so.

My CSS

.top-nav ul {
    text-align: right;
    width: 100%;
}
.top-nav  li {
    display:inline;
}
.top-nav a {
    padding-top: 40px;
}
.top-nav  ul a {
    color: #000;
    padding: 0 10px;
    text-decoration: none;
    font-size: 20px;
}
.top-nav  ul a:hover {
    color: #333;
}

A Fiddle

https://jsfiddle.net/xuk2nk46/

Upvotes: 1

Views: 807

Answers (6)

John Slegers
John Slegers

Reputation: 47081

Just add a margin to your .top-nav :

@import url(https://fonts.googleapis.com/css?family=Josefin+Sans);

*{
    padding: 0;
    margin: 0;
    font-family: 'Josefin Sans', sans-serif;
}

.top-nav {
    margin: 30px 0 0 0; /* ADD MARGIN HERE */
}

.top-nav ul {
    text-align: right;
    width: 100%;
}
.top-nav  li {
    display:inline;
}
.top-nav a {
    padding-top: 40px;
}
.top-nav  ul a {
    color: #000;
    padding: 0 10px;
    text-decoration: none;
    font-size: 20px;
}
.top-nav  ul a:hover {
    color: #333;
}
<nav class="top-nav">
    <ul>
       <li><a href="index.html">Home</a></li>
       <li><a href="index.html">Store</a></li>
       <li><a href="index.html">Blog</a></li>
       <li><a href="index.html" id="btn-special">Join Us</a></li>
    </ul>
</nav>

(see also this Fiddle)

Upvotes: 0

Nutshell
Nutshell

Reputation: 8537

By default <a> in an inline element. So padding with top and bottom values won't apply.

You have to change the default type by inline-block to add top and bottom padding on it.

Also, you can group this two properties .top-nav a and .top-nav ul a together like this : 

.top-nav ul li a {
    display: inline-block;
    color: #000;
    padding: 20px 10px;
    text-decoration: none;
    font-size: 20px;
}

And then, you can set top and bottom padding values with this property : padding: 20px 10px; or use margin property like this margin: 20px 10px;

Upvotes: 0

The Codesee
The Codesee

Reputation: 3783

Try adding margin-top to .top-nav:

.top-nav {
   margin-top: 20px;
}

Margin adds a space outside the element, while padding adds a space inside the element.

Upvotes: 0

ElaViolet
ElaViolet

Reputation: 163

.top-nav {
  padding-top: 40px;
}

Upvotes: 1

Elias Ghali
Elias Ghali

Reputation: 853

.top-nav{
margin-top: 10px;
}

and remove the padding , or keep only one.

Upvotes: 0

Priya Gupta
Priya Gupta

Reputation: 31

u have given two values to top-padding 

.top-nav a {
    padding-top: 40px;
}

and .

top-nav  ul a {
    color: #000;
    padding: 0 10px;}

the second one is applied which is 0 px

Upvotes: 0

Related Questions