Extending Navigation Bar

• 

  muslimahcoaching · Member · Feb 7, 2017 at 8:51 pm

  • Copy link
  • Add topic to favorites

  Hi is there a way to extend my main navigation bar with CSS so it covers the full screen? Thanks.

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

• 

  staff-loquaciousloon · Staff · Feb 8, 2017 at 3:51 pm

  • Copy link

  Hi @tayyibaatwives!

  This can be a bit tricky, because the navigation menu is contained inside a narrower column on the page. We can try to cheat a bit with some CSS like this, which creates a similar looking element, and then positions it behind your navigation bar:

  @media screen and (min-width: 497px) {
  #site-navigation:after {
      background-color: #f25f70;
      border-bottom: 2px solid rgba(0,0,0,.15);
      position: absolute;
      display: block;
      content: "";
      width: 100%;
      height: 52px;
      top: 254px;
      left: 0px;
      z-index: -1;
  }
  }
  
  @media screen and (min-width: 768px) {
  #site-navigation:after {
  	height: 56px
  }
  }

  This wont effect really small screens (like cell phones) because of the way the header shifts around on those devices