Community Forums › Forums › Archived Forums › Design Tips and Tricks › Help with styling sub-menus
Tagged: sub menu
- This topic has 8 replies, 3 voices, and was last updated 9 years, 5 months ago by emasai.
-
AuthorPosts
-
July 4, 2014 at 9:54 am #112969PicciaNeriMember
Hello, I am styling a website with a child theme based on Genesis sample. I am having problems styling sub-menus.
I have changed the drop down menus to be much thinner (20px height) and in a different colour. However, I don't seem to be able to avoid having a huge gap between the sub menu items. I think it might have to do with the positioning, but nothing I have tried so far works. I am also finding it difficult to get consistent results when trying to position the .genesis-nav-menu .sub-menu .submenu exactly at the same height as the sub-menu item it relates to: it seems to respond to the margin property but not exactly, and not consistently. This is what I have at the moment:.genesis-nav-menu .sub-menu .sub-menu {
margin: -32px 0 0 119px;
}
but there is no consistency when I try other margins and I can never get it to align perfectly.I would be sooo grateful for any help, the gap between menu items in particular is driving me crazy. What does it depend from? Please help a newbie.
many thanks in advance.
http://www.katewilliams.org.uk/July 4, 2014 at 10:18 am #112970PicciaNeriMemberAlso, why does the content area sightly shift downwards when hovering on the menu?
July 4, 2014 at 1:22 pm #112985emasaiParticipantRemove the height you have set everywhere on all the li and a tags in the menu to start with. Then go to line 969 and delete the padding in rems and change the regular padding to 10px 24px. Come back when you have done that and I'll take a look at the rest.
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comJuly 7, 2014 at 5:45 am #113197PicciaNeriMemberHi Lynne, thanks so much for that – I have done what you suggest, where should I take it from there? the big gap has disappeared but now the menu items, of course, are back to being quite thick which is not what I wanted.
thank you very much, Piccia
July 8, 2014 at 9:21 am #113409emasaiParticipantLine 969 remove height
Line 980 remove height
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comJuly 9, 2014 at 6:06 am #113542PicciaNeriMemberThank you – done that – now they are thin strips again the way I like them, but with the huge gap
July 9, 2014 at 6:41 am #113546emasaiParticipantLine 1024 remove padding in rems and change the regular padding: 3px;
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comOctober 22, 2014 at 2:45 pm #128790krdzine1MemberI think I'm having similar issue with the submenu on a site (actually a friend's site) . I'm having issue with submenu items showing up a good 100px away from the parent... making it impossible for you to mouse over and click on the sub item.
@emasai are you referencing a specific line in her code or in the default style.css for the Genesis template? My line 969 is not that. The sub-menu items I see are below but I don't see where I would make the change.Can this be addressed in the Child's css instead? Warnings about changing the default css so just checking.
.genesis-nav-menu .sub-menu {
left: -9999px;
opacity: 0;
position: absolute;
-webkit-transition: opacity .4s ease-in-out;
-moz-transition: opacity .4s ease-in-out;
-ms-transition: opacity .4s ease-in-out;
-o-transition: opacity .4s ease-in-out;
transition: opacity .4s ease-in-out;
width: 200px;
z-index: 9999;
}.genesis-nav-menu .sub-menu a {
background-color: #fff;
border: 1px solid #eee;
border-top: none;
font-size: 14px;
padding: 20px;
position: relative;
width: 200px;
}.genesis-nav-menu .sub-menu .sub-menu {
margin: -55px 0 0 199px;
}October 22, 2014 at 3:09 pm #128792emasaiParticipantPlease start your own post on this issue and also give a link to your site. The line I was referring to is on the OP's site, it will obviously not be the same on yours.
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.