Separate Menu by Vertical Lines

  • Resolved middleastcrops

    (@middleastcrops)


    8 years, 9 months ago

    Hi guys,

    I’m using this CSS code to have the menu items separated by vertical lines.
    The code is:

    #access a {
color: #000;
display: block;
line-height: 15px;
padding: 0 9px;
text-decoration: none;
border-right: 1px solid #000;
}

    However, there is a problem with the code, because an extra line is added to the menu. It comes either at the end of my left-to-right menus (English/French) or at the beginning of the right-to-left menus (Persian/Arabic). I tried to solve it by placing this CSS code:
    #access li.last a {border: none ;}

    but nothing happened.
    I really appreciate it if anyone shows me how to get rid of this extra line.

    My website is: https://middleastcrops.co

    Best,
    H. K.

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi H. K.

    I believe the :last-child CSS selector is what you were after:

    #access li:last-child a {border-right: none ;}

    The above will remove the line on the end of the language menu when viewed in Persian/Arabic but will have no effect for English/French visitors. This is due to the way your menu items shift about between different languages.

    The line on the end of your primary menu will also not be removed using the above CSS. Your primary and language menus have actually been placed in a single menu but split up with CSS. Therefore, targeting the last child will only target the very last item of that single menu.

    You can get around this for your Persian/Arabic menus by using the .rtl class and targeting the first and last menu items:

    .rtl #access li:last-child a, .rtl #access li:first-child a {
border-right: none ;
}

    As a (not totally perfect) solution for your French/English menus, you could target specific menu items:

    #access #menu-item-1442-en a {
    border-right: none;
}

#access #menu-item-1439 a {
    border-right: none;
}

    Please note, if you edit and add items to your French/English menus in the future then you may need to adjust the CSS accordingly.

    Thread Starter middleastcrops

    (@middleastcrops)

    Siobhan,

    Thank you very much.
    It’s working great for three menus (French/Arabic/Persian), but nothing has happened to the English menu. I wonder how to get rid of this one.

    Thank you again for all your help and kindness.

    H. K.

    Hi H.K.

    The CSS I provided in my last reply was for the French, Arabic, and Persian menus. Sorry for not clarifying that!

    Do you think you can determine what’s needed for the English menu using the CSS I provided for the French menu as a template?

    You will need to user your browser’s inspector tools to determine the unique ID for each menu item. Some good guides on using your browser’s tools can be found here:

    https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

    https://thewc.co/articles/view/web-inspector-tutorial

    I can see that you’ve added a bit of your own CSS before, but do let me know if you need extra guidance.

    Thread Starter middleastcrops

    (@middleastcrops)

    Thank you Siobhan,

    I tried different CSS codes using different templates, but was not successful in removing the last line in the English menu ??

    Hi @middleastcrops,

    Using my browser’s inspector, I found that the unique IDs for the last menu items in the English menu were #menu-item-1398-en and #menu-item-60.

    You can use use those IDs in place of the other menu IDs in the previous snippet I provided. Like so:

    #access #menu-item-1398-en a, #access #menu-item-60 a {
    border-right: none;
}

    Let me know how that goes.

    Thread Starter middleastcrops

    (@middleastcrops)

    Siobhan,

    It works great ??
    Thank you very much.

    H. K.

    You’re welcome!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Separate Menu by Vertical Lines’ is closed to new replies.