[Resolved] Adding vertical divider "I" between horizontal menu items with css

Home Forums Support Adding vertical divider "I" between horizontal menu items with css

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #330854
    Amiel

    Hi,

    I recently started using your great theme and I get to know its great features and functionality.

    I hope you will be able to help me in adding an horizontal divider between menu item on the main menu of GP press.

    I’ve done some progress as you can see in this link

    Here is the css I used so far:

    .main-navigation .main-nav ul li a {
        padding-right: 24px; 
    }
    
    .main-navigation .main-nav ul li a:before {
        content: "|";
        position: relative;
        left: -25px;
        float: inherit;
    margin-top: 15px;
    }
    
    .main-navigation .main-nav ul li[class*="current-menu-"] > a:before {
     content: "|"!important;
    color: #e9eff9;
        position: relative;
        float: inherit;
        margin-top: 15px;   
    }
    

    Gere is what I am still trying to figure out how to do without a success so far:

    1. Remove the horizontal divider from both side of current menu item (active/focus/hover). As you can see I could only manage to remove the divider before the menu items on current page.

    Here is a short video that demonstrate what I am looking to achieve: http://d.pr/v/ULKmxN

    Many thanks in advance for your kind help,
    Amiel

    GeneratePress 1.3.46
    GP Premium 1.3
    #330874
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Thanks for the video! Very helpful 🙂

    Try this:

    .main-navigation .main-nav ul li[class*="current-menu-"] > a:before,
    .main-navigation .main-nav ul li[class*="current-menu-"] + li > a:before,
    .main-navigation .main-nav ul li a:hover:before,
    .main-navigation .main-nav ul li:hover + li a:before {
        color: transparent;
    }

    Glad you’re enjoying the theme!

    #330939
    Amiel

    Awesome!
    It did the work perfectly.
    I highly appreciate your help and super fast support.
    Keep doing your magical work on this fantastic theme.
    Thanks SO MUCH!
    Amiel

    #331147
    Tom
    Lead Developer
    Lead Developer
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.