Menu spacing off when going onto two rows

Resolved seapetal
(@seapetal)

8 years, 2 months ago

Hi!

When my primary menu goes onto 2 rows, the second row runs into the first line of the body content – in this case it is the page title I created in the body of the page.

1. How can I add more items to the right hand side of the menu since it appears to have the space?
2. Is there a way to maybe move the menu up slightly without decreasing the logo and header width? Or move the body area down a bit so that the menu remains above it?
I needed the logo container at 50% and the menu starting on the left hand side just below.

I have the following in css and it is working wonderfully:

@media (min-width: 992px) {
.kad-header-left {
width: 50%;
}
.topbar-widget .textwidget h1 {
position: absolute;
padding-top: 60px;
}
}

@media (max-width: 992px) {
.topbar-widget .textwidget h1 {
display: none;
}
}

.kad-header-right {
max-height:120px;
}

.kad-header-style-basic #nav-main ul.sf-menu > li > a {
max-height: 40px;
}

Thank you for your time!

The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

Kevin
(@jx-3p)

8 years, 2 months ago
Hello,

1. Here’s some CSS that will make the menu go across the screen:
```
.kad-header-right {
    width: 100%;
}
```
That last menu item is quite long though and still doesn’t fit. Try going to Theme Options> Menu Settings, and adjust the font to something smaller, like 14px.

Then add this CSS:
```
nav#nav-main {
    float: left;
}
```
2. Go to Theme Options> Main Settings, and adjust the menu top and bottom spacing to reduce the height of your menu items.

Hopefully that’s all clear. Let me know if you need anymore help!

-Kevin
Thread Starter seapetal
(@seapetal)

8 years, 2 months ago

Hi Kevin

Thanks, it partially worked. I made the last menu item name smaller and decreased the font slightly so that it fit for now.

Adjusting the following line gets my menu where I want it when it goes onto 2 lines (2 rows with the second row just below the first on the left-hand side):
.kad-header-style-basic #nav-main ul.sf-menu > li > a {
max-height: 35px;

But at 35px, it also moves the page title (the body content) to higher up then overlapping the 2 second row of the menu. What I would like is to keep the max-height: 35px but move the page title(the body content) down at the same time.
Is this possible?

2. I can’t find Theme Options> Main Settings? Where would this be?

Thank you

Kevin
(@jx-3p)

8 years, 2 months ago

Sorry, I was thinking of Virtue theme. I don’t think I fully understand what you’re wanting the site to look like. Do you possibly have a mockup photo you can share so I can see your end goal?

-Kevin
Ben Ritner – Kadence WP
(@britner)

8 years, 2 months ago
A mockup would be great to know what you are going for.

Please try adding this css:
```
.kad-header-style-basic #nav-main ul.sf-menu > li > a {
    line-height: 40px !important;
}
```
I think that would get you closer based on what I see on your site.

Ben
Thread Starter seapetal
(@seapetal)

8 years, 2 months ago

Thank you both!

That worked perfectly!!

You have excellent support.

remigouzy
(@remigouzy)

7 years, 10 months ago

Thank you for you answer

I had same problem (almost)

Your css help me !!!!

Thank you