Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • January 27, 2016 at 11:25 pm #573309
    sitesme

    Hi

    One of our clients is definitely decided to have the menus and sub-menus similar to this: http://dns.d.pr/17UMK/5nPUVCNm as seen on this page: http://dns.d.pr/17UMK/5nPUVCNm

    Is there any easy way to group the menus and submenus like that?

    Thank you

    January 27, 2016 at 11:30 pm #573314
    Josue

    Hi!

    Yes that may be possible with custom CSS, would need to see the finalized site in order to give you the precise code.

    Cheers!
    Josue

    January 27, 2016 at 11:35 pm #573319
    sitesme

    Hi Josue,

    Site in PVT, thanks.

    January 27, 2016 at 11:56 pm #573330
    Josue

    Ok, use the following:

    /* Padding adjustments */
#header_main .menu > li > a{
    padding: 0 5px;
}

#header_main .menu > li > a .avia-menu-text {
    padding: 8px 10px;
}

/* Indicator removal */
.avia-menu-fx{
    display: none;
}

/* Submenu positioning */
#top .av-main-nav ul {
    border: 0;
    top: 75%;
    left: 5px;
}

/* Coloring */
#header_main .menu > li:hover > a .avia-menu-text {
    background: #d1d1d1;
    color: red;
}

#top .av-main-nav ul a{
    padding: 8px 10px;
    color: red;
    border: 0;
    background: #d1d1d1;
}

    Adjust as needed.

    Best regards,
    Josue

    January 28, 2016 at 12:01 am #573333
    sitesme

    Thank you Josue,

    But I was not able to see the “bubble” effect where the menu and sub-menus are kind of connected?
    It just moved the sub-menus slightly.

    January 28, 2016 at 12:03 am #573335
    Josue

    Hey!

    Make sure the code has been added, i’m not noting it neither in Quick CSS or child theme style.css.

    Best regards,
    Josue

    January 28, 2016 at 12:09 am #573338
    sitesme

    Sorry Josue,

    I had removed the code as it didn’t work for me. Added again now, can you check pls?
    Would like to add the round effect in the boxes as well.

    • This reply was modified 8 years, 11 months ago by sitesme.
    January 28, 2016 at 12:11 am #573341
    Josue

    It’s working – http://imgur.com/XwIC43m

    January 28, 2016 at 12:14 am #573344
    sitesme

    I mentioned the round corners afterwards, any chance of doing so?
    And, since we are here… :) any chance of having that small “arrow” like on Facebook bubble in black here? http://dns.d.pr/1gfq0/3pViBirF

    January 28, 2016 at 12:33 am #573349
    Josue

    Here you go:

    /* Padding adjustments */
#header_main .menu > li > a{
    padding: 0 5px;
}

#header_main .menu > li > a .avia-menu-text {
    padding: 8px 10px;
    transition: all linear 0.3s;
    border-radius: 5px;
}

/* Indicator removal */
.avia-menu-fx{
    display: none;
}

/* Submenu positioning */
#top .av-main-nav ul {
    border: 0;
    top: 75%;
    left: 5px;
    border-radius: 0 5px 5px;
    overflow: hidden;
}

/* Coloring */
#header_main .menu > li:hover > a .avia-menu-text {
    background: #d1d1d1;
    color: red;
}

#top .av-main-nav ul a{
    padding: 8px 10px;
    color: red;
    border: 0;
    background: #d1d1d1;
}

    Not sure how would you add an arrow there as the top menu item is part of the ‘bubble’ too.

    January 28, 2016 at 6:20 pm #573937
    sitesme

    Thank you Josue.

    We can forget the arrow in the “box”. After some colour changes this came up as per what we wanted for now but please keep this article open as I may have some other changes that we will need.

    Thank you once again.

    January 28, 2016 at 6:23 pm #573939
    Yigit

    Hi!

    Glad Josue could help!
    Thread will be on hold until you reply, so please reply to this thread only when you would like to re-open it :)

    Cheers!
    Yigit

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