Add a border around a Header Menu Link

Evening All,

First off, I love the theme, it so far has done most of what I need it to do. I have searched and searched for a workaround for my issues and found nothing so far. The two Header Menu related things I need help with:

  1. How do make the currently Active link in the Header menu show with a border around it? I suspect that this may be tricky as any custom CSS using a:active doesn’t seem to have any effect?

  2. Rather than the menu wrapping on to a second line, is there any way I can add a More button to the end for the overflow?

Thanks in advance

Ozymandius

Hi,

Thank you for contacting us. I am happy to help with your queries.

Try adding this CSS code to your website’s Addiional CSS, that is located under the Appearance menu > Customize.

    #mainnav ul.menu .current-menu-item > a {
      border: 1px solid #ff0000;
    }

Currently there is no feature to enable additional button when the menu items are too many, that hides and shows extra menu items. The ideal way for this is to narrow the gap of each menu items with this simple CSS code:

    #mainnav ul.menu li {
      margin-left: 5px;
      margin-right: 5px;
      padding-left: 5px;
      padding-right: 5px;
    }

I hope that helps.

Regards,
Kharis
aThemes Support

Hi Kharis,

Thanks so much for this, it worked perfectly for the button outline. The More button for the Menu was more of a would like to have.

Osman

You’re welcome Osman!

I am sorry, currently there is no specific feature for this. But you may want to create a Custom Link at the end of your menu list and submenus underneath it.

Regards,
Kharis
aThemes Support