This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Adding a border-radius to #search-icon

Resolved 8 replies premiumthemetheme-vantage
Dave LeBlanc
10 years ago · Last reply by Andrew Misplon 10 years ago

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.

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

8
  1. Andrew Misplon Staff 10 years, 3 months ago

    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;
}
  2. Dave LeBlanc 10 years, 3 months ago

    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

  3. Dave LeBlanc 10 years, 3 months ago

    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.

  4. Andrew Misplon Staff 10 years, 3 months ago

    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;
}
  5. Dave LeBlanc 10 years, 3 months ago

    Thank, Andrew! You nailed it perfectly and I just learned some more CSS.

    Thanks again for the prompt replies and assistance.

  6. Andrew Misplon Staff 10 years, 3 months ago

    Super :) Glad we could help.

    Chat soon. Cheers!

  7. Dave LeBlanc 10 years, 3 months ago

    I look forward to it, although it's often a sign of defeat, meaning I couldn't figure the problem out. ;-

    Ah, well.

  8. Andrew Misplon Staff 10 years, 3 months ago

    Anytime :)

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread