[Resolved] Navigation Menu Font and Hoover

[Vladimir]

Hi,

On the: https://attention.cc/ blog template I am editing, I would like to change font in the menu on the top and add underline effect which puts red line under each menu item as I hoover over it? Where do I do that and do you think adding red hoover line is adding too much code that may slow down the website?

[Fernando]

Hi Vladimir,

You may modify the Primary Menu Items through Appearance > Customize > Typography > Typography Manager > Primary Navigation as such: https://share.getcloudapp.com/NQuNjg68

To add a similar underline as to the one in “Subscribe” menu item for the other menu items, here is a custom CSS code you may try adding in Appearance> Customize > Additional CSS:

.main-navigation .main-nav ul li a:hover {
	box-shadow: 0px -8px 0px var(--accent) inset
}

.main-navigation .main-nav ul li a{
	transition: all 0.6s ease 0s;
}

This code shouldn’t be too heavy on your website as it’s just a couple of lines and characters.

Hope this helps! Kindly let us know how it goes. 🙂

[Vladimir]

This works great! You can see it at: https://attention.cc/

Two more questions:

1) Is it possible to modify the CSS code so that the red underline is the width of the text and not width of the container that contains the text? It will look much nicer if the line was not longer than the text.

2) Can we put the red “underline” to show up ABOVE the text when someone hoovers over the top menu items and disable the hoover effect under Subsribe button now. I will not need hoover effect over subscribe button as when the mouse reaches Subscribe, there will be twoi red lines – one below and one above subscribe to emphasise the importance of it

[Fernando]

The code from the to add the underline comes from Appearance > Customize > Additional CSS. Specifically, this one:

/* navigation subscribe underline */

.main-navigation:not(.slideout-navigation) .main-nav li.subscribe-button a {
	box-shadow: 0px -8px 0px var(--accent) inset;
	transition: all 0.6s ease 0s;
	padding: 0px;
	margin: 0px 20px
}

.main-navigation:not(.slideout-navigation) .main-nav li.subscribe-button a:hover {
	box-shadow: 0px -16px 0px var(--accent) inset;
}

If you wish to remove the underline for subscribe, kindly remove that.

If you wish to make the width of the underline to be the same as the text, you would need to remove the padding of the Menu items, and set a margin instead. For instance:

.main-navigation .main-nav ul li a {
    padding:0;
    margin: 0 10px;
}

If you want to show a line above and below the text, a different code altogether would be needed.

For instance: https://share.getcloudapp.com/Z4u7Dyke

If so, use a code like this instead:

.main-navigation .main-nav ul li a:hover:after, .main-navigation .main-nav ul li a:hover:before {
    height:2px
}

.main-navigation .main-nav ul li a:after, .main-navigation .main-nav ul li a:before  {
    content:"";
    position:absolute;
    display:block;
    left:0;
    width:100%;
    height:0;
    z-index:10000;
    background-color: var(--accent) ;
}

.main-navigation .main-nav ul li a:before {
    top:0;
}

.main-navigation .main-nav ul li a:after {
    top:100%;
}

.main-navigation .main-nav ul li a {
    position:relative;
    padding:0;
    margin: 0 10px;
}

Kindly modify the values to your preference.

Hope this helps! 🙂

[Vladimir]

This is perfect. You guys are amazing. So many responses in one day to get me going, great theme. Thank you. Closing ticket.

[Fernando]

You’re welcome Vladimir! Glad to be of assistance! Feel free to reach out anytime you’ll need assistance with anything else. 🙂

[Author]

Posts