- This topic has 10 replies, 3 voices, and was last updated 3 years, 11 months ago by David.
-
AuthorPosts
-
April 18, 2020 at 3:01 pm #1244722DM
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!
DMApril 18, 2020 at 6:03 pm #1244829TomLead DeveloperLead DeveloperHi 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 #1244844DMHi 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!
DMApril 19, 2020 at 2:36 am #1245036DavidStaffCustomer SupportHi 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 #1245587DMHi 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!
DMApril 19, 2020 at 4:48 pm #1245937TomLead DeveloperLead DeveloperIt 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 #1246008DMHi 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!
DMApril 20, 2020 at 1:41 am #1246206DavidStaffCustomer SupportOk remove the CSS Tom and i provided.
Edit the Background in the Customizer and for position set it toright center
April 20, 2020 at 6:18 pm #1247336DMHi 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 #1247342DMI 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 #1247634DavidStaffCustomer SupportOops – silly me – yeah that option is not on the Navigation.
Glad to see you got it resolved -
AuthorPosts
- You must be logged in to reply to this topic.