Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #334448

    I am using the main menu with the logo on the left and the menu on the right. I want to add a thin line as a divider between the menu items – basically a border. Something like the menu I have here on the Corona theme – http://laninlaw.com/

    Could someone please post the CSS for this?
    Thanks,

    Scott Lanin

    #335003

    Hey Scott!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab and adjust as needed

    .av-main-nav > li { border-left: 1px solid #e2e2e2; } 

    Regards,
    Yigit

    #338070

    Thanks Yigit. That did it! I am wondering if there is some additional code I can add so that the border will not be so long – to make the height of the left border only a little bigger than the height of the font used in the main menu – so that the vertical dividing line will not run from the top to the bottom of each cell, but instead will be shorter and centered vertically relative to the words in the menu.

    #338078

    Yigit, as a follow-up to scottlanin’s question:

    Is there any way to code this so that there is not an extra divider to the left of the first link or to the right of the last link? In other words, if you just use border-left or border-right, you always have a leftover divider that is dangling on the left or right side. Can that be eliminated?

    Thanks in advance for any further help you could offer on this topic.

    #339260

    Hi!

    Try with this code:

    .av-main-nav > li:first-child .avia-menu-text{ border-left: 0; } 
    .av-main-nav > li:last-child  .avia-menu-text{ border-left: 0; } 
    .avia-menu-fx{ display: none; }
    .av-main-nav > li > a > .avia-menu-text{ border-left: 1px solid #e2e2e2; padding-left: 20px; } 
    

    Best regards,
    Josue

    #339283

    Thanks Josue :) This worked very well! I am wondering if there are two possible ways to tweak the code for cosmetic changes –

    1. to make the border line extend a little above and below each menu title – so that each border line is longer vertically than the word next to it, and

    2. if there is anyway to make the menu items appear closer together – I am using this code to change their appearance and like the font size and font but the menu is spread out a bit too much horizontally –

    /* Change Main Menu Font */

    .main_menu ul:first-child > li > a { font-size: 14px; }
    .header_color .main_menu ul:first-child > li > a { color: #000000; font-weight: 400; font-family: ‘PT Sans’, ‘HelveticaNeue’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif; }
    .header_color .main_menu ul:first-child > li > a:hover { color: grey; }
    .header_color .main_menu ul:first-child > li.current_page_item > a { color: #2b3493; }

    • This reply was modified 10 years, 2 months ago by scottlanin.
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Main Menu Divider – or Border’ is closed to new replies.