Change style of Main Menu

[rweiss]

I am surprised that I can’t find anything on this – and I have looked a lot.

I don’t like the wide gap between the Main Menu words and the border that displays above the item. It is a huge gap that takes up too much space.

I am using Kleo in two places. One is my own site, the other is a client site. The client wants the border line removed and wants to replace it with a tab like look.

I am not sure how doable this is and still maintain the responsiveness. But I don’t know where to look in the css to even make adjustments to the menu. Firebug is not giving me much guidance here, since there are so many elements involved in the menu appearance.

[sharmstr]

Hello

You can easily reduce the gap size by setting a smaller menu height in theme options – header options – main menu height. Keep in mind that this will also reduce your logo size. If you want to keep the logo size (actually the whole section height and nudge the menu up), try this

COPY CODE

.collapse.navbar-collapse.nav-collapse {
margin-top: -20px;
}

Regarding the border above the main menu, that’s actually the bottom border of the top menu. Each menu item is an li of the #menu-main ul.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[sharmstr]

And please only ask your question in one topic. There are few of us here answer questions here and we dont want to duplicate the effort. Thanks.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[rweiss]

“Regarding the border above the main menu, that’s actually the bottom border of the top menu. Each menu item is an li of the #menu-main ul.”

I have a hard time thinking this is right. The border line displays when I hover over a main menu item. How would that be tied to the Top Menu (which I am not using)?

The css code did not change the gap. I put it in the child style.css for Kleo

[rweiss]

I forgot to add – you didn’t respond to the Tab look question that the client is asking for.

Is that possible?

[sharmstr]

Okay. You weren’t specific on the “border” so I assumed you meant the border that goes across the top when you have the top menu enabled.

So you dont want to reduce the gap between the main and top menu, only between the menu items and the hover highlight?

Sorry for not being clear about the “tab” look you want. You will have to add custom css to the li of the #menu-main ul. The menu is not a kleo specific menu. Its a standard WP menu that kleo has stylized. So do a google search for different ways to stylize the menu. There’s probably even plugins for it.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[rweiss]

Yes, on the one site I like the line above, but the gap is too great. I just want to narrow that gap. When I change the Main Menu Height item in the dashboard, it doesn’t change the gap, it just seems to put less space between the menu and the logo.

Okay on the tabs. Looking at Firebug when I select an li menu item it seemed like so much of the menu is based on dynamic and bootstrap items, that a simple #menu-main ul would create havoc.

Thanks, on that part, I’ll see what happens.

[sharmstr]

The line is a drop shadow of the li. The li is as tall as ul, which is as tall as the menu section. Reducing the main menu height will close that gap. But as stated earlier, it also reduces the logo height.

So, because the li is the height of the menu and the highlight is a drop shadow of the top of the li, there’s no way to move that highlight down. You can achieve something similar by adding a text-decoration to the menu item (text) on hover

COPY CODE

.kleo-main-header .nav > li > a:hover {
box-shadow: none !important;
text-decoration: overline;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Author]

Posts