All geek questions in one place

How to get border overlap?

I am trying to ensure that the upper border of the title has one color, and when on hover / active in navigation part of it changes to a different color.

How and why, for my li:hover tag, when I do border-top , it still returns me border-bottom ?

What I'm trying to achieve in the picture As mentioned earlier, I also wanted the border to go above the green border in the picture in the hover .

How can i achieve this?

That's what i still have

 /*** Page ***/ html,body { margin: 0; } /*** Navigation ***/ .navbar { background-color: #ecf0f1; } .navbar > .main-nav > ul, li { list-style-type: none; text-decoration: none; } .navbar > .main-nav > ul { min-height: 60px; margin: 0; padding: 0; overflow: hidden; box-sizing: border-box; border-top: 8px solid #d1d064; } .navbar > .main-nav > ul > li { text-align: center; min-width: 150px; position: relative; top: -2px; display: block; float: left; } .navbar > .main-nav > ul > li a { display: block; color: #737373; text-align: center; padding: 20px 16px; text-decoration: none; font-family: 'Lato', sans-serif; font-weight: 800; } .navbar > .main-nav > ul > li.active { border-top: 8px solid #0F9E5E; } .navbar > .main-nav > ul > li:after { display: block; content: ''; border-top: solid 3px #a8a8b6; transform: scaleX(0); transition: transform 250ms ease-in-out; } .navbar > .main-nav > ul > li:hover:after { transform: scaleX(1); } .navbar > .main-nav { max-width: 1480px; margin: 0 auto; } 
 <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.1.0/css/hover-min.css" rel="stylesheet"> </head> <body> <br><br><br><br><br><br> <nav class="navbar"> <div class="main-nav"> <ul> <li class="active"><a href="#">Home</a></li> <li><a href="#">Second</a></li> <li><a href="#">Third</a></li> </ul> </div> </nav> </body>

thanks

+5
source share
4 answers

Borders affect layout, I would recommend just switching to box-shadow to change the color:

 .navbar > .main-nav > ul > li.active, .navbar > .main-nav > ul > li:hover { box-shadow: 0 -8px 0 #0F9E5E; }

Working demo:

 .navbar { background-color: #ecf0f1; } .navbar::after { content: ''; clear: both; display: block; } .navbar > .main-nav > ul, li { list-style-type: none; text-decoration: none; } .navbar > .main-nav > ul { margin: 0; padding: 0; box-sizing: border-box; border-top: 8px solid #d1d064; } .navbar > .main-nav > ul > li { text-align: center; min-width: 150px; position: relative; display: block; float: left; } .navbar > .main-nav > ul > li a { display: block; color: #737373; text-align: center; padding: 20px 16px; text-decoration: none; font-family: 'Lato', sans-serif; font-weight: 800; } .navbar > .main-nav > ul > li.active, .navbar > .main-nav > ul > li:hover { box-shadow: 0 -8px 0 #0F9E5E; } 
 <br> <br> <br> <nav class="navbar"> <div class="main-nav"> <ul> <li class="active"><a href="#">Home</a> </li> <li><a href="#">Second</a> </li> <li><a href="#">Third</a> </li> </ul> </div> </nav>

How and why, for my li: hover tag, when I do border-top, it still returns me border-bottom?

This is caused by the following CSS:

 .navbar > .main-nav > ul > li:after { display: block; content: ''; border-top: solid 3px #a8a8b6; transform: scaleX(0); transition: transform 250ms ease-in-out; } .navbar > .main-nav > ul > li:hover::after { transform: scaleX(1); }
+2
source

overflow:hidden on ul , which is used to clean li floats, can be replaced with the following:

 .navbar > .main-nav > ul:after { display: block; clear: both; content: ''; }

like overflow: hidden prevents overlapping borders.

Now add a negative margin to li.active and adjust the border width to get the desired effect.

I also wanted the hover to go above the green border, which is in the picture.

To do this, change .navbar > .main-nav > ul > li:after and .navbar > .main-nav > ul > li:hover:after to the previous psuedo element and add margin-top .

See the demo below:

 /*** Page ***/ html, body { margin: 0; } /*** Navigation ***/ .navbar { background-color: #ecf0f1; } .navbar > .main-nav > ul, li { list-style-type: none; text-decoration: none; } .navbar > .main-nav > ul { min-height: 60px; margin: 0; padding: 0; /*overflow: hidden;*/ box-sizing: border-box; border-top: 8px solid #d1d064; } .navbar > .main-nav > ul:after { display: block; clear: both; content: ''; } .navbar > .main-nav > ul > li { text-align: center; min-width: 150px; position: relative; top: -2px; display: block; float: left; } .navbar > .main-nav > ul > li a { display: block; color: #737373; text-align: center; padding: 20px 16px; text-decoration: none; font-family: 'Lato', sans-serif; font-weight: 800; } .navbar > .main-nav > ul > li.active { border-top: 8px solid #0F9E5E; margin-top: -6px; /*ADDED THIS*/ } .navbar > .main-nav > ul > li:before { /*CHANGED*/ display: block; content: ''; border-top: solid 3px #a8a8b6; transform: scaleX(0); transition: transform 250ms ease-in-out; margin-top: -9px; /*ADDED THIS*/ } .navbar > .main-nav > ul > li:hover:before { /*CHANGED*/ transform: scaleX(1); } .navbar > .main-nav { max-width: 1480px; margin: 0 auto; } 
 <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.1.0/css/hover-min.css" rel="stylesheet"> </head> <body> <br> <br> <br> <br> <br> <br> <nav class="navbar"> <div class="main-nav"> <ul> <li class="active"><a href="#">Home</a> </li> <li><a href="#">Second</a> </li> <li><a href="#">Third</a> </li> </ul> </div> </nav> </body>
+2
source

You just need to add a negative margin-top to your active li , like this

 .navbar > .main-nav > ul > li.active { border-top: 8px solid #0F9E5E; margin-top:-5px; }

Here is the full working code

 /*** Page ***/ html,body { margin: 0; } /*** Navigation ***/ .navbar { background-color: #ecf0f1; } .navbar > .main-nav > ul, li { list-style-type: none; text-decoration: none; } .navbar > .main-nav > ul { min-height: 60px; margin: 0; padding: 0; box-sizing: border-box; border-top: 8px solid #d1d064; } .navbar > .main-nav > ul > li { text-align: center; min-width: 150px; position: relative; top: -2px; display: block; float: left; } .navbar > .main-nav > ul > li a { display: block; color: #737373; text-align: center; padding: 20px 16px; text-decoration: none; font-family: 'Lato', sans-serif; font-weight: 800; } .navbar > .main-nav > ul > li.active { border-top: 8px solid #0F9E5E; margin-top:-5px; } .navbar > .main-nav > ul > li:after { display: block; content: ''; border-top: solid 3px #a8a8b6; transform: scaleX(0); transition: transform 250ms ease-in-out; } .navbar > .main-nav > ul > li:hover:after { transform: scaleX(1); } .navbar > .main-nav { max-width: 1480px; margin: 0 auto; } 
 <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.1.0/css/hover-min.css" rel="stylesheet"> </head> <body> <br><br><br><br><br><br> <nav class="navbar"> <div class="main-nav"> <ul> <li class="active"><a href="#">Home</a></li> <li><a href="#">Second</a></li> <li><a href="#">Third</a></li> </ul> </div> </nav> </body>
+1
source

you can fix this problem with small changes, first you need to remove this overflow-hidden

 .navbar > .main-nav > ul { border-top: 8px solid #d1d064; box-sizing: border-box; margin: 0; min-height: 60px; /*overflow: hidden;*/ /* remove this overflow-hidden */ padding: 0; z-index: 1; }

second increase minus the value of the top

 .navbar > .main-nav > ul > li { display: block; float: left; min-width: 150px; position: relative; text-align: center; top: -6px; /* i have changed this value -2px to -6px */ }

Anything that does not cause problems with your code, check using the working snippet

 html,body { margin: 0; } /*** Navigation ***/ .navbar { background-color: #ecf0f1; } .navbar > .main-nav > ul, li { list-style-type: none; text-decoration: none; } .navbar > .main-nav > ul { min-height: 60px; margin: 0; padding: 0; box-sizing: border-box; border-top: 8px solid #d1d064; } .navbar > .main-nav > ul > li { text-align: center; min-width: 150px; position: relative; top: -7px; display: block; float: left; } .navbar > .main-nav > ul > li a { display: block; color: #737373; text-align: center; padding: 20px 16px; text-decoration: none; font-family: 'Lato', sans-serif; font-weight: 800; } .navbar > .main-nav > ul > li.active { border-top: 8px solid #0F9E5E; } .navbar > .main-nav > ul > li:after { display: block; content: ''; border-top: solid 3px #a8a8b6; transform: scaleX(0); transition: transform 250ms ease-in-out; } .navbar > .main-nav > ul > li:hover:after { transform: scaleX(1); } .navbar > .main-nav { max-width: 1480px; margin: 0 auto; } 
 <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.1.0/css/hover-min.css" rel="stylesheet"> <nav class="navbar"> <div class="main-nav"> <ul> <li class="active"><a href="#">Home</a></li> <li><a href="#">Second</a></li> <li><a href="#">Third</a></li> </ul> </div> </nav>
+1
source

Source: https://habr.com/ru/post/1261441/

More articles:


All Articles