Autofocus Submenu skewed

  • Author
    Posts
  • #1202834

    emmaliz15
    Member

    I just used CSS to move my menu in Autofocus theme from the right to a left-alligned inline block. However, now my submenu (under campaigns) is skewed way to left. Please advise on how to adjust this. The code I used to move the menu is below. Thanks!

    #access, div.menu {
    width: 100%;
    position: absolute;
    top: 100px;
    left: 0px;
    }

    #access li, div.menu li {
    display: inline-block;
    }

    #header-wrapper {
    position: relative;
    }

    #header {
    padding-top: 40px;
    padding-bottom: 48px;
    }

    #access li, div.menu li {
    padding-right: 20px;
    padding-bottom: 150px;
    width: auto;
    }

    The blog I need help with is emmaenotemily.wordpress.com.

    #1203025

    This will get you closer, but I’m still having problems getting the top level menu items to not shift to the right when I hover over Campaigns. I’ll keep working on that.

    #access ul ul, div.menu ul ul {
        position: relative;
        right: 0;
        top: 0;
        z-index: 1000;
    }
    
    #access li, div.menu li {
        padding-bottom: 10px;
    }
    #1203031

    emmaliz15
    Member

    Thanks, and an update. I just added a header image. It’s HUGE! Not only would I like it to be smaller, like this one:
    http://blog.danielleweddings.com/

    but the addition of the header has actually caused the menu to disappear. I tried adjusting some of the padding but it doesn’t seem to make a difference, probably because not really sure what the numbers mean when I change them.

    #1203032

    Autofocus supports the flexible header image, so you can make the header image any size you desire, and then when you upload it and get ready to insert it, you select “use as is” and don’t crop or resize it.

    After you get the header image in, we can work on the menu and other element arrangements so that everything is aligned as you desire.

    #1203033

    Here is the support document on flexible headers: http://en.support.wordpress.com/themes/custom-header-image/#flexible-headers .

    #1203034

    emmaliz15
    Member

    Ok, header is adjusted, but it is too close to the top. I like the alignment that danielle weddings has with the logo indented slightly so that’s what I’m aiming for.

    Thanks!

    #1203036

    Give this a try for the header image.

    #header-image {
        margin-top: 25px;
    }

    I’ll work on finding and getting the menu to display.

    #1203038

    emmaliz15
    Member

    Thanks, that fixed the header image!

    #1203039

    First add this to your CSS:

    #content {
    margin-top: 50px;
    }

    Then in #access, div.menu change the “top” value to 0.

    Also, add this and it takes care of the top level menu shift and the enormous padding on the bottom of the sub menu items.

    #access li li {
    padding-bottom: 0;
    }
    #1203084

    emmaliz15
    Member

    Excellent! It worked, thank you!

    #1203087

    emmaliz15
    Member

    Actually, scratch that. Another problem has arisen. When I go to my “About” or “Accolades” pages, the heading runs into the menu. I tried adjusting the margin & padding at the bottom of the menu but it’s not working. Other suggestions? I”m going to try around the header as well.

    Thanks!

    #1203117

    This will space the content and the sidebar down on pages.

    .page #content, .page #sidebar {
        margin-top: 50px;
    }

The topic ‘Autofocus Submenu skewed’ is closed to new replies.