Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • April 24, 2022 at 2:22 pm #1349282
    navindesigns

    Hi,

    I need a little bit of help to make my sub menu look closer to my mockup

    Live site – http://balrajt9.sg-host.com/

    Mockup – https://ibb.co/M2bJVTx

    I have used the following CSS to move the submenu closer to the main menu
    .main_menu .menu ul { top: 59%; }

    I need help with the following:
    1- The submenu is not going behind logo. How can I move it in front of the logo?
    2- I need to center the text and add a separator line below like my mockup
    3- I need to center the entire submenu so there are equal space to the left and right , currently there is more space on the ride side

    Thanks

    April 25, 2022 at 7:14 am #1349348
    Ismael

    Hey navindesigns,

    Thank you for the inquiry.

    You can adjust the submenu using the following css code.

    #top .av-main-nav ul a {
    border-bottom: 1px solid orange !important;

}

#top .av-main-nav ul a .avia-menu-text {
    width: 80%;
    display: inline-block;
    border-bottom: 1px solid orange;
}

.av-main-nav > li > ul {
    margin-left: -25px;
}

    This should pull the submenu container 25px to the left, center align the submenu items and add a border below them.

    Best regards,
    Ismael

    April 26, 2022 at 2:35 am #1349456
    navindesigns

    This looks better but need 2 more changes. Please hover over COMMUNITY menu item

    1- Remove the last line under FAQ
    2- The separator line should be vertically centered between the two items . It is currently too far up.

    Thanks as always

    • This reply was modified 2 years, 8 months ago by navindesigns.
    April 26, 2022 at 10:18 am #1349492
    Nikko

    Hi navindesigns,

    Please replace this code:

    #top .av-main-nav ul a .avia-menu-text {
    width: 80%;
    display: inline-block;
    border-bottom: 1px solid #7ba7c9;
}

    with:

    #top .av-main-nav ul a .avia-menu-text {
    width: 80%;
    display: inline-block;
}

#top .av-main-nav ul li {
    border-bottom: 1px solid #7ba7c9 !important;
}

#top .av-main-nav ul li:last-child {
    border-bottom: none !important;
}

    Hope it helps.

    Best regards,
    Nikko

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