Editing CSS of Submenu

Tagged: submenu

This topic has 4 replies, 2 voices, and was last updated 10 years, 7 months ago by Jacqueline.

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

Author

Posts
March 22, 2014 at 1:57 pm #22235

Jacqueline
Member

Hi Sakin,
I have just added a Gallery submenu and it doesn’t look nice at all, see here: http://cinnamonearth.com
I kind of aligned the submenu boxes with the Gallery in Firefox but it looks very different in Safari. Also, there seems to be an “invisible” border that you can see on the right side.
What code would I need to get the submenu boxes the same size as their menu boxes.
If possible, I think I would actually prefer a horizontal submenu but I did some research yesterday and if I’m not mistaken, that’s not possible with my theme.

I hope you got some advice for me.

Thanks a billion,
Jackie

March 22, 2014 at 10:48 pm #22280

Sakin
Keymaster

@CinnamonEarth: Hello Jackie, I see that you have edited the menu style. Just try to add the following CSS in “Appearance => Theme Options => Custom CSS” box and check in.
#header-menu ul.menu ul{ box-shadow: none; }

March 23, 2014 at 10:22 am #22328

Jacqueline
Member

@sakin Thank you very much for that, it worked. I still have the issue of the two submenu boxes being smaller than the gallery box right now. They are the same size in Firefox but not Safari. What do I have to do to make the submenus the same size as their parent in all browsers?

March 23, 2014 at 9:51 pm #22361
Sakin
Keymaster
@CinnamonEarth: You need to edit the width of both menu and sub-menu.
```
/* For Parent Menu */
#header-menu ul.menu a {
    padding: 0;
    text-align: center;
    width: 198px;
}
/* For Sub-Menu */
#header-menu ul.menu ul {
    width: 205px;
}
```
March 24, 2014 at 11:44 am #22431

Jacqueline
Member

Thank you so much Sakin, it drove me crazy 😛
Author

Posts