Need help? Check out our Support site, then

Autofocus Submenu skewed

  1. 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, {
    width: 100%;
    position: absolute;
    top: 100px;
    left: 0px;

    #access li, li {
    display: inline-block;

    #header-wrapper {
    position: relative;

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

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

    The blog I need help with is

  2. 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, ul ul {
        position: relative;
        right: 0;
        top: 0;
        z-index: 1000;
    #access li, li {
        padding-bottom: 10px;
  3. 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:

    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.

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

  5. Here is the support document on flexible headers: .

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


  7. Give this a try for the header image.

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

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

  8. Thanks, that fixed the header image!

  9. First add this to your CSS:

    #content {
    margin-top: 50px;

    Then in #access, 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;
  10. Excellent! It worked, thank you!

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


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

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

Topic Closed

This topic has been closed to new replies.

About this Topic