Primary navigation, background image

This topic has 10 replies, 3 voices, and was last updated 5 years, 11 months ago by David.

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
April 18, 2020 at 3:01 pm #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

April 18, 2020 at 6:03 pm #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 🙂
April 18, 2020 at 6:33 pm #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

April 19, 2020 at 2:36 am #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);
    } 
}
```
April 19, 2020 at 9:54 am #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

April 19, 2020 at 4:48 pm #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;
}
```
April 19, 2020 at 6:44 pm #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

April 20, 2020 at 1:41 am #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

April 20, 2020 at 6:18 pm #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

April 20, 2020 at 6:28 pm #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!

April 21, 2020 at 2:54 am #1247634

David
Staff
Customer Support

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

Posts

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

[Resolved] Primary navigation, background image

Popular Articles

[Resolved] Primary navigation, background image

Popular Articles

Start building better websites today.