Twenty Twelve lines between menu items on navigation bar

  • I have a site at https://275.a65.myftpupload.com/
    I am using a child theme and chrome tools.

    I am trying to get a vertical line between my menu items. I think I am pretty close using the following css:

    li:not(:last-child) { border-right: 2px solid #ffffff; }

.main-navigation li {
    margin: 0;
    padding-right: 2.857142857rem;
    padding-left: 2.857142857rem;
}

    The problem is that it is varying over to my drop down menu as well.
    A secondary issue is that I would like the drop down to be aligned under services.

    Thanks much!

Viewing 1 replies (of 1 total)
  • paulwpxp

    (@paulwp)

    This will make the drop down left align to its parent.

    .main-navigation li ul { left: 0; }

    The first issue (border) won’t happen if we use direct child selector. For example this will change background of the top level menu only.

    .nav-menu > li { background-color: red; }

    Anyway I see that the site is brand new? Maybe it’s already too late but for longevity of the project it’s better to build new project using the latest theme. TwentySixteen theme is a good one.

Viewing 1 replies (of 1 total)
  • The topic ‘Twenty Twelve lines between menu items on navigation bar’ is closed to new replies.