Menu overlapping header, please help

I don’t know what the header looked like before, so I’ll have to ask if the logo image previously overlapped the orange/yellow line like it currently does. And I also assume the menu was below the logo and not above. Was the menu also under the orange/yellow line?

You can try adding these three rules to the end of your child theme’s style.css file:

#header {
   height: 80px;
}
.logo {
   top: 10px;
}
#primary_menu {
   top: 20px;
}

The values listed are what is currently in effect. The first rule will adjust the height of the header area (the part above the orange/yellow line). The second rule determines how far from the top of the screen the logo should be placed. The third rule determines how far from the top of the screen the menu should be placed.

If the menu should go below the orange/yellow line, then try setting the value for top to 80px in the third rule.

If both the logo and menu should go above the orange/yellow line, then increase the height of the header to about 140px and the top of the menu to 80px.

Hi CrouchingBruin,

Thanks so much for your reply and help. We’re definitely on the right track. The issue seems to be with the menu itself – the logo and header as as they should be (overlapping the line is good).

The menu should all be to the right of the logo, above the yellow line.

I discovered that adding
#primary_menu {
left: 370px;
}

moves the menu far enough to the right, but now 2 of the menu items are under the yellow line.

I tried adding the header command to fix this, but doing so seems to override the primary menu command to float left. Is there a command that would make all the menu items stay together on top of the yellow line? Re-sizing them smaller so they fit would be another option.

Thank you SO much for your help!

Angie

The easiest solution for this would be to decrease the length of the menu items. For example, instead of “Crystals & Energy,” just use “Energy.”

In addition, you could target the menu sizes, such as this:

.jqueryslidemenu a {
    font-size: 11px;
    padding: 0px;
}
.jqueryslidemenu li {
    padding: 6px;
}

If you want to keep the logo the same size, you’re going need to decrease the size of the menu.

Hope this helps!

Davidmorgan,

Thank you for the simplest solution. Indeed, that’s all it took is to be less verbose.

I guess I’ll leave it for another day to learn how to manipulate the menu better.

Thanks so much to both of you!

Angie

Don’t know if my problem is the same, but when viewing my website on the iPad (in portrait mode) or iPhone, the logo header and navigation bar overlap. This means that the website cannot be navigated as when pressed the homepage just re-loads, meaning it is not actually a mobile-friendly website at the moment!

If anyone can help it would be much appreciated.

Thanks
Donna

https://charleyandbillie.uk/

If the solution hasn’t worked for you then you’re probably not facing the same problem…
https://www.ads-software.com/support/forum/how-to-and-troubleshooting#postform