How do we add a line image between the menu items?

  • a4jp

    (@a4jpcom)


    1 year, 5 months ago

    How do we add a line image between the menu items?

    Kind of like this ↓

    Nav1 | Nav2 | Nav3 | Nav4 | Nav5

Viewing 6 replies - 1 through 6 (of 6 total)
  • Leo

    (@leohsiang)

    1 year, 5 months ago

    Hi there,

    Give this CSS a shot:

    .main-navigation .main-nav ul li:not(.last-child) a {
    border-right: 1px solid #000;
}

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    Let me know if this helps 🙂

    Thread Starter a4jp

    (@a4jpcom)

    1 year, 5 months ago

    Thank you for the quick reply @leohsiang. That code added a border line to the right side of Nav5 in Chrome so I need something else or a way to fix it. I also want to load an image, as just a hard line looks pretty bad. Unless the line can be styled. I’d have to find a way to fade the top and bottom of the border line till it becomes transparent.

    • This reply was modified 1 year, 5 months ago by a4jp.
    • This reply was modified 1 year, 5 months ago by a4jp.
    Thread Starter a4jp

    (@a4jpcom)

    1 year, 5 months ago

    This didn’t work either. 

    .main-navigation .main-nav ul li:not(:last-child) {
  border-right: 1px solid #000;
}

    I tried the latest versions of Chrome, Opera GX, Firefox and Edge.

    • This reply was modified 1 year, 5 months ago by a4jp.
    fernandoazarcon2

    (@fernandoazarcon2)

    1 year, 5 months ago

    Hi @a4jpcom,

    For reference, can you provide the link to the site in question?

    Thread Starter a4jp

    (@a4jpcom)

    1 year, 5 months ago

    I’m super sorry but I can’t list the URL or offer login info. It’s a private website that can only be accessed by company employees.

    fernandoazarcon2

    (@fernandoazarcon2)

    1 year, 5 months ago

    I see. Can you take a screenshot of the HTML structure of the Nav?

    Example: https://share.getcloudapp.com/Jru827bY

    We’ll check the structure and see if the CSS provided needs changing.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How do we add a line image between the menu items?’ is closed to new replies.