Member Avatar for terryds

First, look at my site :

When you hover the navigation anchor text, it will create a 5px border-top..
My question is :

  1. How to make the 5px border top is at the top of the page ? I mean I want to make it in #top-head's border top ...

  2. How to make the border not to take up space ? I mean I don't want to make the text go down when I hover it..

Sorry for my bad skill of English..
Thanks for any answers

Edited by terryds
  • 4 Contributors
  • 3 Replies
  • 103 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by Alberto Bucur

Dani AI

Generated

Short answer: reserve the 5px visually (so it never pushes text) and place the visible bar outside normal flow at the top of #top-head. 's idea to reserve the space is helpful for the "no jump" part, and 's absolute positioning points in the right direction — below is a robust pattern that keeps the bar at the header top and does not shift content.

Add one absolutely positioned highlight element inside #top-head and move/resize it to sit above the hovered link. The bar lives outside the document flow so it never pushes text down; JavaScript updates left and width on hover (keyboard focus included) and CSS handles the transition.

/* add <div class="nav-highlight"></div> inside #top-head (after the nav) */
#top-head { position: relative; }
.nav-highlight {
  position: absolute;
  top: 0;
  height: 5px;
  left: 0;
  width: 0;
  background: #e33;
  transition: left .18s ease, width .18s ease;
  pointer-events: none;
  z-index: 10;
}
var header = document.getElementById('top-head');
var hl = header.querySelector('.nav-highlight');
var links = header.querySelectorAll('nav a');

function moveHighlight(el){
  var h = header.getBoundingClientRect();
  var r = el.getBoundingClientRect();
  hl.style.left = (r.left - h.left) + 'px';
  hl.style.width = r.width + 'px';
}

links.forEach(function(a){
  a.addEventListener('mouseenter', function(){ moveHighlight(a); });
  a.addEventListener('focus', function(){ moveHighlight(a); });
});

header.addEventListener('mouseleave', function(){ hl.style.width = '0'; });

window.addEventListener('resize', function(){
  var active = header.querySelector('nav a:hover, nav a:focus');
  if (active) moveHighlight(active);
});

Notes and troubleshooting:

  • Ensure #top-head has position: relative so the highlight positions correctly; adjust z-index if the bar is hidden behind other layers.
  • For a no-JS fallback, use per-link pseudo-elements or the transparent-border trick (suggested earlier by ). 's gradient idea is a good visual enhancement but not necessary for the positioning logic.
  • Add focus handlers for keyboard users and consider touchstart for mobile.

Recommended Answers

All 3 Replies

Member Avatar for JorgeM

Your site didn't load for me so I could not see the header. But to answer question 2, simply apply a border-top of 5px, but transparent. That way the 5px is already taking space , but you can see it. When you hover, the color will simply change but the elements will not shift.

Member Avatar for Member #120589

Alternatively use a gradient. Example:

http://jsfiddle.net/diafol666/rBc5c/1/

I realise IE <= 9 do not support it.

Edited by Member #120589
Member Avatar for Alberto Bucur

Maybe this is ok:

ul.nav-ul {
/* I put this */
    position: absolute;
    top: 0px;
    left: 33%;
    list-style: none;
    padding: 0px;
    margin: 0px;
}
Edited by Alberto Bucur
Be a part of the DaniWeb community

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