Top Bar causing Main Menu Hover Issues

[InsideOutDesign]

Hello! I am having trouble with my top bar height altering the hover area of my menu items. I have gone ahead and customized my top bar to display the companies phone numbers directly above the navigation area, but unfortunately when I alter the height of the top bar, it disrupts how large the hover area of the main menu buttons are, making it a little difficult for potential visitors to easily access all the pages.

I have attached my login credentials in a secured note! Thanks for all of your help!

[nico]

Hi @InsideOutDesign,

Thanks for writing.

The p of the top bar is causing this problem. Add margin-bottom in your top-bar-text so that it will not cause any problem to your navigation bar.

.top-bar-text {
    color: white;
    display: inline-block;
    margin-left: 80px;
    vertical-align: middle;
    margin-bottom: 4px;
}

Adjust the margin-bottom to achieve the best margin to fix the issue.

Hope it helps.

Let us know how it goes.
Thanks.

[InsideOutDesign]

Worked like a charm appreciate all your help Nico!

[Joao]

Glad to hear it!