Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 12, 2014 at 6:34 am #334448
    scottlanin

    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

    October 13, 2014 at 4:30 pm #335003
    Yigit

    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

    October 20, 2014 at 2:50 am #338070
    scottlanin

    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.

    October 20, 2014 at 2:59 am #338078
    mandkbishop

    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.

    October 21, 2014 at 11:15 pm #339260
    Josue

    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

    October 22, 2014 at 12:14 am #339283
    scottlanin

    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, 1 month ago by scottlanin.
  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Main Menu Divider – or Border’ is closed to new replies.