Menu bar items misaligned and overlapping

[HGPower]

Hello. I just got the solution for my transparent nav bar problem (https://theme.co/apex/forum/t/navbar-not-transparent/51167). I’m posting the link because I’m not sure if my current problem is related. I’m using a background image at the top of my home page. My menu items are not aligning properly. You’ll notice in the pic that the first menu item is wrapped to two lines on the home page:

And the hover line is also misaligned:

When I view the menu on a different page, the menu items/hover line display correctly:

But the logo area is overlapping the page content:

[thai]

Hi There,

Please find this custom CSS:

    .masthead  {
        position:absolute;
        width:100%;
        background-color:transparent !important;

    }

And change to this:

    .home .masthead  {
        position:absolute;
        width:100%;
        background-color:transparent !important;

    }

Then also add this custom CSS:

.home .x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    width: auto;
}

Hope it helps

[HGPower]

Thank you. When I added the code, it fixed the overlapping problem, but it removed the transparency from the navbar.

[paul.r]

Hi,

Please change this code

  .home .masthead  {
        position:absolute;
        width:100%;
        background-color:transparent !important;

    }

.home .x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    width: auto;
}

to this

.page-id-9 .masthead  {
        position:absolute;
        width:100%;
        background-color:transparent !important;

    }
.page-id-9 .x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    width: auto;
}

Hope this helps

[HGPower]

Thank you.

[Prasant]

You are most welcome.