Photoshop Question posted in
The official user guide can be found here.

Make nav bar with just border lines – Photoshop

So, I am very new to html, so I am sorry if this is a noob question, but I want to make a website based off of this concept art I threw together on Photoshop. I know how to make a nav bar, but do not know how to make it so it just has outlines around the items as shown. What would my code look like, so it does not have any background or outline on the top. Thank you!

Website Concept
enter image description here

Tags:

4

Answers


  1. 0

    The correct way to do this is with the border rules. Here is their documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/border

    Login or Signup to reply.
  2. 0

    You can add a bottom border to the navbar, and put a right border to each of the individual links. Your code will look something like this:

    body {
  background-color: black;
}

.nav-container {
  border-bottom: 1px solid #00933d;
  padding: 8px;
}
.nav-item {
  color: white;
  size: 14pt;
  padding: 10px 30px;
  border-right: 1px solid #00933d;
}
    <nav class="nav-container">
  <span class="nav-item">HOME</span>
  <span class="nav-item">CONTACT</span>
</nav>

    This should give you some basic idea, and you can customise further on it.

    Login or Signup to reply.
  3. 0

    I’d use border-bottom and border-right for links, then remove border-right from the last link using pseudo-class last-child. For rounded corners you can use border-radius property.

    Useful links:

    .navbar {
    background-color: #121212;
    width: 100%;
    height: 100px;
    display: table;
    table-layout: fixed;
}
.navcell {
    display: table-cell;
    color: #fff;
    font-family: sans-serif;
    text-align: center;
    vertical-align: middle;
}
.navcell span {
    width: 100%;
    height: 20px;
    border-bottom: 1px solid #2c6133;
    border-right: 1px solid #2c6133;
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.navcell:last-child span {
    border-right: none;
}
.navactive span {
    border:none;
    background-color: #2c6133;
    height: 45px;
    padding: 13px;
    border-radius: 10px;
}
.navcell span:hover {
    color: #fff267;
    cursor: pointer;
}
    <div class="navbar">
    <div class="navcell navactive"><span>JOIN NOW</span></div>
    <div class="navcell"><span>HOME</span></div>
    <div class="navcell"><span>CONTACT</span></div>
    <div class="navcell"><span>ABOUT US</span></div>
    <div class="navcell"><span>PORTFOLIOS</span></div>
    <div class="navcell"><span></span></div>
</div>
    Login or Signup to reply.
  4. 0

    Something like this?

    CSS:

    body {background-color: #000000; padding: 0; margin: 0;;}
.btn1  {color: #FFFFFF; background-color: #347235; padding: 10px 35px; border-radius: 10px;}
.nav  {margin-top: 45px;}
#bot  { border-bottom: 2px solid #347235;}
a  {text-decoration: none; color: #FFFFFF; padding-right: 40px; padding-left: 40px; border-right: 2px solid #347235;}

    HTML:

    <div class="nav">
<span id="bot"><a class="btn1" href="#">JOIN NOW</a> <a href="#">HOME</a> <a href="#">CONTACT</a> <a href="#">ABOUT US</a> <a href="#">PORTFOLIOS</a></span>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search