Customization Tips

Let's advance your theme's functionality.

Hovering Link Effect

Here’s how you achieve the underlined hovering effect for links.


Once you log in, go toAppearance > Customize.

Appearance Customize v1


Once you click on Customize, you will be taken to your home page and presented with the Customization menu.

Click on Additional CSS.

Additional CSS v3


Within Additional CSS, copy and paste the code below. Then hit Publish on the top right-hand side.

@media (min-width: 768px) {
    .main-navigation .menu>.menu-item>a:before,
    .main-navigation .menu>.current-menu-item:not(.wc-menu-item)>a:before,
    .loud-link a:before {
        content: "";
        position: absolute;
        display: block;
        bottom: 1em;
        width: 0%;
        height: 2px;
        background-color: currentColor;
        -webkit-transition: 0.3s width ease;
        transition: 0.3s width ease;

    .main-navigation .menu>.menu-item:hover>a:before,
    .main-navigation .menu>.menu-item.sfHover>a:before,
    .main-navigation .menu>.current-menu-item:not(.wc-menu-item)>a:before,
    .loud-link a:hover:before {
        width: calc(100% - 40px);


    .loud-link a {
        position: relative;
        padding-right: 40px;

    .loud-link a:hover:before {
        width: calc(100% - 64px);


    .loud-link a:before {
        bottom: -0.5em;

.loud-link a:after {
    content: '\21e2';
    margin-left: 5px;


You can then go to any text within a page or post and add a link to the webpage of your choice.

Add Link To


To enable Loud Link, go to Advanced and enter loud-link in the Additional CSS class(es) field.

Loud Link in Advanced

Final Results

Once you save and view the page in Preview, you will see the following results.

Loud Link Hovering

Leave a comment