Docs

[Jayd K]

Hi there,

I was wondering if you could help me? I have made a homepage and the navbar links on Firefox and Chrome are not working too well. For some reason, if you place the mouse directly over the lettering in the centre of a menu item, then the menu isn’t clickable. If you hover over the bottom of the menu item, almost underneath it, then it registers. I hope this makes sense – it is doing this on every word/menu item in the navbar. I havent seen this problem before – it’s very odd. I have tried using different fonts for the navbar and I have the same issue. Is there a reason the clickable area is so low down on the navbar? Any help appreciated.

http://www.simplysignspreview.com/aulonaltd/

[Joao]

Hi There,

This is caused because of this code>

@media only screen and (min-width: 980px){
.x-topbar {
    background: transparent!important;
    position: absolute;
    width: 100%;
    right: 0;
}

Position absolute is causing that,

you can setup a blue background for the topbar and set the max-height size in order to achieve the same effect without affecting the Navbar Links,

Hope it helps

Joao

[Jayd K]

Hi there,

Thanks for writing back. I have always used that code to make sure the topbar padding is removed, so the text of the topbar can sit just above the text of the navbar. I havent had this crash before. If I removed absolute, the topbar padding appears again and leaves a huge gap at the top. Is there any way to remove the topbar padding and have the navbar behave correctly?

[Jayd K]

This is how it looks with this code removed. Let me know what I can do, as this code was advised by one of your collegues some months ago to remove my topbar padding issue. Thanks!

[Nabeel A]

Hi again,

Please remove your code and add this code to fix the gap issue as well:

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: auto !important;
}

Let us know how this goes!

[Author]

Posts