CODEWITHSUNDEEP
htmlcss
Jason
Jason

Reputation: 209

Having an offset link on a nav that still functions with the nav

I have a standard nav that I want center aligned like so:

body {
  background: silver;
}
nav {
  text-align: center;
  padding: 3px 0;
  margin: 5px 0 0 5px;
}
nav ul {
  list-style: none;
  margin: 0 30px;
  padding: 2px 20px 0 0;
  position: relative;
}
nav li {
  display: inline-block;
  font-size: 1.5em;
}
nav a {
  font-weight: 800;
  color: #fff;
  padding: 2px 10px 2px;
  text-transform: uppercase;
  text-decoration: none;
}
nav a:active {
  color: #00A2E0;
}
nav a {
  color: #fff;
}
nav a.selected,
nav a:hover {
  color: #23c3ff;
}
<nav>
  <ul>
    <li><a href="index.html">Portfolio</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="resume.html">Resume</a></li>
    <li><a href="contact.html" class="selected">Contact</a></li>
  </ul>
</nav>

The code works just fine in all window sizes. But I want another list item, feed, on the nav that attaches itself to the same behavior as the rest of the list items, but is spaced to the right of Portfolio, about, resume and contact. So:

Portfolio About Resume Contact Feed

Since my nav is set to center, if I add Feed to nav and float the single list item, the wntire list will align center with feed attached and will look out of center. In other words, I still want the first 4 items in the list to align center, feed to be floated to the right, but also want feed to move with the list as the screen sizes down.

Giving feed sbsolute positioning works in a maximum window, but when the screen size becomes smaller then feed will eventually overlap the rest of the nav elements.

I also tried:

body {
  background: silver;
}
nav {
  text-align: center;
  padding: 3px 0;
  margin: 5px 0 0 5px;
}
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}
.clearfix:after {
  clear: both;
}
.feed {
  float: right;
  right: 20px;
  z-index: 30;
}
/*
#feed{
  position: absolute;
  right: 40px;
}*/

nav ul {
  list-style: none;
  margin: 0 30px;
  padding: 2px 20px 0 0;
  position: relative;
}
nav li {
  display: inline-block;
  font-size: 1.5em;
}
nav a {
  font-weight: 800;
  color: #fff;
  padding: 2px 10px 2px;
  text-transform: uppercase;
  text-decoration: none;
}
nav a:active {
  color: #00A2E0;
}
nav a {
  color: #fff;
}
nav a.selected,
nav a:hover {
  color: #23c3ff;
}
<nav class="clearfix">
  <div class="feed">
    <ul>
      <li><a href="feed.html">feed</a></li>
    </ul>
  </div>
  <ul>
    <li><a href="index.html" class="selected">Portfolio</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="resume.html">Resume</a></li>
    <li><a href="contact.html">Contact</a></li>
    <!-- <li id = "feed"><a href="feed.html">bucket feed</a></li> -->
  </ul>
</nav>

and that works the best, but the div associated with feed only allows me to click it (the associated anchor link it seems) in a 1 pixel opening right below the text itself. The rest seems to be overlap from the ul and the nav which is 'covering' the rest of the clickable area. Sorry for the lengthy post, but thanks for any help you might have!

Upvotes: 2

Views: 55

Answers (1)

Stickers
Stickers

Reputation: 78686

I would use media queries to do it, set up a reasonable breaking point, and change the absolute positioned Feed item back to static.

http://jsfiddle.net/3Lvj1pfc/

<nav class="clearfix">
    <ul>
        <li><a href="index.html" class="selected">Portfolio</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="resume.html">Resume</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li class="feed"><a href="feed.html">Feed</a></li>
    </ul>
</nav>

nav ul {
    position: relative;
}
nav .feed {
    position: absolute;
    right: 20px;
}
@media (max-width: 800px) {
    nav .feed {
        position: static;
    }
}


body {
    background: silver;
}
.clearfix {
    *zoom: 1;
}
.clearfix:before, .clearfix:after {
    display: table;
    line-height: 0;
    content:"";
}
.clearfix:after {
    clear: both;
}
nav {
    text-align: center;
    padding: 3px 0;
    margin: 0;
    font-family: sans-serif;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
nav li {
    display: inline-block;
    font-size: 1.5em;
}
nav .feed {
    position: absolute;
    right: 20px;
}
nav a {
    font-weight: 800;
    color: #fff;
    padding: 2px 10px 2px;
    text-transform: uppercase;
    text-decoration: none;
}
nav a:active {
    color: #00A2E0;
}
nav a {
    color: #fff;
}
nav a.selected, nav a:hover {
    color: #23c3ff;
}
@media (max-width: 800px) {
    nav .feed {
        position: static;
    }
}
<nav class="clearfix">
    <ul>
        <li><a href="index.html" class="selected">Portfolio</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="resume.html">Resume</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li class="feed"><a href="feed.html">Feed</a></li>
    </ul>
</nav>

Upvotes: 1

Related Questions