ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Flexform
• May 13, 2013 at 10:53 am #4644
  Green thumb

  Member

  Post count: 62

  Hi there.

  I need to change main menu’s css so it will look something like in the attachment.
  First I have to position it a little bit lower in the header and secondly I have to create some kind of a button effect with purple background.

  Can you please give me advice how to do that?
  1) How do I position menu a little bit closer to body?
  2) WHat CSS code do I have to hack in order to achieve effect of buttons?

  Thank you in advance!

  May 13, 2013 at 3:07 pm #4686
  Cosmin – SUPPORT

  Member

  Post count: 3851

  Hi,

  For 2) – that requires advanced customizations that theme support cannot cover. I suggest hiring a freelancer to do it.

  For 1) – Custom CSS :

  #main-navigation {
    margin-top: 10px !important;
  }

  Adjust the 10px value as needed.

  Regards,
  ————————————————————————————————————

  Cosmin
  Support Assistant

  May 13, 2013 at 9:28 pm #4722
  Green thumb

  Member

  Post count: 62

  Hi Cosmin,

  Thank you for your reply,

  I have another question about positioning menu, question 1)

  Is it possible to position it under the logo? And make it in the middle of the page? Or would I need for that advanced CSS coding?

  May 13, 2013 at 10:58 pm #4727
  Green thumb

  Member

  Post count: 62

  Cosmin it’s me again 🙂

  I’ve played with your code and if adding enough number of pixesls like this:

  #main-navigation {
  margin-top: 10px !important;
  }

  Menu is already lower then the logo.

  Now I just have to move it in the center or on the left so I used margin-right option

  #main-navigation {
  margin-top: 140px !important;
  margin-right: 335px !important;
  }

  This will placed menu in center of the site and lower then the logo. But I couldn’t put it under logo even if I’ve increased margin-right pixels as if there would be some invisible space around logo.

  In attachement there is 335px.png which shows somehow centered menu and 336px.png which shows menu that is not bellow logo instead it collapses in another column.

  Is there a relatively easy way to move menu under logo? Left sided?

  May 15, 2013 at 3:46 pm #4931
  Cosmin – SUPPORT

  Member

  Post count: 3851

  I would suggest editing the container classes in header.php so that the logo container is bigger (ex class=”span6″) and it forces what is to the right of it (menu) to break on the next row, underneath it.

  Regards,
  ————————————————————————————————————

  Cosmin
  Support Assistant

• Back to forum

  Posted in: Flexform