Hello,
I am trying to display rounded corners on the main menu in the menu bar region. I would like it to match the look of the "#toggle-wrapper" above which shows rounded corners out of the box.

What CSS selector do I need to apply my "border-radius" code under?

I looked in "styles.base.css" and it seems my choices could be "#menu-wrapper" or "#menu-bar .block" or as a long shot maybe even "#menu-bar ul ul".

Getting desperate I have tried all three together and alone by placing the code in my enabled "styles.custom.css" and of course flushing all cashes. I must be missing something.

Below is the code I am trying:

#menu-wrapper {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

#menu-bar .block {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

#menu-bar ul ul {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

What am I doing wrong? Wrong selector? Wrong location? Wrong code?
I am very greatful for any help with this. Thanks!

Comments

Jeff Burnz’s picture

Jeff Burnz commented
Status: Active » Fixed

Something like the following.

#menu-bar has the actual background.
#menu-wrapper has a box-shadow so needs the corners as well.
#menu-bar .block needs some left and right padding - all the list elements have a background also, so they need to push away from the ends a bit, the easy way to achieve this is to pad the wrapper i.e. the block.

#menu-wrapper, 
#menu-bar {
  border-radius: 6px;
}
#menu-bar .block {
  padding: 0 6px;
}
bharata’s picture

bharata commented

Amazing!! That did the trick....

Thank you very much!!

Have a great day!

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.