Underlined menus (a la Theme Minimal)

Mercator · Jan 28th 2019

Hi,

Fosphatic Duke has realised minimal theme on version 3 of UIIkit3. I ran the original less minimal theme through the less compiler and used it with his code. This works well but for one thing: In Fosphatic Duke version, the menus start to get a fading in and out underline when you hover over them. Can anyone point me to the CSS code, so I can mimic it in less? Fosphatic Duke: Tried F12 but am not versatile enough with CSS.

Tnx,

Mercator

Fosphatic Duke · Jan 28th 2019

Hey,

i don't see the difference between uikit2 and my ported version tbh... I checked it on demo pages of both versions for me it's looking like the same behaviour...

UIkit2 Version

Uikit 3 Version

Probably i have some tomatoes on my eyes, but i don't see the difference tbh.

Regards,

Fossy

Fosphatic Duke · Jan 28th 2019

As I'm guessing its following css classes:

This is actual state, and then there is an after state that triggers the animation:

Plus a small after pseudo element so over all it should be following css code:

Code

.uk-navbar-nav>li>a {
display:block;
box-sizing:border-box;
text-decoration:none;
height:80px;
padding:0 15px;
line-height:80px;
color:#adadad;
font-size:13px;
font-family:"Raleway","Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight:normal;
padding:0;
-webkit-transition:color .1s ease-in-out;
transition:color .1s ease-in-out
}
.uk-navbar-nav>li>a:after {
content:"";
position:absolute;
bottom:30px;
height:1px;
background:#000;
width:0;
left:0;
-webkit-transition:width .5s ease-in-out;
transition:width .5s ease-in-out
}
.uk-navbar-nav>li>a:hover:after {
width:100%;
}

Display More

As far i see in the line: 12169 starting in the css file...

Regards,

Fossy

Mercator · Jan 28th 2019

YOU are "The Hirsch"! Thanks, that seems to work.

Underlined menus (a la Theme Minimal)

Share

Tags