Change position of menu to below header – Yoko theme

• 

  nellpegum · Member · Feb 24, 2015 at 3:03 am

  • Copy link
  • Add topic to favorites

  Hi there,

  I’m using the Yoko theme and have been trying, using ‘inspect element’ and the css customisation capability to identify the menu code and change it so the menu sits below the header but I am having no luck. When I use the ‘inspect element’ tool on the menu it seems to come up as #branding #mainnav, but when I adjust the css it moves the whole page down, not just the menu.

  Could anyone advise how I need to go about this?

  Many thanks in advance.

  Michaela

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

• 

  staff-happychia · Staff · Feb 25, 2015 at 9:31 am

  • Copy link

  Please try this CSS and see if you like the result.

  header#branding {
      position: relative;
  }
  
  #branding #mainnav {
      position: absolute;
      top: 150px;
  
  }
  
  #site-title {
      display:none
  }

• 

  nellpegum · Member · Feb 26, 2015 at 2:53 am

  • Copy link

  Thank you – that is working well, however Id still like the menu to be aligned right. When I added left: 500 px it put it in the right position but on the mobile screen it is all out of whack. Is there a way to have it align to right of screen under the header but still function as it should on mobile devices?

  Thanks in advance!

• 

  staff-happychia · Staff · Feb 26, 2015 at 5:37 pm

  • Copy link

  Let’s add a media query to make this CSS apply only if the screen size is at least 900px:

  @media screen and (min-width:900px) {
      header#branding {
      position: relative;
  }
  
  #branding #mainnav {
      position: absolute;
      top: 150px;
      left: 500px;
  
  }
  
  #site-title {
      display:none
  }
  }

• 

  nellpegum · Member · Feb 26, 2015 at 10:37 pm

  • Copy link

  Thank you – that worked a treat!