Hello. I am trying to add a bit styling to the menu in the Vantage Theme by rounding the corners. I can do it with no problem on the left hand side under .main-navigation. The problem is trying to add a border radius in the #search-icon div. when Search in Menu is enabled
This works in .main-navigation:
.main-navigation {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;}This does not work in #search-icon:
#search-icon {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;}If I disable it Search in Menu, no problem, I can show the corners rounded as part of the .main-navigation.
Enable Search in Menu and I can’t round the corners. I can add a white one pixel border on the left side of #search-icon, but I can’t round the borders on the right hand side. The corners remain stubbornly at border: 0; Nothing I seem to do changes the 0 border, including adding !important.
Any idea what I am doing wrong? Any tips to fix this?
I can’t yet show you the site, it’s on my computer right now.
Hey Dave :)
Perhaps try:
.main-navigation { border-top-left-radius: 10px; border-bottom-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; } #search-icon #search-icon-icon { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }Hi, Andrew, and thanks for the prompt reply.
Yes, both those together work. One or the other, no. Together, yes. Missed it by that much. It really looks good. So good I have to now add something else, making the hover over the Home menu item on the far left match the hover over the search icon.
Not draw on you kindness too much, but I have been fiddling with the hover over the Home menu item and I can’t get only that item to show the 10px radius. When the cursor hovers over it, the Home menu loses 10px radius settings. I was going to live with it, but now seeing how good it now looks on the right side of the menu bar, I have to add the radius styling to the Home menu item as well.
Can I draw on your help one more time?
Using Custom CSS, if I click on the Home menu item, I get this in the heirarchy: #menu-item-10.menu-item.menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-5 current_page_item menu-item-10 > a
I am not sure what is the ID here to create a CSS selector that says “if the menu item is being hovered, make the top left and bottom radius 10px. Certainly, this is not working:
#menu-item-10 .main-navigation .main-navigation ul li:hover > a{ border-top-right-radius: 10px; border-bottom-right-radius: 10px; }Again, thanks for any help you can offer.
Dave LeBlanc
Sorry, that should be
#menu-item-10 .main-navigation .main-navigation ul li:hover > a{ border-top-left-radius: 10px; border-bottom-left-radius: 10px; }Sorry, I am getting punchy. I don’t know how you guys do it.
No problem, try this:
.main-navigation { border-top-left-radius: 10px; border-bottom-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px;}.main-navigation li:first-of-type a { border-top-left-radius: 10px; border-bottom-left-radius: 10px;}#search-icon #search-icon-icon { border-top-right-radius: 10px; border-bottom-right-radius: 10px;}Thank, Andrew! You nailed it perfectly and I just learned some more CSS.
Thanks again for the prompt replies and assistance.
Super :) Glad we could help.
Chat soon. Cheers!
I look forward to it, although it's often a sign of defeat, meaning I couldn't figure the problem out. ;-
Ah, well.
Anytime :)