Your suggestion works, but only if you want to move the shadow down.
If you want to move it up, closer to the text, you can't use the negative padding.
I've found out, that the shadow distance from the text is related to the different fonts I use. For ex. "Arial" has a smaller distance than "Prompt".
I think this is an independent font feature. You can see this distance by simply click-drag selecting the word, you will get a blue square/frame, which defines the height of the box that drops the shadow.
This is way more visible if you use a very large font, I use 46px.
Nope. What you did is changing the shadow for an underline.
The container box's height, in which the menu is in, is defined by the text itself. It can be bigger but not smaller than the actual text. The underline is the bottom border of that box so this is why it can't be closer to the text.
Yes it's the same. But as I said before, you can't make the box smaller not even with border.
The box is defined by font height, which is a font property. Every font style has a different space below it.
You can't make a container that is smaller of what it is containing.
Take a look at the examples below. Everything is the same but the font used. The first is Brandon Grotesque, the secont is Arial. You can clearly see the different distance to the bottom border (or the shadow).
Hello.
When you hover over a classic top menu a black thin line appears under the menu items, while a fixed line is always present under the currend page.
Where can I change the styling of that line? The color, the thickness and the distance from the text?
I can't find anything in the Nav Menu editor.
Thank You.
Hi Cupax,
You need a couple lines of Custom CSS to remove or change it.
header ul.menu li.menu-item>a:hover, header ul.menu li.current-menu-item>a { -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0), 0 1px 0 your_color !important; box-shadow: inset 0 0 0 rgba(0,0,0,0), 0 1px 0 your_color !important; }The first line is for hover and second line is for active.
If you want to remove it simply add between the brackets.
Feel free to ask for anything you need.
Kind Regards
Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.
Great.
What about if I want to move the line up, closer to the text?
The line is a bottom box shadow, but I can't find where to resize that box.
Hi,
I am very sorry for the late reply, we were not working on the weekend.
Isn't the line attached to the text? https://prnt.sc/p9s6ub
You can add bottom padding, we simply add it as box shadow. This is the selector.
ul.menu.m-header-default-menu li.menu-item>a {
padding-bottom: 10px !important;
}
Feel free to ask for anything you need.
Kind Regards
Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.
Hi.
Your suggestion works, but only if you want to move the shadow down.
If you want to move it up, closer to the text, you can't use the negative padding.
I've found out, that the shadow distance from the text is related to the different fonts I use. For ex. "Arial" has a smaller distance than "Prompt".
I think this is an independent font feature. You can see this distance by simply click-drag selecting the word, you will get a blue square/frame, which defines the height of the box that drops the shadow.
This is way more visible if you use a very large font, I use 46px.
Hi Cupax,
Well, the box shadow property does not accept negative values, so here's what you can do.
First remove the box shadow then add border-bottom as property in hover.
ul.menu.m-header-default-menu li.menu-item>a:hover { border-bottom: 1px solid #333; box-shadow: none !important; }Then you can simply change the line height of the link and the border will come close.
ul.menu.m-header-default-menu li.menu-item>a { line-height: 0.8 !important; }Feel free to ask for anything you need.
Kind Regards
Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.
Hi.
Nope. What you did is changing the shadow for an underline.
The container box's height, in which the menu is in, is defined by the text itself. It can be bigger but not smaller than the actual text. The underline is the bottom border of that box so this is why it can't be closer to the text.
Hi Cupax,
I am very sorry for the late reply.
I know the difference between these two, but if you add shadow you cannot decrease the bottom spacing, only in border. Isn't the result same?
Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.
Yes it's the same. But as I said before, you can't make the box smaller not even with border.
The box is defined by font height, which is a font property. Every font style has a different space below it.
You can't make a container that is smaller of what it is containing.
Take a look at the examples below. Everything is the same but the font used. The first is Brandon Grotesque, the secont is Arial. You can clearly see the different distance to the bottom border (or the shadow).
Hi Cupax,
Yes, I agree on that but the one that is keeping away is the line height, have you tried reducing the line height? After changing to border.
ul.menu.m-header-default-menu li.menu-item>a { line-height: 0.8 !important; }Kind Regards
Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.
Nope.
The line height just creates a box around everything, the shadow doesn't move.
The only thing that defines that box (the distance to the underline) is an "a href" link in the code. See attachment.
Hi Cupax,
Can you please provide me with your wp-admin, I will do some quick tests to see if that can get fixed.
Make sure to tick private on the reply.
Feel free to ask for anything you need.
Kind Regards
Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.
Hi.
I finally managed to solve it. I added this line to the CSS:
Now I can set the underline distance with the "line-height" parameter.
Thank You for your help.
Good to know, feel free to ask for anything you need
Kind Regards
Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.