Autofocus Submenu skewed

• 

  emmaliz15 · Member · Mar 30, 2013 at 12:03 am

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  thesacredpath · Member · Mar 30, 2013 at 6:18 am

  • Copy link

  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;
  }

• 

  emmaliz15 · Member · Mar 30, 2013 at 4:17 pm

  • Copy link

  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.

• 

  thesacredpath · Member · Mar 30, 2013 at 4:49 pm

  • Copy link

  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.

• 

  thesacredpath · Member · Mar 30, 2013 at 4:50 pm

  • Copy link

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

• 

  emmaliz15 · Member · Mar 30, 2013 at 5:14 pm

  • Copy link

  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!

• 

  thesacredpath · Member · Mar 30, 2013 at 5:33 pm

  • Copy link

  Give this a try for the header image.

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

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

• 

  emmaliz15 · Member · Mar 30, 2013 at 5:42 pm

  • Copy link

  Thanks, that fixed the header image!

• 

  thesacredpath · Member · Mar 30, 2013 at 5:42 pm

  • Copy link

  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;
  }

• 

  emmaliz15 · Member · Mar 30, 2013 at 9:20 pm

  • Copy link

  Excellent! It worked, thank you!

• 

  emmaliz15 · Member · Mar 30, 2013 at 10:36 pm

  • Copy link

  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!

• 

  thesacredpath · Member · Mar 31, 2013 at 8:12 pm

  • Copy link

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

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