Untitled Theme, Sticky Top Menu Bar Help

• 

  ctmurfy · Member · Dec 28, 2013 at 10:12 am

  • Copy link
  • Add topic to favorites

  I am working on the page title and top menu of my blog (murfvs.net). I found this in a different thread, which has helped tremendously:

  .main-navigation {
  float: right;
  font-family: ‘arvo’, georgia;
  padding-top: 2px;
  text-transform: uppercase;
  padding-right: 50px;
  }

  #masthead {
  color: #fff;
  margin: 0 auto;
  max-width: 1600px;
  position: fixed;
  z-index: 1;
  width: 100%;
  background-color: #000;
  }

  However, I don’t like the left justification and the fact that the black background does not go across the entire top of the page.

  As it is currently, I have the Blog Title and the menu centered on the page, on a single line. I had to do some padding trickery to make it look right.

  Ultimately, I want a single black strip across the ENTIRE page. The page title and menu options centered above the page content. And the entire bar scrolling as the page is scrolled.

  Any assistance would be greatly appreciated!

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

• 

  thesacredpath · Member · Dec 28, 2013 at 4:53 pm

  • Copy link

  Hi there, I think the following will do what you want, if I’m understanding you correctly. Add it at the bottom of your existing custom CSS.

  #logo {
      min-width: 100%;
      text-align: center;
  }
  .nav-wrap {
      width: 100%;
  }
  .main-navigation {
      text-align: center;
      width: 100%;
  }
  .menu-menu-1-container {
      display: inline-block;
  }

• 

  ctmurfy · Member · Dec 28, 2013 at 5:41 pm

  • Copy link

  Oh, that helped tremendously.

  It’s almost perfect, save for one exception:

  Now that the top menu is a lot thicker, it is cutting off the top of the page’s content.

• 

  thesacredpath · Member · Dec 28, 2013 at 6:12 pm

  • Copy link

  Hmmm, not seeing that in Safari or Firefox or Chrome on my system. The content and sidebar widgets move down to make room for the taller nav/site title area. Can you take a screenshot? Did you try saving the CSS and viewing the site outside of the CSS preview?

• 

  ctmurfy · Member · Dec 28, 2013 at 7:00 pm

  • Copy link

  Yeah, I have it saved now if you want to take another look. I tweaked some height to get more to show, but on mine I still have the issue. (using chrome)

• 

  ctmurfy · Member · Dec 28, 2013 at 7:13 pm

  • Copy link

  Here’s a screenshot: https://www.dropbox.com/s/ph5twxt6kt4gnl5/Screenshot%202013-12-28%2013.12.38.png

• 

  ctmurfy · Member · Dec 28, 2013 at 7:54 pm

  • Copy link

  I got it! Thanks so much for your help. :D

• 

  thesacredpath · Member · Dec 28, 2013 at 8:06 pm

  • Copy link

  You are welcome and glad you got it fixed.