[Resolved] Primary navigation, background image

Home Forums Support Primary navigation, background image

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1244722
    DM

    Hi I have a background image that I am using in the Primary Navigation menu. It is a vertical line that divides each menu item. When I added it on it cause the background image to go over the radiused edge of my menu. I would like it to not be before the 1st menu item and appear after each item.

    Thanks!
    DM

    #1244829
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Try this CSS:

    .main-navigation .main-nav > ul > li:first-child > a {
        background-image: none;
    }

    Let me know 🙂

    #1244844
    DM

    Hi Tom!

    Thanks for your reply. It did work to remove the image from the far left! Can you tell me how to get the image after the last item in the menu?

    Thanks again!
    DM

    #1245036
    David
    Staff
    Customer Support

    Hi there,

    try this instead.
    1. remove the background image from the menu item.
    2. Add this CSS:

    .main-navigation .main-nav > ul > li > a {
        border-right: 1px solid rgba(255,255,255,0.25);
        box-sizing: border-box;
    } 

    If you want you can bottom borders to the mobile menu with this CSS:

    @media (max-width: 769px) {
        .main-navigation .main-nav > ul > li > a {
            border-bottom: 1px solid rgba(255,255,255,0.25);
        } 
    }
    #1245587
    DM

    Hi there David.

    That gives a very different feel to my menu. I added your option and left the original dividers so that you can see the difference. The web url was listed in the first message.

    Thanks!
    DM

    #1245937
    Tom
    Lead Developer
    Lead Developer

    It looks like the image is already added to the last item, or are you wanting to remove it?

    If so, your CSS would look like this:

    .main-navigation .main-nav > ul > li:first-child > a,
    .main-navigation .main-nav > ul > li:last-child > a {
        background-image: none;
    }
    #1246008
    DM

    Hi Tom.

    The image is not at the right side of the last item. That is the box outline that David suggested in the above thread. Unfortunately, it does not look the same as my image (which is separating the other items.) Is there a way to use my image at the right side of the last item?

    Thanks!
    DM

    #1246206
    David
    Staff
    Customer Support

    Ok remove the CSS Tom and i provided.
    Edit the Background in the Customizer and for position set it to right center

    #1247336
    DM

    Hi David.

    Under Customize-> Background Image there isn’t an option to set the position to right center. The options are repeat, x, y, no repeat. Am I in the wrong spot?

    DM

    #1247342
    DM

    I got it! Thank you for your help! In custom css I used this:

    .main-navigation .main-nav > ul > li > a{
    background-image: url(‘images/nav-line.png’);
    background-position: center right;
    }

    Thanks again for all your help!

    #1247634
    David
    Staff
    Customer Support

    Oops – silly me – yeah that option is not on the Navigation.
    Glad to see you got it resolved

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.