Move Menu

• 

  hymesha · Member · Aug 11, 2015 at 8:13 am

  • Copy link
  • Add topic to favorites

  I just loaded the nucleare theme on my site. I was hoping to move the menu below the header image. Is there a css for this?

  The blog I need help with is: (visible only to logged in users)

• 

  michaelvandenberg · Member · Aug 11, 2015 at 10:08 am

  • Copy link

  Hi there,

  This can quite easily be done with Flexbox.

  Try this:

  #page {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  
  .navigation-bar {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
        -ms-flex-order: 2;
            order: 2;
  }
  
  #masthead {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1;
  }
  
  #content {
    -webkit-box-ordinal-group: 4;
    -webkit-order: 3;
        -ms-flex-order: 3;
            order: 3;
  }
  
  #colophon {
    -webkit-box-ordinal-group: 5;
    -webkit-order: 4;
        -ms-flex-order: 4;
            order: 4;
  }

  Of course the page was designed with a different order, so the margin are a bit off. I would add something like this (play around with the numbers till your satisfied):

  #masthead {
    margin: 1.5em 0;
  }
  
  .navigation-bar {
    margin-bottom: 3em;
  }

  Let me know if it works!

  Regards,

  Michael