Need Help Adding bar to page

• 

  mbaker1228 · Member · Feb 10, 2017 at 5:48 pm

  • Copy link
  • Add topic to favorites

  Is it possible to make my main header look like the site below. I was told I would need a CSS code to make it possible.

  Home Page

  Thank you!

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

• 

  staff-loquaciousloon · Staff · Feb 10, 2017 at 6:53 pm

  • Copy link

  It looks like the menu bar on the site you’ve linked to is similar to the one you have now. We can add a border to the bottom to make them look more alike, and we could make it so the menu stays on the screen while you’re scrolling – but it would have to have a solid background color for that.

  CSS won’t be able to create the effect that greylayers.com has of the menu changing from transparent to white as you scroll, so it won’t be exactly the same.

  Here are a couple of options for you to try:

  Menu bar with a border (still transparent, normal scrolling)

  .site-navigation {
  	border-bottom: 2px solid rgba(255,255,255,.7);
  	font-weight: bold;
  }

  Or you could try a menu bar with a white background that stays on the screen while you scroll. This one wound up being more complex than expected, so it may not be perfect (personally, I like the first option better):

  .site-navigation {
      border-bottom: 2px solid #333;
      color: #333;
      font-weight: bold;
      background: #fff;
  }
  
  .site-navigation .menu>li>a:hover,
  .site-navigation .menu>.current-menu-item>a,
  .site-navigation .menu>.current-menu-parent>a,
  .site-navigation .menu>.current-menu-ancester>a,
  .site-navigation .menu-item-has-children:hover,
  .site-navigation .menu-item-has-children:focus{
      color: #333;
  }
  
  @media screen and (max-width: 767px) {
    .site-navigation ul {
      color: #fff;   
  }    
  }
  
  @media screen and (min-width: 481px) {
      .site-navigation {
          position: fixed;
      }
      .admin-bar .site-navigation {
          top: 46px
      }
  }
  @media screen and (min-width: 783px) {
      .admin-bar .site-navigation {
          top: 32px
      }
  }
  .site-navigation-toggle,
  .site-navigation-toggle:hover {
      color: #333;
  }

  Take a look and let me know what you think.

• 

  mbaker1228 · Member · Feb 10, 2017 at 7:06 pm

  • Copy link

  I honestly like the second option better. The picture I have now is just a place holder.

  Thanks for all your help!

• 

  staff-loquaciousloon · Staff · Feb 13, 2017 at 2:36 pm

  • Copy link

  You’re welcome! Glad you like it :)