How to remove part of a border in W3.CSS

Question

So, I am working on a project using W3.CSS, I have this part of the code for the menu that looks like this:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
                <div class="w3-bar w3-khaki w3-card w3-bottombar w3-border-orange">
                    <a class="w3-bar-item w3-button w3-hover-white w3-right w3-padding-large w3-hide-medium w3-hide-large w3-right" href="javascript:void(0)" onclick="myFunction()" title="menu"><i class="fa fa-bars"></i></a>
                    <a href="#" class="w3-bar-item w3-button w3-right w3-hover-white w3-padding-large w3-hide-small w3-topbar w3-border-khaki w3-hover-border-orange">Menu1</a>
                    <a href="#" class="w3-bar-item w3-button w3-right w3-hover-white w3-padding-large w3-hide-small  w3-topbar  w3-border-khaki  w3-hover-border-orange">Menu2</a>
                    <a href="#" class="w3-bar-item w3-button w3-right w3-hover-white w3-padding-large w3-hide-small  w3-topbar  w3-border-khaki  w3-hover-border-orange">Menu3</a>
                    <a href="#" class="w3-bar-item w3-button w3-right w3-hover-white w3-padding-large w3-hide-small  w3-topbar  w3-border-khaki  w3-hover-border-orange">Menu4</a>
                  </div>
</div>
</body>

This is how it looks like:

When I hover over an item to select it, It will look like this:

This is almost fine, But I need to be able to hide the bottom border of the selected button to look more or less like this:

The only idea I had in mind was to use some JavaScript to draw the bottom border accordingly, but it sounds way more complicated than I think this should be. Is there another better solution that I am not aware of?

score 1 · Accepted Answer · answered Sep 05 '19 at 09:37

There is lots of way to achieve this, here is one of them, I hope this is what you want. if need anything else, please let me know. I have just put an after pseudo element on hover, that is hiding the below border. So you don't need nay JavaScript for the same.

.atul {
  background: orange;
  padding: 100px;
}

.w3-border-orange {
  border-top: 1px solid;
  border-bottom: 5px solid red;
 
}

.w3-border-orange a {
  display: inline-block;
  text-decoration: none;
  margin-right: 15px;
  padding: 5px;
  position:relative;
  border-top: 5px solid transparent;
}

.w3-border-orange a:hover {
  border-top: 5px solid red;
  background: #fff;
}


.w3-border-orange a:hover:after {
  position: absolute;
  height: 5px;
background: #fff;
content: "";
top: 100%;
width :100%;
left: 0;
}

<div class="atul"> 
<div class="w3-bar w3-khaki w3-card w3-bottombar w3-border-orange">
    <a class="w3-bar-item w3-button w3-hover-white w3-right w3-padding-large w3-hide-medium w3-hide-large w3-right" href="javascript:void(0)" onclick="myFunction()" title="menu"><i class="fa fa-bars"></i></a>
    <a href="#" class="w3-bar-item w3-button w3-right w3-hover-white w3-padding-large w3-hide-small w3-topbar w3-border-khaki w3-hover-border-orange">Menu1</a>
    <a href="#" class="w3-bar-item w3-button w3-right w3-hover-white w3-padding-large w3-hide-small  w3-topbar  w3-border-khaki  w3-hover-border-orange">Menu2</a>
    <a href="#" class="w3-bar-item w3-button w3-right w3-hover-white w3-padding-large w3-hide-small  w3-topbar  w3-border-khaki  w3-hover-border-orange">Menu3</a>
    <a href="#" class="w3-bar-item w3-button w3-right w3-hover-white w3-padding-large w3-hide-small  w3-topbar  w3-border-khaki  w3-hover-border-orange">Menu4</a>
  </div>
</div>

It still doesnt hide the bottom part if I import the w3.css sheet — Zaid Al Shattle, Sep 05 '19 at 10:05
One small side effect I'm facing with this specific code is that the buttons seem to have a tiny bit hollowed out part below each one, Any idea why? — Zaid Al Shattle, Sep 05 '19 at 11:12
This is due to Box shadow on .w3-border-orange try this, inspect the w3-border-orange class, remove the box-shadow from styles, and see if this is what you want — Atul Rajput, Sep 05 '19 at 11:29
It doesn't seem to be doing it for me. I tried setting it in code but it doesn't seem to change much if at all — Zaid Al Shattle, Sep 05 '19 at 11:38
https://jsfiddle.net/L3mw9c8y/1/ check this, and if you can explain this, maybe I can help "tiny bit hollowed out part below each one" — Atul Rajput, Sep 05 '19 at 11:40
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/199005/discussion-between-atul-and-zaid-al-shattle). — Atul Rajput, Sep 05 '19 at 12:00

score -2 · Answer 2 · answered Sep 05 '19 at 09:41

-2

Couldn't give you the proper solution unless I can see the css code, it would be better if you can post in codepen or some where I can see the code.

Based on your code probably you can do some css change on hover use padding-bottom to fix.

answered Sep 05 '19 at 09:41

vic

134
1
11

There isn't a css code. This is w3.css so I'm using default classes – Zaid Al Shattle Sep 05 '19 at 09:58

How to remove part of a border in W3.CSS

2 Answers2