Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #512772

    Hi there,

    This is a continuation of an old thread found here. The coding provided by Ismael provided the correct look, but there are some functional concerns and another aesthetic improvement I am seeking.

    The goal was to stack the main menu navigation into two rows. Ismael made this possible with the following code:

    #avia-menu li {
        float: left;
        width: 50%;
        display: block;
        clear: none;
        height: 50px;
    }

    The code worked to achieve the look. However, the top row of links is not clickable. For example: the Home button is above the About button. If you hover your mouse over the Home button, it directs to the URL of the About page. How can this be fixed?

    As a follow-up question, how can I move the nav to be more vertically aligned to the center of the header?

    Site link is below.

    Thanks! And I’ll refrain from being so hasty on calling threads resolved.

    – Joe

    #513101

    Hi Joe!

    Thank you for using Enfold.

    Add this code to fix the menu issue:

    #avia-menu li a {
        height: 50px !important;
        line-height: 50px !important;
    }

    It will also fix the vertical alignment of the menu container. Add css media queries to adjust the style of the menu on different screen sizes.

    Best regards,
    Ismael

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.