how do I add a block beneath navbar-item in css

Question

I want to have a little block beneath the active page (and hover), in the navbar ofcourse. It should look like this:

This is the code that I have so far. I think that the border-bottom needs to be very small, with a big thickness.

.navbar .navbar-nav > li > a:hover {
color:#008080;
background:rgba(255,255,255, 0.0);
border-bottom: 5px solid rgb(255, 128, 0);

}

I hope someone can help with this.

Do you have an example of code to show that you have tried first? — Eli Nathan, Mar 19 '16 at 11:36
I edited above.. I'm quite experienced with html&css, but I really dont know what to do in this case — Stijn Westerhof, Mar 19 '16 at 12:16

score 1 · Accepted Answer · answered Mar 19 '16 at 12:29

1

So the best way I can see would be to make a div within the navbar li Something like:

<div class="navbar">
<li>Home
  <div class="square"></div>
  </li>

And then give that div the styles of:

.square {
      display:none;
      width:50%;
      margin:0 auto;
      background: orange;
      height:20px;

      }
    .square:hover {
      display:block;
      }

That should make it appear when you hover over the square itself. You might have to use a javascript mouseover events if you want to make it appear when you hover over the whole li tag

Does that help at all?

answered Mar 19 '16 at 12:29

Eli Nathan

1,020
2
13
35

No problem, would you mind marking my answer as correct so people can see if they come looking for the same solution? – Eli Nathan Mar 19 '16 at 12:36
It did not really worked on this way, because you cant hover over something, that isnt displayed at the sreen. What I tried to do is that I changed the background color of the block to the same color of the background. And when I hover it will change the color. But the problem with that is, that the hover is only working at the area beneath the navbar item. But thanks of your help ofcourse! – Stijn Westerhof Mar 19 '16 at 12:46
have you tried using a javascript mouseover event. Adding a mouseover event to the list item which calls a function will then let you change the style of the .square div? – Eli Nathan Mar 19 '16 at 12:48
I only know a little bit about JS, but im not experienced with that kind of events. Wich I have to be as a beginner webdesinger :p Can you make a event like that for me? – Stijn Westerhof Mar 19 '16 at 12:51
1

I see you found a solution in another question, that's the way to do it with js :) – Eli Nathan Mar 19 '16 at 13:18

how do I add a block beneath navbar-item in css

1 Answers1