[ANSWERED] html – Adding underlines to a navigation bar using CSS

Question 1

Yes, You need to make the container navbar have display: flex; and add a width of 50% to the child divs. See here:

Also I added text-align:center; to each child so It makes it centered.

nav > a:nth-child(1){
width: 88px;
color: #000000b8;
font-size: 17px;
font-weight: bold;
padding: 0px 18px;
text-decoration: none;
pointer-events: initial;
line-height: 25px;
position: relative;
display: inline-block;
width: 50%;
text-align: center;
}


nav > a:nth-child(2){
width: 88px;
color: #000000b8;
font-size: 17px;
font-weight: bold;
padding: 0px 18px;
text-decoration: none;
pointer-events: initial;
line-height: 25px;
position: relative;
display: inline-block;
width: 50%;
text-align: center;
}


nav > a:nth-child(1):after{
content: '';
width: 100%;
height: 3px;
position: absolute;
left: -16px;
bottom: -12px;
margin-left: 0px;
background-color: #ffc107;
display: block;
}

.navbar {
  display: flex;
  position: relative;
}

<nav class="navbar navbar-fixed-top">
<a href="/popular" class="mapxr">Popular</a>
<a href="/ect" class="mapxr">ect</a>
</nav>

Question 2

Does it right?

<style>
nav > a:nth-child(n){
width:88px;
color: #000000b8;
font-size: 17px;
font-weight: bold;
text-decoration: none;
pointer-events: initial;
line-height: 25px;
position: relative;
display: inline-block;
}

a{
  text-align:center;
}

nav > a:nth-child(1):after{
content: '';
width: 100%;
height: 3px;
position: absolute;
background-color: #ffc107;
display: block;
}

</style>

<nav class="navbar navbar-fixed-top">
<a href="/popular" onclick='return false' class="mapxr">Popular</a>
<a href="/ect" onclick='return false' class="mapxr">ect</a>
</nav>

Question 3

I would like it to come out as follows, the left and right yellow lines divided by the width of the container

I’m wrong I am currently

This is my css and html that I have

nav>a:nth-child(1) {
  width: 88px;
  color: #000000b8;
  font-size: 17px;
  font-weight: bold;
  padding: 0px 18px;
  text-decoration: none;
  pointer-events: initial;
  line-height: 25px;
  position: relative;
  display: inline-block;
}

nav>a:nth-child(2) {
  width: 88px;
  color: #000000b8;
  font-size: 17px;
  font-weight: bold;
  padding: 0px 18px;
  text-decoration: none;
  pointer-events: initial;
  line-height: 25px;
  position: relative;
  display: inline-block;
}

nav>a:nth-child(1):after {
  content: '';
  width: 100%;
  height: 3px;
  position: absolute;
  left: -16px;
  bottom: -12px;
  margin-left: 0px;
  background-color: #ffc107;
  display: block;
}

<nav class="navbar navbar-fixed-top">
  <a href="/popular" class="mapxr">Popular</a>
  <a href="/ect" class="mapxr">ect</a>
</nav>

Bollate

[ANSWERED] html – Adding underlines to a navigation bar using CSS

By

Solution 1 :

Solution 2 :

Problem :

By

Related Post

[ANSWERED] html – Child div has an offset border

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] problem in selecting list item in html/css

Leave a Reply Cancel reply

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate