Vertical Navigation issue - Photoshop

Shuuya
July 26, 2015
224 views
2 votes
4 Answers

So the navigation bar is meant to be the height of the page and is fixed, so will always show, even when the user scrolls down the page.
However my .nav is currently looking like this

Help would be greatly appreciated. Also, when creating a responsive website, what should the image size be? Like when creating the image on Photoshop, how large should the canvas be the ensure the image isn’t blurry?

HTML and CSS is as follows

.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 25%;
  position: fixed;
  top: -15px;
  left: -10px;
}
.nav li a {
  display: block;
  background-color: #232121;
  /*padding-bottom: 73.5px;*/
  padding-left: 25px;
  /*padding-top: 20px;*/
  text-decoration: none;
  color: white;
  font-weight: 600;
  letter-spacing: 2px;
}
.nav li a:hover {
  color: #00b4ff;
  text-decoration: none;
}
.sub-nav {
  list-style-type: none;
  background-color: #232121;
  color: white;
}
.sub-nav li a {
  font-weight: 400;
  letter-spacing: 1px;
}
.sub-nav li a:hover {
  color: #00b4ff;
  text-decoration: none;
  font-weight: 400;
}

<ul class="nav">
  <li>
    <a href="index.html">
      <img src="logo1.jpg" alt="logo" class="logo">
    </a>
  </li>
  <li><a href="index.html">HOME</a>
  </li>
  <li><a href="about.html">ABOUT</a>
  </li>
  <li><a href="products.html">PRODUCTS</a>
  </li>
  <li><a href="salesandmotivation.html">SALES AND MOTIVATION</a>
    <ul class="sub-nav">
      <li><a href="salessuccess.html">SALES SUCCESS</a>
      </li>
      <li><a href="motivation.html">MOTIVATION</a>
      </li>
    </ul>
  </li>
  <li><a href="propertyinvestment.html">PROPERTY INVESTMENT</a>
    <ul class="sub-nav">
      <li><a href="listings.html">CURRENT LISTINGS</a>
      </li>
      <li><a href="testimonials.html">TESTIMONIALS</a>
      </li>
    </ul>
  </li>
  <li><a href="contact.html">CONTACT</a>
    <ul class="sub-nav">
      <li><a href="salessuccess.html">SUBSCRIBE</a>
      </li>
    </ul>
  </li>
  <li><a href="index.html">CONNECT</a>
  </li>
  <li>
    <a href="facebook.com">
      <img src="facebook.jpg" alt="facebook" class="facebook">
    </a>
  </li>
  <li>
    <a href="twitter.com">
      <img src="twitter.jpg" alt="twitter" class="twitter">
    </a>
  </li>
  <li>
    <a href="linkedin.com">
      <img src="linkedin.jpg" alt="linkedin" class="linkedin">
    </a>
  </li>
</ul>

Tags: css html

Answers

you are having your background-color: #232121 in your .nav li a just changed to your .nav and your .nav was set top:-15px, I changed for top:0

SNIPPET:

.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 25%;
  position: fixed;
  top: 0;
  left: -10px;
  background-color: #232121;
}
.nav li a {
  display: block;
  /*padding-bottom: 73.5px;*/
  padding: 0 25px;
  /*padding-top: 20px;*/
  text-decoration: none;
  color: white;
  font-weight: 600;
  letter-spacing: 2px;
}
.nav li a:hover {
  color: #00b4ff;
  text-decoration: none;
}
.nav li a img {
  max-width: 100%
}
.sub-nav {
  list-style-type: none;
  background-color: #232121;
  color: white;
}
.sub-nav li a {
  font-weight: 400;
  letter-spacing: 1px;
}
.sub-nav li a:hover {
  color: #00b4ff;
  text-decoration: none;
  font-weight: 400;
}

<ul class="nav">
  <li>
    <a href="index.html">
      <img src="//lorempixel.com/300/300" alt="logo" class="logo">
    </a>
  </li>
  <li><a href="index.html">HOME</a>
  </li>
  <li><a href="about.html">ABOUT</a>
  </li>
  <li><a href="products.html">PRODUCTS</a>
  </li>
  <li><a href="salesandmotivation.html">SALES AND MOTIVATION</a>
    <ul class="sub-nav">
      <li><a href="salessuccess.html">SALES SUCCESS</a>
      </li>
      <li><a href="motivation.html">MOTIVATION</a>
      </li>
    </ul>
  </li>
  <li><a href="propertyinvestment.html">PROPERTY INVESTMENT</a>
    <ul class="sub-nav">
      <li><a href="listings.html">CURRENT LISTINGS</a>
      </li>
      <li><a href="testimonials.html">TESTIMONIALS</a>
      </li>
    </ul>
  </li>
  <li><a href="contact.html">CONTACT</a>
    <ul class="sub-nav">
      <li><a href="salessuccess.html">SUBSCRIBE</a>
      </li>
    </ul>
  </li>
  <li><a href="index.html">CONNECT</a>
  </li>
  <li>
    <a href="facebook.com">
      <img src="facebook.jpg" alt="facebook" class="facebook">
    </a>
  </li>
  <li>
    <a href="twitter.com">
      <img src="twitter.jpg" alt="twitter" class="twitter">
    </a>
  </li>
  <li>
    <a href="linkedin.com">
      <img src="linkedin.jpg" alt="linkedin" class="linkedin">
    </a>
  </li>
</ul>

- justinw
- July 26, 2015 at 6:40 am
- 0 votes
0
We could use a bit more code, to figure what is going on with your particular website; just pasting the nav code isn’t very helpful.

That being said, let’s keep things simple. This how you create a basic fixed sidebar nav. Obviously a lot depends on your specific code, but since we don’t have that, we can only guess what’s going on and I’m guessing you didn’t set height to 100% on the nav‘s parent element and upstream to the other parents or body.

If you supply more details, perhaps we can elaborate as to what is going on.
body { height: 100%; position: relative; margin: 0; } main { background: red; height: 1000px; padding-left: 100px; } aside { background: lightblue; height: 100%; position: fixed; top: 0; left: 0; width: 100px; }

<aside> links here </aside> <main> this is your main content </main>
Login or Signup to reply.

Actually, the .nav is having 100% height now, but the problem is that it doesn’t have the background color. You should set background-color: #232121; to .nav too.
As of the cropped words, you have to give the div a width to make sure the words would not be out of boundary.

.nav {
      background-color: #232121;
      height: 100%;
      width: 225px;
      position: fixed;
      top: 0;
      left: -10px;
      list-style-type: none;
      margin: 0;
      padding: 0;
      background-color: #232121;
}
        
.nav li a {
      display: block;
      background-color: #232121;
      width: 200px;
      /*padding-bottom: 73.5px;*/
      padding-left: 25px;
      /*padding-top: 20px;*/
      text-decoration: none;
      color: white;
      font-weight:600;
      letter-spacing: 2px;
}
        
.nav li a:hover {
      color: #00b4ff;
      text-decoration: none;            
}
        
.sub-nav {
      list-style-type: none;
      background-color: #232121;
      color: white;	
}
         
.sub-nav li a {
      font-weight: 400;
      letter-spacing: 1px;
      padding: 0;
      width: 185px;
}
          
.sub-nav li a:hover {
      color: #00b4ff;
      text-decoration: none;
      font-weight: 400;
}

 <ul class="nav">
        <li><a href="index.html"><img src="logo1.jpg" alt="logo" class="logo"></a></li>
        <li><a href="index.html">HOME</a></li>
        <li><a href="about.html">ABOUT</a></li>
        <li><a href="products.html">PRODUCTS</a></li>
        <li><a href="salesandmotivation.html">SALES AND MOTIVATION</a>
            <ul class="sub-nav"> 
                <li><a href="salessuccess.html">SALES SUCCESS</a></li> 
                    <li><a href="motivation.html">MOTIVATION</a></li>
            </ul>
        </li>
        <li><a href="propertyinvestment.html">PROPERTY INVESTMENT</a>
            <ul class="sub-nav"> 
                <li><a href="listings.html">CURRENT LISTINGS</a></li> 
                    <li><a href="testimonials.html">TESTIMONIALS</a></li>
            </ul>
        </li>
        <li><a href="contact.html">CONTACT</a>
            <ul class="sub-nav"> 
                <li><a href="salessuccess.html">SUBSCRIBE</a></li> 
            </ul>
        </li>
        <li><a href="index.html">CONNECT</a></li>
        <li><a href="facebook.com"><img src="facebook.jpg" alt="facebook" class="facebook"></a></li>
        <li><a href="twitter.com"><img src="twitter.jpg" alt="twitter" class="twitter"></a></li>
        <li><a href="linkedin.com"><img src="linkedin.jpg" alt="linkedin" class="linkedin"></a></li>
</ul>

edit your Css like:

.nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    height: 100px;
    width: 100%;
    position: fixed;
    left: -10px;
    /*border: 1px solid red;*/
}
.nav li
{
    display: inline;
}
.nav li a {
    background-color: #232121;
    /*padding-bottom: 73.5px;*/
    padding-left: 25px;
    /*padding-top: 20px;*/
    text-decoration: none;
    color: white;
    font-weight:600;
    letter-spacing: 2px;
}

And html file to :

    <!DOCTYPE html>
<html>
<head>
    <title>Learning Input</title>
    <link rel="stylesheet" href="style.css">
</head> 

<body>
    <ul class="nav">
        <li><a href="index.html"><img src="logo1.jpg" alt="logo" class="logo"></a></li>
        <li><a href="index.html">HOME</a></li>
        <li><a href="about.html">ABOUT</a></li>
        <li><a href="products.html">PRODUCTS</a></li>
        <li><a href="salesandmotivation.html">SALES AND MOTIVATION</a>
            <!-- <ul class="sub-nav"> 
                <li><a href="salessuccess.html">SALES SUCCESS</a></li> 
                <li><a href="motivation.html">MOTIVATION</a></li>
            </ul> -->
        </li>
        <li><a href="propertyinvestment.html">PROPERTY INVESTMENT</a>
            <!-- <ul class="sub-nav"> 
                <li><a href="listings.html">CURRENT LISTINGS</a></li> 
                <li><a href="testimonials.html">TESTIMONIALS</a></li>
            </ul> -->
        </li>
        <li><a href="contact.html">CONTACT</a>
            <!-- <ul class="sub-nav"> 
                <li><a href="salessuccess.html">SUBSCRIBE</a></li> 
            </ul> -->
        </li>
        <li><a href="index.html">CONNECT</a></li>
        <li><a href="facebook.com"><img src="facebook.jpg" alt="facebook" class="facebook"></a></li>
        <li><a href="twitter.com"><img src="twitter.jpg" alt="twitter" class="twitter"></a></li>
        <li><a href="linkedin.com"><img src="linkedin.jpg" alt="linkedin" class="linkedin"></a></li>
    </ul>
</body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Vertical Navigation issue – Photoshop

Answers