Brisk 2 theme - create a box around the active Nav Menu

[DrShapiro]

In the "Brisk 2", using Top nav position, the selected menu item is not distinguished.  By comparison, in the Birdseye theme, there's a box that surrounds the selected active menu item AND a box appears when hovering over a menu item.  

So I went into the Birdseye theme and, using the CSS/HTML editor, I went into the main.less file. Starting on line 287 is the following code:

.nav li#active > a.wsite-menu-item,
.nav li > a.wsite-menu-item:hover {
border: 2px solid #ffffff;
}

This seems to be how the box is created and how it looks.  I deduced this by changing the border: from 2 px to 5px and sure enough, the border box got fatter.

So, going back to the Brisk 2 theme, it looks like the nav coding is in the _nav.less file.

Is there anyone out there that can offer guidance to affect a change to the Brisk 2 that would add a box to the selected (and hovered) nav menu item in a similar manner as the Birdseye theme?

[Adam7]

Could you post a link to your site if it's live, @DrShapiro? I think it would help our Community members to see what's happening there.

[DrShapiro]

Hi Adam and thanks for chiming in.  The site is not live.  BUT, I was able to figure it out and just entered my fix in this post.

[DrShapiro · Accepted solution]

I figured it out.... at least for the active menu.  I'll try to work on the hover feature at another time.

Using the Brisk 2 theme, go into the CSS/HTML editor.  Edit the _nav.less file. 

Go to line 244 and you'll see:

.active {

    color: darken(@primary, 10%) !important;

}

Put in the following line just below the "color" line:

    border: 2px solid #000000 !important;

So when you're done, you should have the following"

.active {

    color: darken(@primary, 10%) !important;

    border: 2px solid #000000 !important;

}

You can change the width of the border by adjusting 2px to something fatter (eg., 5px) or thinner (eg., 1 px).  You can also adjust the color to any hex code (and possibly use @primary to pick up theme's color)

It may be a bit finicky by not showing up perfectly in the normal drag and drop editor mode.  But preview and publish should work just fine.

Of course, remember to save the edits.  You'll need to rename the theme.  You can always export the theme so it can be used for other sites you may want to work on.

Hope this helps someone else.

[Adam7]

Nice - thanks for sharing, @DrShapiro!