Jump to content
Killersites Forums

Navigation Bar


looking2learn
 Share

Recommended Posts

Hi Guys,

 

 

 

Beginner so any pointers very helpful

 

Currently having problems with my navigation bar, its leaving space above and to the right of the bar itself, so basically the background color of the bar is of the body instead of the wrapper, i'm also finding it hard to have the bar neatly in the center of the page as appose to either the left or the right, please see below for a link to code pen show ing my page:

 

http://cdpn.io/tblDm

 

Please click edit at the bottom to see the html and css, any pointer to make the Navigation fit would be very helpful!

 

Kr

 

Joshua

Link to comment
Share on other sites

#wrapper {

width: 900px;

margin:0 auto;

background:#FFF;

}

 

 

#header{height: 100%;}

 

 

#navigation ul{height:100%;}

 

#navigation ul li{

float:left;

list-style-type: none;

}

 

#navigation ul li a{

position:relative;

left:145px;

display:block;

padding: 8px 20px;

text-decoration: none;

font-family: aerial;

font-weight: bold;

font-size: 14px;

color: grey;

border: 1px solid #BBBBBB;

background: white;

}

 

the above code is what I changed in your CSS. It removed the space between your header and nav bar and it centered your nav bar. I hope that helps.

Link to comment
Share on other sites

  • 5 weeks later...

Hi Guys,

 

 

 

Beginner so any pointers very helpful

 

Currently having problems with my navigation bar, its leaving space above and to the right of the bar itself, so basically the background color of the bar is of the body instead of the wrapper, i'm also finding it hard to have the bar neatly in the center of the page as appose to either the left or the right, please see below for a link to code pen show ing my page:

 

http://cdpn.io/tblDm

 

Please click edit at the bottom to see the html and css, any pointer to make the Navigation fit would be very helpful!

 

Kr

 

Joshua

 

Add this to your CSS

 

#navigation ul {

margin-top: 0px;

}

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...