Box Around Menu Items height

You already have full-height (31px for the active page, 33px on all others) top and bottom paddings on the list items. So the trick is to reduce the paddings on the active list item (li), and add the same height to the active link (li > a).

So, let’s say you wanted to add 10px top and bottom paddings inside the border (the “height” you want). We then have to reduce paddings on the active list item to 21px, and then re-claim that 10px for the desired top and bottom paddings (heights) inside the border.

If whatever tool you used to create the menus has design options to set the paddings, then tweak the paddings as described above: basically, take from elsewhere and give where needed.

If not, then try this custom CSS code:

#primary-menu.no-responsive li.current-menu-item.menu-item-active {
padding-top: 21px;
padding-bottom: 21px;
}

#primary-menu.no-responsive li.current-menu-item.menu-item-active a {
padding-top: 10px;
padding-bottom: 10px;
}

Standing by for feedback!

Hi George!
So no ability to change menu padding through menus, so I went with the custom CSS.

What happened was that the unscrolled menu box around the “About” increased, but so did the menu height.
(the scrolled menu remained unchanged)

I left the code in the custom css so you could see the result. Let me know if you have other ideas? Thanks!

I can see you’re using your theme’s custom CSS tool. I didn’t know to test with that ??

Please use the code below instead then:

.header-style-3 #primary-menu.no-responsive > li.menu-item-active {
	padding-top: 21px;
	padding-bottom: 21px;
}

.header-style-3 #primary-menu.no-responsive > li.menu-item-active > a, #site-header.fixed.shrink .header-style-3 #primary-menu.no-responsive > li > a {
padding-top: 10px;
padding-bottom: 10px;
}

Notes:

1) The above code should work with your current menu style. If you make substantial changes to the menu style, it may not work anymore.

2) You have an extra closing bracket } right above where you placed the code I gave. Remove this.

3) You added an inline style with height: 127px to your header. This will only cause problems, and I’ll advise you to remove it.

Standing by for feedback.

Hi George!
Thanks! Removed the extra bracket per your suggestion; where is the height 127px you mentioned..?

Also, if it’s better to update somewhere other than Custom CSS, happy to do so, just let me know where is best to ??

For now, I did put the code in Custom CSS and it worked for unscrolled, but the box when scrolled was still the same (small) height?
Oddly, it’s not showing now, not sure why. I tried clearing the cache, but maybe it’s taking a little to reupdate or something or whatnot..

Hello @bluecom

Here I have applying css for box around menu items and its not affecting menu height with or without scrolling menubar.

.header-style-3 #primary-menu.no-responsive > li.menu-item-active > a{position:relative;border:none;}
.header-style-3 #primary-menu.no-responsive > li.menu-item-active > a::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: 2px solid #3c3950;
    padding: 10px 4px;
}

Thanks

Hi Minal!
Do I put this in Custom CSS? (I did, and there isn’t any change yet…?)

Am I missing something?

Thanks!

hi @bluecom
Did you added above css?

Yup! I put it into Custom CSS (line 73)

Hi @bluecom
Can you plz send css file url
because i didn’t find your css in this custom.css file
https://blueprintarts.com/wp-content/themes/thegem/css/custom-hXUoX2ZZ.css?ver=5.8.3

Hi Minal!
So I’m going to “Theme Options” in our theme, then clicking on Custom CSS in the menu. Is there a better way?
(I’d attach a screenshot if I could)

You can see where the menu is on The Gem info page here:
https://codex-themes.com/thegem/documentation/theme-options/

I can do it in other file, certainly (which one?)

Let me know, much appreciated!

Hi Minal!
I figured it out (where to put it)! Thanks so much!!!

Hi @bluecom

i am happy i was able to help you.Good Luck!