How to change part of the border color

#1

Here’s a sample navigation menu:

nav {
  border-top: 5px solid;
}

nav a {
  font-size: 12px;
  padding: 1em;
}
<nav>
  <a href="#">Page 1</a>
  <a href="#" id="current">Page 2</a>
  <a href="#">Page 3</a>
  <a href="#">Page 4</a>
</nav>

DEMO

How can I change the part of the border color above the current page so it looks like this:

enter image description here

#3

Hi Rain_Lover! As always, there are different ways depending the circumstances. :slight_smile:

For example:
The “current” link could either overlap the default nav border, or the default border could instead be on the link and just change the “current” border color.

In the first example the link could get a “current” colored border overlapping the nav border by a negative top margin. Could also be a pseudo element instead of a border.

In the second example the default border is on the links, and the “current” just changes the border color.

If you want to remove the space between the inline links you could simply set the nav to flex display. Again, there are more ways to do that too, like make the links table-cells in the latter example.

:slight_smile:

1 Like
#4

Thanks for sharing your ideas! Would you mind providing some demos as well?

#5

Erik_J provided a couple of very sound suggestions.

Why don’t you give it a try and post a working page where you run into problems. The code in your Fiddle is rather sparce. You’ve been around a long time to be asking for such basic “do it for me” code. You may want to take an up-to-date HTML and CSS course.

2 Likes
#6

Hi there Rain_Lover,

here is one very simple example…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">

body {
    font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

#nav {
    text-align: center;
 }

#nav ul {
    display: inline-block;
    padding: 0;
    margin: 0;
    list-style: none;
    border-top: 0.4em solid #dbdde0;
    background-color: #fff;
    text-align: center;
 }
#nav ul li {
    display:inline-block;
 }

#nav ul a {
    position: relative;
    display: block;
    padding: 2em 1em;
    background-color: transparent;
    color: #666;
    text-decoration: none;
    text-transform: uppercase;
    transition: 1s ease-in-out;
 }

#nav ul a::before {
    position: absolute;
    width: 100%;
    top: -0.4em;
    left: 0;
    border-top: 0.4em solid transparent;
    content: '';
    transition: 1s ease-in-out;
 }

#nav ul a:hover,
#nav ul a:active {
    background-color: #f6f7f8;
    color: #000;
 }

#nav ul a:hover::before,
#nav ul a:active::before {
    border-top: 0.4em solid #bbc2ce;
 }
</style>

</head>
<body> 

 <div id="nav">
  <ul>
   <li><a href="#">link one</a></li>
   <li><a href="#">link six</a></li>
   <li><a href="#">link ninety nine</a></li>
   <li><a href="#">link twenty</a></li>
  </ul>
 </div>

</body>
</html>

coothead

4 Likes
#7

Dear ronpat,

You have a good point, but don’t look at a thread/post only from the OP’s point of view. It will be like an educational article for future readers many of which are not good at coding. We ourselves, admittedly, have learned many things simply by reading such questions. I believe that anyone contributing to a coding forum, both askers and answerers, should provide ideas with snippets and demos to enrich posts and for the sake of clarity and educational value for present and future readers. Sharing ideas is good, showing how to put ideas into practice is great!

Anyway, now I know three ways to achieve that effect. Let me share them:

Negative margin: Thanks @Erik_J

nav {
  border-top: 5px solid;
}

nav a {
  font-size: 12px;
  padding: 1em;
  display: inline-block;
}
a#current {
  border-top: 5px solid red;
  margin-top: -5px;
}

Positioning: Thanks @coothead (simplified version)

nav {
  border-top: 5px solid;
}

nav a {
  font-size: 12px;
  padding: 1em;
  display: inline-block;
  position: relative;
  top: -5px;
}
a#current {
  border-top: 5px solid red;
}

Table display

nav {
  border-top: 5px solid;
  display: table;
  border-collapse: collapse;
}

nav a {
  font-size: 12px;
  padding: 1em;
  display: table-cell;
}
a#current {
  border-top: 5px solid red;
}
1 Like
#8

Four!

https://codepen.io/paulobrien/pen/LvqvNg

:slight_smile:

5 Likes
#9

Your demo and the image I posted are identical twins! :ok_hand::heart:

#10

That’s a very good point.

How can I change the part of the border color above the current page…

For clarity I would like to point out that placing the default border on the link’s parent instead of the links them selves is not the common choice IMHO. Your case is different in that it visually combines the current link border with its parent border.

In the twin demo @PaulOB posted, you can remove one of the two default borders and still have the current link effect. In his demo you can choose if you want the default border on the links or on their parent.

1 Like
#11

@Rain_Lover, I’m not at all sure what you intended to say because your post didn’t support your assertions, so please let me clarify my 2 points:

I looked at your post from the point of view of anyone who might be reading it from newbies through the volunteers here. It rendered quite differently from the image that you posted. Your request for assistance was not commensurate with your years of experience here.

Our posting guideline do not ask people to post snippits. We define, demonstrate and request a (1) “working page” or a (2) CodePen or a (3) Fiddle or a (4) link to your test site in that order of preference. A working page is preferred because with it we should be able to see what you see and how the code is written including the HTML and resource links in the head of the page. The working page gives us a complete picture of how your page is constructed and helps us answer your menu question most efficiently and even offer several choices if they are available. A clear verbal description of the problem is essential and sometimes a sceen shot or two can be helpful. Code should be validated before posting because invalid code cannot be assured to work consistently across the majority of devices.

Isolated snippits of HTML or CSS do not demonstrate your page and do not offer a suitable foundation about your intent. We often need to exchange several posts trying to glean the parameters of the request and often resort to guesses before we arrive at a satisfactory solution.

We expect members to have a plan in mind before posting and we help them get through their stumbling blocks. There are many courses available on the internet and in community colleges to coders who wish to expand their knowledge.

Your response to my post is puzzling because once again you posted isolated CSS without HTML. “Snippits” for which a reader is required to assume the corresponding HTML and who has no knowledge of the actual layout of your page or even whether it is responsive or not.

@coothead provided a “working page” that anyone at any level can read and use and @PaulOB posted a complete “CodePen”.

Please post working pages demonstrating your code so we can see what you see. Please explain the issue clearly. Do not leave others to assume unknowns about your layout. If you use Bootstrap or another framework, do include the links to the version of the framework that you are using, etc.

Help us help you. Doing that helps everyone else get the most out of your question and helps us provide an effective solution efficiently.

3 Likes
#12

I wonder what a:active does in your demo when you already have the :hover pseudo class. Is it OK if I remove it?

#13

It does nothing :slight_smile: but there was meant to be a :focus style in there also as we shouldn’t forget keyboard users.

You can style active and focus differently if you want just using the same technique.

If you want yet another way to do what you want you can change the box shadow to a vertical linear gradient for the same effect.

Updated demo :slight_smile:

https://codepen.io/paulobrien/pen/LvqvNg

5 Likes
#16

So creative! :ok_hand: