Switching the Title line and Menu line on Chateau

• 

  irienat · Member · Mar 31, 2015 at 7:45 pm

  • Copy link
  • Add topic to favorites

  How can I switch the Title and the menu line on my homepage. I want the Title to be at the very top of the page, with the menu beneath that and then the header image. I have the Chateau theme and the Upgrade.

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

• 

  thesacredpath · Member · Apr 1, 2015 at 2:25 pm

  • Copy link

  Hi there, on responsive width themes such as Chateau, this is a very difficult challenge since the size and position of elements change with window/screen width so that things work and look good on everything from laptops all the way down to phones. Narrow and widen your browser window to see how the title and menu change on narrower devices/windows.

  To move them, we have to use either absolute or relative positioning, and they then lose their relationship to the other elements in the header div, so the title and menu end up overlapping each other when they start to go to multiple lines. You can add the following CSS and then narrow your browser window and see what happens.

  #main-title {
      position: relative;
      top: -50px;
  }
  #menu {
      position: relative;
      top: 90px;
  }

  Media queries can be used to adjust the positioning and spacing of them at different window/screen widths, but that in an inexact thing since you have no control over a visitor’s browser settings (zoom level, minimum font size, etc.).

• 

  irienat · Member · Apr 1, 2015 at 4:18 pm

  • Copy link

  It is PERFECT! I actually don’t even understand what you mean about narrowing my browser window (I’m new to this, everything is a research question for me) but I pasted it in and it looks awesome. Thanks!

• 

  thesacredpath · Member · Apr 2, 2015 at 1:23 am

  • Copy link

  You are welcome.