Menu Underline CSS - Support | Kriesi.at - Premium WordPress Themes

Viewing 27 posts - 1 through 27 (of 27 total)

Author

Posts
April 17, 2017 at 9:22 pm #778957

Gustavo
Participant

Hello everyone, I need a help, can I leave the menu like the photo attached?

I wanted to do via CSS the Underline fixed.

And in the Click, leave a rectangle below.

Thank you

April 17, 2017 at 9:37 pm #778960

Jordan Shannon
Inactive Moderator

Hey Gustavo,

Just to be clear, so you want the menu items to always have an underline, and then when clicked you want it to have a rectangle below?

Best regards,
Jordan Shannon

April 17, 2017 at 9:44 pm #778964

Gustavo
Participant

Hi Jordan,
That’s just it.

April 17, 2017 at 9:46 pm #778965

Jordan Shannon
Inactive Moderator

Hi,

You want the rectangle to remain while you are on the selected page as well?

Best regards,
Jordan Shannon

April 17, 2017 at 9:48 pm #778966

Gustavo
Participant

In fact it will be onepage.

Follow her http://primeboulevard.com.br.hospedagemdinamica.net

April 17, 2017 at 9:57 pm #778968
Jordan Shannon
Inactive Moderator
Hi,

Please add the following to quick css to add the underlines first, confirm that this works:
```
#avia-menu .menu-item a span.avia-menu-text{
text-decoration:underline!important;
}
```
Best regards,
Jordan Shannon
April 17, 2017 at 10:02 pm #778970

Gustavo
Participant

Jordan,

See how it got, we managed to make the underline smoother? And refolding thicker blue Strong?

Home

April 17, 2017 at 10:12 pm #778971
Jordan Shannon
Inactive Moderator
Hi,

Also add this to quick css:
```
#avia-menu .menu-item a{
height:34px!important;
}
```
confirm that this works:

Best regards,
Jordan Shannon
April 17, 2017 at 10:21 pm #778973

Gustavo
Participant

Jordan,

Looks like it’s almost right.

The black underline can get bigger?

And the more blue height Big?

Thank you

Home

April 17, 2017 at 10:32 pm #778978
Jordan Shannon
Inactive Moderator
Hi,

Please add the following css:
```
#avia-menu .menu-item a span.avia-menu-text{
    text-decoration: none!important;
    border-bottom: 10px solid black!important;
    padding:0 40px!important;
}
```
Please use this as a replacement for the first css I sent.

Best regards,
Jordan Shannon
April 17, 2017 at 10:42 pm #778982
Gustavo
Participant
```
#avia-menu .menu-item a span.avia-menu-text{
    text-decoration: none!important;
    border-bottom: 2px solid black!important;
    padding:0 40px!important;
}

#avia-menu .menu-item a{
text-decoration:none!important;
height:35px!important;

}
```
Ual is almost perfect.

Now in the Hover leave the rectangular as in the image and keep it in the click.

http://oi67.tinypic.com/jhv8cg.jpg
April 17, 2017 at 11:52 pm #778997

Jordan Shannon
Inactive Moderator

Hi,

Will these menu items link to a section on the same page?

Best regards,
Jordan Shannon

April 18, 2017 at 2:09 pm #779300

Gustavo
Participant

Hi, yes the “Localização” is connected and it is already BLACK but wanted it wider as in the picture

April 18, 2017 at 5:30 pm #779488

Jordan Shannon
Inactive Moderator

Hi,

Would you be able to provide admin login info so I can look into this further and get this finished for you?

Best regards,
Jordan Shannon

April 18, 2017 at 6:00 pm #779522

Gustavo
Participant

Yes, tks

April 19, 2017 at 9:16 pm #780153

Jordan Shannon
Inactive Moderator

Hi,

Can you provide a link to the web site you got that original screenshot from?

Best regards,
Jordan Shannon

April 19, 2017 at 9:21 pm #780159

Gustavo
Participant

Jordan, sorry but I did not understand which screenshot ??

Not that one? http://primeboulevard.com.br.hospedagemdinamica.net/wp-content/uploads/2017/04/foto.png

April 19, 2017 at 10:09 pm #780173

Jordan Shannon
Inactive Moderator

Hi,

Yes, did you pull that screenshot from another site?

Best regards,
Jordan Shannon

April 19, 2017 at 10:45 pm #780193

Gustavo
Participant

It was not, but a photoshop created, do you want it?

April 20, 2017 at 3:05 pm #780558

Gustavo
Participant

PDF Link

April 22, 2017 at 1:45 pm #781666

Jordan Shannon
Inactive Moderator

Hi,

Thanks, I will try and get this worked out.

Best regards,
Jordan Shannon

April 24, 2017 at 1:58 pm #782303

Gustavo
Participant

Thanks a Lot

April 28, 2017 at 7:06 am #784314
Ismael
Moderator
Hi,

Please add this code in the Quick CSS field.
```
.current-menu-item > a > .avia-menu-fx {
    height: 5px;
    bottom: -10px;
    width: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
```
Best regards,
Ismael
April 28, 2017 at 3:05 pm #784602

Gustavo
Participant

Friend Ismael,
Not Work :(

April 28, 2017 at 3:13 pm #784612

Jordan Shannon
Inactive Moderator

Hi,

Is there a way you can slice the images/section from the psd/pdf? This is a little tough to replicate via pure css, but with the images you can swap them out via css.

Best regards,
Jordan Shannon

April 28, 2017 at 3:21 pm #784619

Gustavo
Participant

Hi Jordan, can I do with same images, and do in css the Hover?
Thanks for the tip!

April 28, 2017 at 3:31 pm #784630
Jordan Shannon
Inactive Moderator
Hi,

You can set the initial underline via css. When a user hovers over the text or when it is in the active state you can call the double line (active) image.

Best regards,
Jordan Shannon
- This reply was modified 7 years, 7 months ago by Jordan Shannon.
Author

Posts

Viewing 27 posts - 1 through 27 (of 27 total)

You must be logged in to reply to this topic.