BeTheme Submenu

Wolle0815 · June 2019

Hello,

I currently have a problem regarding the BeTheme. I added a submenu to my main-menu, but when I hover over the parent-item of the submenu, the submenu appears way too much below the main-menu. In other words, there is a big gap between the horizontal main-menu and the vertical sub-menu. The gap is about 20% of the screen size.

How can I eliminate this gap?

Kind regards,

Silvan

Pablo · June 2019

Hi,
Please always attach a link so we can check it out. If the page is offline(localhost) then our help will be limited, you will have to contact us when the page is online. Also please make sure that the page is not under maintenance before you provide us the link.
It is always a good idea to also attach a screenshot, for that use services like snag.gy or pasteboard.co
thanks

Wolle0815 · July 2019

Hi,

thank you for your quick response. You can visit the homepage at https://www.bos-sport.de

You can have a look at the submenu that I was talking about while hovering over the "Produkte"-Item in the main menu.

Thanks for your effort,

Silvan

Pablo · July 2019

That's because our script is calculating the logo height and applies the same height for the menu items.

In this case, you should turn on the "Overflow" option in Theme Options > General > Logo but we suggest to resize your logo to be 80-100px max.

Remember, that if you turn on the overflow option then logo has the height:auto option applied and when you set the "logo height" in Theme Options > General > Logo, then you are setting the height of the menu.

So, what I suggest in nutshell:

1) Turn on the Overflow option

2) Resize your logo to be 80-100px

3) Apply the 80-100px "logo height" option

Thanks

Wolle0815 · July 2019

Hi Pablo,

thank you for our reply. I did exactly what you suggested, and the submenu now is a bit higher. But it's isn't directly below the main-menu, there's still a big gap between the menus. Also, The logo now does not fit into the top-bar while scrolling down the page.

Do you have another idea how to fix this issue?

Thank you very much for your time,

Silvan

Pablo · July 2019

Please apply this code into the Theme Options > Custom CSS & JS > CSS


@media (min-width:1240px){
  #Top_bar:not(.is-sticky) .sub-menu{
	   top:100px !important;
  }
}

Thanks

Wolle0815 · July 2019

Hi Pablo,

thank you very much for your effort. Your code works well while being at the top of the page.

But when scrolling down, the gap again shows up, so it's even impossible to click the items of the submenu. Do you have an idea how to also fix the gap when the site is scrolled down?

Again, thank you so much for your time,

Silvan

Pablo · July 2019

I've updated the code above.

It will be working fine now.

Thanks

Wolle0815 · July 2019

Thank you very much, now it works like a charm.

Really appreciate your help and quick answers.

Have a good day,

Silvan

Pablo · July 2019

Glad to hear that.

If you still have some further questions, feel free to ask.

Thanks

BeTheme Submenu

Comments