Dotted border below the main navigation.

This topic has 11 replies, 2 voices, and was last updated 10 years by Mj.

Author
August 3, 2014 at 21:20 #24505

Mj
Participant

Hello,

I am trying to achieve the following result in the main menu: http://cl.ly/image/1L1P0D3a1M2w
A dotted border below a menu item, once you hover the menu item with your mouse.

The problem is related to the line-height. I do not like the default ‘text-decoration’ to put a small border under the menu items. Can you help me to make this?

Thanks

August 7, 2014 at 16:20 #25010

Mj
Participant

BUMP
August 8, 2014 at 12:26 #25132

Catalin
Moderator
Hello,

Add this code in your style.css file from your child theme folder:
COPY CODE
```
.navbar-transparent .navbar .navbar-nav > li > a:hover
{
 border-bottom:1px #fff dotted;
line-height:20px !important;
}

.kleo-main-header .navbar-collapse > ul > li > a {
line-height: 20px !important; 
}
```
Let me know if this works.

Thank you,
Catalin

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
August 8, 2014 at 12:28 #25133

Mj
Participant

Hello,

I added this code to the child theme style.css, but it does not work properly.
Please check this screenshot: http://cl.ly/image/0d243S3J0n2m

Thank you,

Majestic
August 14, 2014 at 17:32 #25709

Catalin
Moderator
Hello,

I see what you mean.

Please remove the code I gave you and replace it with this:
COPY CODE
```
.kleo-main-header ul.navbar-nav > li > a:hover:before {
    border-bottom: 1px dashed #fff;
    bottom: 35%;
    content: "";
    display: inline-block;
    position: absolute;
    width: 65%;
}

.kleo-main-header.header-scrolled ul.navbar-nav > li > a:hover:before {
    bottom: 20%;
}
```
Thank you,
Catalin

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
August 15, 2014 at 13:47 #25744

Mj
Participant

Hello Catalin,

Your code is working like a charm. Beside that, I do like to remove the dotted border below the ‘buddypress avatar’ menu item. Please check: http://cl.ly/image/1C1u202J2W2B

Could you tell me how to accomplish that?

August 18, 2014 at 11:23 #25872

Catalin
Moderator

please provide me access to your website to be able to provide you a fix

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

August 18, 2014 at 11:30 #25873

Mj
Participant

This reply has been set as private.
August 19, 2014 at 17:11 #26044

Catalin
Moderator
add this:
COPY CODE
```
.kleo-main-header ul.navbar-nav > li > a.kleo-bp-user-avatar:hover:before
{
  border-bottom: none !important;
}
```
let me know if this works.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
August 19, 2014 at 17:36 #26059

Mj
Participant

@Catalin, unfortunately this is not working.

August 20, 2014 at 14:35 #26172

Catalin
Moderator

I modified the code in my last reply… let me know if it works now.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

August 20, 2014 at 21:02 #26265

Mj
Participant

Thank you, that did the trick. 🙂
Author

Posts

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

The topic ‘Dotted border below the main navigation.’ is closed to new replies.

Search KB

Log in with your credentials

Forgot your details?