Editor theme – Customized CSS, need navigation to span full page

• 

  mrpurplz · Member · Aug 10, 2015 at 5:11 pm

  • Copy link
  • Add topic to favorites

  After getting help in another thread about making the ‘Editor’ theme scroll with the main page (as opposed to independently of each other) I was advised to add this

  .site-header {
  position:absolute;
  height:auto;
  }

  Which totally fixed the problem, however, now the navigation background colour stops just after the last menu item as opposed to going all the way to the bottom of the page.

  I’ve tried changing height to 100% but this didn’t help.

  Any suggestions?

• 

  mrpurplz · Member · Aug 10, 2015 at 5:15 pm

  • Copy link

  I can’t seem to edit the first post.

  The nav bar colour actually seems to stop wherever the browser originally rendered it. This is in both Chrome and FF.

• 

  thesacredpath · Member · Aug 11, 2015 at 8:31 pm

  • Copy link

  Hi there, I see no nav bar or any content on https://mrpurplz.wordpress.com/, which is the only site associated with your username. I also don’t see the WordPress.com Premium upgrade which would allow you to add Custom CSS.

  Can we have a link to the site you are talking about?

• 

  mrpurplz · Member · Aug 11, 2015 at 11:26 pm

  • Copy link

  I do apologise, it’s a private website on another account, however it’s jut using the base editor theme with the paid CSS upgrade.

  It’s the same as this – https://editordemo.wordpress.com/

• 

  thesacredpath · Member · Aug 13, 2015 at 8:23 am

  • Copy link

  …now the navigation background colour stops just after the last menu item as opposed to going all the way to the bottom of the page.

  When you use position: absolute; it essentially floats the menu above all other elements and breaks the relationship it has to the other page elements. The only thing we could do would be to add a fixed height, such as 25000px and then set #page to position: relative; and overflow: hidden; . This is a seriously “hackey” fix.

  .site-header {
      position: absolute;
      height: 25000px;
  }
  #page {
      overflow: hidden;
      position: relative;
  }