Sub Menu Positioning

[krdzine1]

I 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.

Also, can (should) this be addressed in the Child’s css instead? Warnings about changing the default css so just checking.

SITE: http://novelromance.net/

CODE from Genesis CSS
.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;
}

http://novelromance.net/

[gcampton]

yes it should be in the child css. Everything, always should be in child css unless you find a serious vulnerability or error in the main Genesis framework, which is unlikely at this stage of development.

How did you center the menu? Because it's not centered correctly, and there's not enough room for your menu items.

Having a look, kinda looks like you just added margin...

#nav ul {
    float: left;
    margin-left: 135px;
    width: 100%;
}

I assume you made that 135px instead of just centering it. Firstly get rid of that. Make it '0'

Then in

#nav li {
    float: left;
    list-style-type: none;
    margin-left: 135px;
}

You have the same problem, so you've added 135px margin left to the WHOLE menu, and added 135px margin left to each menu item. Change that to:

#nav li {
    float: left;
    list-style-type: none;
    margin-left: 35px;
}

35px is enough or even 20.

thirdly we want to center the menu, add
text-align: center; to #nav

#nav {
text-align: center;
}

Remove the padding on links.

#nav li a {
    color: #46109a;
    display: block;
    font-size: 18px;
    padding: 0;
    position: relative;
    text-decoration: none;
}

Then add 20 margin top to the whole menu.

#nav ul {
    float: left;
    margin-top: 20px;
    width: 100%;
}

That's looking better, but for some reason is not centering, someone needs to step in and help out here.

EDIT: actually that margin top won't work as it changes submenu. change back to padding on links.

[gcampton]

adding the margin or padding top 20px to the #nav li works. and doesn't effect the submenu

#nav li {
    float: left;
    list-style-type: none;
    margin-left: 20px;
    margin-top: 20px;
}

Now just need someone to tell us how to make the centering work...

#nav ul {
    float: left;
    margin-left: 120px;
    width: 100%;
}

If you put the 120px margin left in it looks perfect. But will be awful in tablet and mobile.

[gcampton]

Actually the site isn't responsive anyway... just put the 120px in the #nav ul tag and you're almost done, some small tweaks to the submenu should do it.

[gcampton]

Recap: Or something like this:

#nav ul {
    float: left;
    margin-left: 120px;
    width: 100%;
}

#nav li {
    float: left;
    list-style-type: none;
    margin: 20px 0 0 20px;
}

#nav li a {
    color: #46109a;
    display: block;
    font-size: 18px;
    padding: 0;
    position: relative;
    text-decoration: none;
}

.sub-menu {
    margin: 0 !important;
    padding: 0 !important;
}

.sub-menu li {
    margin: 5px 0 0 7px !important;
    padding: 0 !important;
}

[krdzine1]

Thanks. It did the trick. I will discuss with my friend about the site, I suggest she make it a responsive design but she went with a design firm that created this for her so may be content with this fix.

[Author]

Posts