A few problems with the menu…

  • Resolved brent7

    (@brent7)


    10 years, 11 months ago

    Hey I’m running a child theme with Twenty Eleven and I’m having problems getting the menu to work correctly.

    My site is: http://therightkitchen.com

    Problem #1: The last menu item (Cookware) drops below the navigation bar instead of going to the right of (Bakeware). I’ve had problems with this on other sites, but have fixed it by making the font smaller. However, I don’t really want to do that and I’d rather just have the items fill the whole navigation bar.

    Problem #2: The hover of each menu item is way off. I want the hover to fit nicely inside the white space like it does on southernliving.com.

    Problem # 3: I can’t move the menu items to the left without moving the whole navigation bar. I want all of the menu items to be moved to the left about 30-40px.

    Problem #4: There’s a 1px gray border on the left and the right of the navigation menu that I want to remove. But I can’t find what I need to change to fix it.

    I know this is a lot, but this menu bar is really giving me problems. Any help would be greatly appreciated.

    Thanks,
    Brent

Viewing 8 replies - 1 through 8 (of 8 total)
  • WPyogi

    (@wpyogi)

    10 years, 11 months ago

    A few CSS tweaks to try:

    #branding .only-search + #access div {
    padding-right: 0;
}

#access div {
    margin: 0;
}

#access {
    drop-shadow: none;
}

#access li:hover > a, #access ul ul *:hover > a, #access a:focus {
    margin-top: 0;
}

    Thread Starter brent7

    (@brent7)

    10 years, 11 months ago

    Once again your answers have helped me out a ton!

    Now everything is looking awesome. The side border is there, but that’s really not that big of a deal. The hover is still a little off, too. The Home hover is too wide on the left and the menu item names are below the hover.

    Do you have an email address? I’d like to pay you for taking the time to find these fixes if possible!

    Brent

    WPyogi

    (@wpyogi)

    10 years, 11 months ago

    LOL – virtual payment much appreciated :)! (We can’t get paid for helping out here) I’ll look at the remaining issues…

    WPyogi

    (@wpyogi)

    10 years, 11 months ago

    The hover drop is due to the height here in your child style.css – see if removing the height works:

    #access li:hover > a, #access ul ul *:hover > a, #access a:focus {
    margin-top: 0;
    height: 34px;
}

    Add this:

    #access ul {
    margin: 0;
}

    That should have been “box-shadow” not “drop-shadow” – my mistake – sorry!

    See where that get us.

    Thread Starter brent7

    (@brent7)

    10 years, 11 months ago

    Well they don’t have to know that I pay you! 🙂

    Everything looks great, but now instead of the hover text getting cut off, the whole hover is extending below the navigation bar.

    By the way, thank you for all of your help. I really appreciate it!

    Brent

    WPyogi

    (@wpyogi)

    10 years, 11 months ago

    See if these will fix it – remove the lines with // in front of them:

    #access a {
font-family: georgia;
font-size: 20px;
font-weight: 300;
color: #000;
text-align: left;
float: left;
text-align: left;
position: relative;
//margin-top: -16px;
padding: auto;
}

    and

    #access  {
margin-top: -2px;
color: #fff;
background-color: #fff;
background: #fff;
//height: 34px;
min-width: 1000px;
opacity: .99;
font-color: #000;
border-top: 5px solid #000;
border-bottom: 1px solid #AAAAAA;
box-shadow: none;
}

    Do you want those that tall? If not, add and adjust this:

    #access a {
    line-height: 3.333em;
}

    Thread Starter brent7

    (@brent7)

    10 years, 11 months ago

    That did it! It looks perfect now.

    Thank you again WPyogi for your sage advice!

    Best,
    Brent

    WPyogi

    (@wpyogi)

    10 years, 11 months ago

    You’re more than welcome.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘A few problems with the menu…’ is closed to new replies.