Problems with navbar link styling

[mr_xing]

Hi,

I try to design my links in the navbar. But I have a mistake somewhere and I can’t find it. Can anyone help?

This is the code in the header section:

<style>
.nav-item a.nav-link {
  padding: 0 0 5px;
  color: white !important;
}
.nav-item a.nav-link:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #FFF;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out;
}
.nav-item a.nav-link:hover:before ,
.nav-item a.nav-link:focus:before  {
  visibility: visible;
  transform: scaleX(1);
}
</style>

But the whole navbar is underlined when hovering instead of the word “Home”

[casey1823]

The easiest way is to set the menu to none. Then just create a custom class and you can style the nav links any way you want.

Casey

[mr_xing]

Do you mean changing to that?

[casey1823]

Yes, that’s correct.
Then click on one menu item.

Create a class and style it. You have to apply it to all the links in the menu.

Casey

[mr_xing]

This does not work ich habe es probiert. But the line below, when i hover, stays over the entire width of the nav bar.

[casey1823]

@PeteSharp

That’s not really the easiest if you have to apply it to every link. Best practise is using the bootstrap classes that already exist. They apply regardless if you use the menu system or not.

I think that’s your opinion. I’ll stay out of your forum.

Casey

[PeteSharp]

@casey1823

I think that’s your opinion

Yeah you are right, I apologise for my bad wording.

Update: Now I have actually had some sleep… Your method does work, and I am always open to suggestions on improving workflow, however you will still need to add code to the page header to achieve the effect the OP was after, since the class manager doesn’t, at present support all of the styles needed.

One solution is adding one extra line position: relative; to the existing code with the default classes.

I personally think this approach is easier.

If you are interested… adding to the manager a class called

navbar-nav li a

will style the menu links without having to add classes to every item. Blocs will add this class to the manager if you edit the navigation link text in the project settings.

[mr_xing]

mhm … unfortunately I can’t solve my problem with the previous tips

[PeteSharp]

Hey @mr_xing,

Give this a try, its working in my test project

<style>
.nav-item a.nav-link{
  padding: 0 0 5px;
  color: #fff!important;
  position: relative;	
}
.nav-item a.nav-link::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #FFF;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out;
}
.nav-item a.nav-link:hover::before,
.nav-item a.nav-link:focus:before  {
  transform: scaleX(1);
}
</style>

[mr_xing]

Yes Man, that worked like a charme for me!

Thanks a lot and stay healthy

[PeteSharp]

Great, you too mate.