I'm having a problem with my main site navigation. I've made some changes to my easy slider that is on the same page, and the top nav seems to have adopted this. Is supposed to show:

#nav a{
    display:block;
    color: #474747;
    text-transform: none;
    font-size: 13px;
    text-decoration: none;
    background: none;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-right: 15px;
    padding-left: 15px;
}
#nav a:hover{
    color: #62A2FF;
    background-color: #3a3a3a;
}

Yet it only shows the box padding on the sides, not on the top like its supposed to. I know there is something within the screen.css file for the easyslider that is causing this, but I can't figure it out, any thoughts? It can be viewed at: [Click Here](http://mgndesign.com/)

Recommended Answers

@mgn2683

Yet it only shows the box padding on the sides, not on the top like its supposed to. I know there is something within the screen.css file for the easyslider that is causing this, but I can't figure it out, any thoughts?

The link doesn't work. Do …

Jump to Post

I've had a go at fixing it, and Ive found the solution! try this css:

#nav a {
    display: block;
    color: #474747;
    text-transform: none;
    font-size: 13px;
    text-decoration: none;
    background: none;
    padding-top: 15px;
    height: 20px;
    padding-bottom: 0px;
    padding-right: 15px;
    padding-left: 15px;
}
#nav {
    list-style: none;
    text-decoration: bold;
    margin-top: 30px; …
Jump to Post

All 6 Replies

Member Avatar

@mgn2683

Yet it only shows the box padding on the sides, not on the top like its supposed to. I know there is something within the screen.css file for the easyslider that is causing this, but I can't figure it out, any thoughts?

The link doesn't work. Do you have a image of the website? Just take the picture of the website and save it as a png or jpg and upload it on to Daniweb.

So we can see what you are talking about.

Picture_6

So the navigation on rollover has the background color & padding on left/right, but not on top & botom as I specified in css above.

I think it is stemming from the css file for the screen.css file for the easyslider that is overruling this. Any thoughts, I greatly appreciate it!

Click Here

Member Avatar

So the navigation on rollover has the background color & padding on left/right, but not on top & botom as I specified in css above.

So this is your nav bar:

<ul id="nav">
<li><a href="http://mgndesign.com/about.htm" title="About Us">ABOUT US</a></li>
<li><a href="http://mgndesign.com/services/" title="Services">SERVICES</a>
<ul>
<li><a href="http://mgndesign.com/services/web-design/" title="Web Design">WEB DESIGN</a></li>
<li><a href="http://mgndesign.com/services/graphic-design/" title="Graphic Design">GRAPHIC DESIGN</a></li>
<li><a href="http://mgndesign.com/services/branding-solutions/" title="Branding Solutions">BRANDING SOLUTIONS</a></li>
<li><a href="http://mgndesign.com/services/search-engine-optimization/" title="Search Engine Optimization">SEARCH ENGINE OPTIMIZATION</a></li>
</ul>
</li>
<li><a href="http://mgndesign.com/portfolio/" title="Portfolio">PORTFOLIO</a></li>
<li><a href="http://mgndesign.com/testimonials.htm" title="Testimonials">TESTIMONIALS</a></li>
<li><a href="http://mgndesign.com/contact.htm" title="Contact">CONTACT</a></li>
</ul>

Try to do this:

#nav a{
display:inline-block;
color: #474747;
text-transform: none;
font-size: 13px;
text-decoration: none;
background: none;
padding:7px 15px;
}
#nav a:hover{
color: #62A2FF;
background-color: #3a3a3a;
}

I've had a go at fixing it, and Ive found the solution! try this css:

#nav a {
    display: block;
    color: #474747;
    text-transform: none;
    font-size: 13px;
    text-decoration: none;
    background: none;
    padding-top: 15px;
    height: 20px;
    padding-bottom: 0px;
    padding-right: 15px;
    padding-left: 15px;
}
#nav {
    list-style: none;
    text-decoration: bold;
    margin-top: 30px;
    padding-right: 20px;
    letter-spacing: .5px;
    font-family: Geneva, Sans-Serif;
    font-size: 13px;
    background: none;
    float: right;
}

Hope it works!!

commented: Nice Work! +9

That was it mattster! Thanks so much for the help!

no worries at all - glad to have been a help :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.20 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.