Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • November 6, 2017 at 12:50 pm #873019
    kohlidays_kohsamui

    Hi Enfold support team,

    Our client asks us to put separators in the main menu with dots, which we did below. But in the mobile version with the burger, there is a dot in front of the burger, how to make it disappear?

    .av-main-nav li > a:before {
    content: ‘•’;
    margin-right: 22px;
    }

    .av-main-nav li > a > .avia-menu-text {
    border: none!important;
    }

    ul#avia-menu > li:nth-child(1) > a:before {
    display: none;
    }

    Could someone please post the CSS for this?
    Thanks,

    November 6, 2017 at 1:41 pm #873047
    Guenni007

    you have the choice of a separator on menu by enfold options.
    called “Separator between menu items”

    if you choose the small one the code looks like this after i changed it to dotted and 2px (thats for main menu)

    .av_seperator_small_border .av-main-nav > li > a > .avia-menu-text {
    border-left-style: dotted;
    border-left-width: 2px;
}

    for mobile same thing ( you only see those dots if border-width gets 2px minimum )
    if you got a different choice of overlay you have to look what code this is .

    the rule goes always to border-style

    .html_av-overlay-side-classic #top .av-burger-overlay li a {
    border-bottom-style: dotted;
    border-bottom-width: 2px;
}
    November 6, 2017 at 2:03 pm #873053
    Guenni007

    sorry i see you only wants one dot besides the links (as if there is a list-style) ? Yes

    why don’t you prefer the quick and dirty solution to put that in front of “Navigation Label” of Menu Point:
    if you don’t find the bull html entitie is •

    November 6, 2017 at 2:04 pm #873054
    kohlidays_kohsamui

    Sorry Guenni007, but that was not my question, here is the address of the site: http://pacific-palisade.com to understand what I want to do.

    November 6, 2017 at 2:12 pm #873056
    Guenni007

    just change your code to:

    .av-main-nav li.menu-item > a:before {
content: '•';
margin-right: 22px;
}
    November 6, 2017 at 2:21 pm #873061
    kohlidays_kohsamui

    I just put your code, thank you to see on the site what it gives. The point in front and the bar dividers must be removed.

    November 6, 2017 at 2:26 pm #873067
    Guenni007

    i misunderstood your request – just go back to your non deviders layout –
    i thougt you like to have dotted deviders.

    the only code you need is here https://kriesi.at/support/topic/separator-with-dots/#post-873056

    November 6, 2017 at 2:36 pm #873069
    kohlidays_kohsamui

    It works now. I just replaced my code:

    .av-main-nav li > a:before {
    content: ‘•’;
    margin-right: 22px;
    }

    with your:
    .av-main-nav li.menu-item > a:before {
    content: ‘•’;
    margin-right: 22px;
    }

    and for that to work perfectly, it is necessary to add the following 2 lines of codes:

    .av-main-nav li > a > .avia-menu-text {
    border: none!important;
    }

    ul#avia-menu > li:nth-child(1) > a:before {
    display: none;
    }

    Thank you for your precious help Guenni007

    Bertrand

    November 7, 2017 at 4:59 am #873526
    Rikard

    Hi,

    Great, glad you got it working and thanks for sharing. Thanks @guenni007 for helping out :-)

    Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    November 7, 2017 at 2:16 pm #873694
    kohlidays_kohsamui

    Hi Rikard,

    You can close it now. Thanks a lot.

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